JavaScript nhận tiêu đề từ phản hồi

Tôi đã đọc lướt qua Google rất nhiều câu trả lời trong ngày của mình, vì vậy tôi sẽ bắt đầu bài đăng này với tl;dr - nếu bạn ở đây để sửa lỗi, chỉ cần đọc phần đầu tiên. Nếu bạn tò mò muốn biết thêm về những gì đang diễn ra [trường hợp sử dụng, phương pháp, v.v.], hãy đọc thêm

Lấy tiêu đề thông qua phương thức entries[]

Các tiêu đề được ẩn trong một phương thức entries[] không trả về một đối tượng mà là một trình vòng lặp, sau đó cấp quyền truy cập vào các tiêu đề ở định dạng khóa/giá trị thông qua vòng lặp for...of. [Thông tin thêm về điều này tại MDN]

Ví dụ: nếu bạn truy cập trang web của tôi và thoát khỏi vòng lặp, đây là những gì bạn sẽ nhận được

// code
fetch['//stevemiller.dev']
  .then[[response] => {
    for [var pair of response.headers.entries[]] {
      console.log[pair[0]+ ': '+ pair[1]];
    }
  }];
// logs
cache-control: max-age=600
content-type: text/html; charset=utf-8
expires: Sun, 07 Jul 2019 03:54:43 GMT
last-modified: Sun, 07 Jul 2019 03:43:47 GMT

Thêm thông tin. Sử dụng tiêu đề phản hồi

Một số API RESTful sử dụng các tiêu đề phản hồi để chỉ ra thông tin quan trọng sau một cuộc gọi. Ví dụ: một số API của bên thứ ba sẽ bao gồm thông tin giới hạn tốc độ hiện tại trong tiêu đề tùy chỉnh

Trong trường hợp của tôi, tôi đang sử dụng gói máy chủ json tiện dụng cho một số dữ liệu thử nghiệm

Khi chạy một truy vấn trên tập dữ liệu json-server, nó sẽ trả về một tiêu đề có tổng số kết quả cho truy vấn đó để giúp phân trang [x-total-count]

API tìm nạp Javascript

Sử dụng giao diện người dùng React, tôi đã gọi API máy chủ json bằng chức năng tìm nạp tích hợp với Javascript

fetch[`/events?q=${query}&_page=${page}`]
  .then[[response] => {
    return response.json[];
  }]
  // then setting state, etc

[Tôi yêu thích fetch vì nó được tích hợp trong Javascript, vì vậy không cần gói bổ sung]

Tuy nhiên, để giúp phân trang, tôi cần biết chính xác có bao nhiêu “trang” giá trị nội dung mà truy vấn này sẽ cung cấp. Truy cập các tiêu đề như thế này đã ghi một đối tượng trống

console.log[reponse.headers];
// ouptu: Headers {}

Điều này là do các tiêu đề không phải là một đối tượng, chúng là một

fetch[`/events?q=${query}&_page=${page}`]
  .then[[response] => {
    return response.json[];
  }]
  // then setting state, etc

Truy cập các tiêu đề bằng cách sử dụng for...of và entries[]

Bạn không thể truy cập trực tiếp vào các tiêu đề trên phản hồi cho cuộc gọi fetch – bạn phải lặp lại sau khi sử dụng phương pháp entries[] trên các tiêu đề. Mẫu mã [sử dụng phản ứng và tìm kiếm số lượng truy vấn] bên dưới

fetch[`/events?q=${query}&_page=${page}`]
  .then[[response] => {
    for [var pair of response.headers.entries[]] { // accessing the entries
      if [pair[0] === 'x-total-count'] { // key I'm looking for in this instance
        this.setState[{
          total: pair[1] // saving that value where I can use it
        }]
      }
    }
    return response.json[];
  }];

Từ đây, bạn có thể xây dựng đối tượng của riêng mình thông qua vòng lặp hoặc lọc các giá trị cụ thể [như tôi đã làm ở đầu bài viết]

Tìm kiếm một nhà phát triển Javascript? . nhà phát triển

Làm cách nào để nhận các giá trị tiêu đề phản hồi trong JavaScript?

Làm cách nào để lấy tiêu đề từ phản hồi HTTP?

Bạn có thể trích xuất tất cả các tiêu đề từ phản hồi trong thời gian chạy không?

Làm cách nào để lấy tiêu đề từ JavaScript?