FetchEvent: thuộc tính request

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2018.

Note: This feature is only available in Service Workers.

Thuộc tính chỉ đọc request của giao diện FetchEvent trả về Request đã kích hoạt trình xử lý sự kiện.

Thuộc tính này không thể là null (kể từ phiên bản 46, trong trường hợp của Firefox). Nếu yêu cầu không được cung cấp bằng cách nào khác, đối tượng options của hàm khởi tạo phải chứa một yêu cầu (xem FetchEvent()).

Giá trị

Một đối tượng Request.

Ví dụ

Đoạn mã này từ mẫu fetch của service worker (chạy mẫu fetch trực tiếp). Trình xử lý sự kiện onfetch lắng nghe sự kiện fetch. Khi được kích hoạt, truyền promise trở lại trang được kiểm soát vào FetchEvent.respondWith(). Promise này giải quyết thành yêu cầu URL khớp đầu tiên trong đối tượng Cache. Nếu không tìm thấy kết quả khớp, mã tìm nạp phản hồi từ mạng.

Mã cũng xử lý các ngoại lệ được ném từ thao tác fetch(). Lưu ý rằng phản hồi lỗi HTTP (ví dụ: 404) sẽ không kích hoạt ngoại lệ. Nó sẽ trả về đối tượng phản hồi bình thường có mã lỗi thích hợp được đặt.

js
self.addEventListener("fetch", (event) => {
  console.log("Xử lý sự kiện fetch cho", event.request.url);

  event.respondWith(
    caches.match(event.request).then((response) => {
      if (response) {
        console.log("Tìm thấy phản hồi trong bộ nhớ đệm:", response);

        return response;
      }
      console.log(
        "Không tìm thấy phản hồi trong bộ nhớ đệm. Chuẩn bị tìm nạp từ mạng...",
      );

      return fetch(event.request)
        .then((response) => {
          console.log("Phản hồi từ mạng là:", response);

          return response;
        })
        .catch((error) => {
          console.error("Tìm nạp thất bại:", error);

          throw error;
        });
    }),
  );
});

Thông số kỹ thuật

Specification
Service Workers Nightly
# fetch-event-request

Tương thích trình duyệt

Xem thêm