FetchEvent: phương thức respondWith()

Cú pháp

respondWith(response)

Tham số

response

Một Response hoặc một Promise giải quyết thành Response. Ngược lại, lỗi mạng được trả về cho Fetch.

Giá trị trả về

Không có (undefined).

Ngoại lệ

NetworkError DOMException

Được trả về nếu lỗi mạng được kích hoạt trên một số kết hợp nhất định của các giá trị FetchEvent.request.mode và Response.type, như được gợi ý trong các "quy tắc toàn cục" liệt kê ở trên.

InvalidStateError DOMException

Được trả về nếu sự kiện chưa được gửi hoặc respondWith() đã được gọi.

Mô tả

Chỉ định URL cuối cùng của tài nguyên

Từ Firefox 59 trở đi, khi một service worker cung cấp Response cho FetchEvent.respondWith(), giá trị Response.url sẽ được truyền đến yêu cầu mạng bị chặn như là URL đã giải quyết cuối cùng. Nếu giá trị Response.url là chuỗi rỗng, thì FetchEvent.request.url được dùng làm URL cuối cùng.

Trước đây FetchEvent.request.url được dùng làm URL cuối cùng trong mọi trường hợp. Response.url được cung cấp thực tế bị bỏ qua.

Điều này có nghĩa là, ví dụ, nếu một service worker chặn stylesheet hoặc worker script, thì Response.url được cung cấp sẽ được dùng để giải quyết bất kỳ tải tài nguyên con @import hoặc importScripts() tương đối nào (Firefox bug 1222008).

Đối với hầu hết các loại yêu cầu mạng, thay đổi này không có tác động vì bạn không thể quan sát URL cuối cùng. Tuy nhiên có một số trường hợp quan trọng:

• Nếu fetch() bị chặn, bạn có thể quan sát URL cuối cùng trên Response.url của kết quả.
• Nếu script worker bị chặn, URL cuối cùng được dùng để đặt self.location và được dùng làm URL cơ sở cho các URL tương đối trong worker script.
• Nếu stylesheet bị chặn, URL cuối cùng được dùng làm URL cơ sở để giải quyết các tải @import tương đối.

Lưu ý rằng các yêu cầu điều hướng cho Windows và iframes KHÔNG dùng URL cuối cùng. Cách mà đặc tả HTML xử lý các chuyển hướng điều hướng dùng URL yêu cầu cho Window.location kết quả. Điều này có nghĩa là các trang web vẫn có thể cung cấp "chế độ xem thay thế" của trang web khi ngoại tuyến mà không thay đổi URL hiển thị cho người dùng.

Ví dụ

Sự kiện fetch này cố trả về phản hồi từ API bộ nhớ đệm, dùng mạng nếu không thành công.

addEventListener("fetch", (event) => {
  // Ngăn chặn mặc định và tự xử lý yêu cầu.
  event.respondWith(
    (async () => {
      // Cố lấy phản hồi từ bộ nhớ đệm.
      const cachedResponse = await caches.match(event.request);
      // Trả về nếu tìm thấy.
      if (cachedResponse) return cachedResponse;
      // Nếu không tìm thấy kết quả khớp trong bộ nhớ đệm, dùng mạng.
      return fetch(event.request);
    })(),
  );
});

Thông số kỹ thuật

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

Xem thêm

• Sử dụng Service Workers
• Fetch API