Hướng dẫn is fetch available in javascript? - tìm nạp có sẵn trong javascript không?

Question

Phương pháp toàn cầu fetch() bắt đầu quá trình tìm nạp tài nguyên từ mạng, trả lại một lời hứa được thực hiện sau khi phản hồi có sẵn.fetch() method starts the process of fetching a resource from the network, returning a promise which is fulfilled once the response is available.

Nội dung chính Show

Thông số
Giá trị trả về
Ngoại lệ
Thông số kỹ thuật
Tính tương thích của trình duyệt web
Fetch có đi kèm với JavaScript không?
Làm thế nào để tìm nạp dữ liệu trong JavaScript?
Có sẵn có sẵn trong trình duyệt không?
Là tìm nạp được tích hợp vào nút js?

Lời hứa giải quyết đối tượng Response đại diện cho phản hồi cho yêu cầu của bạn.

Lời hứa fetch() chỉ từ chối khi gặp lỗi mạng (thường là khi có vấn đề về quyền hoặc tương tự). Một lời hứa fetch() không từ chối các lỗi HTTP (404, v.v.). Thay vào đó, một trình xử lý

const myImage = document.querySelector('img');

const myRequest = new Request('flowers.jpg');

fetch(myRequest)
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    return response.blob();
  })
  .then((response) => {
    myImage.src = URL.createObjectURL(response);
  });

0 phải kiểm tra các thuộc tính

const myImage = document.querySelector('img');

const myRequest = new Request('flowers.jpg');

fetch(myRequest)
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    return response.blob();
  })
  .then((response) => {
    myImage.src = URL.createObjectURL(response);
  });

1 và/hoặc

const myImage = document.querySelector('img');

const myRequest = new Request('flowers.jpg');

fetch(myRequest)
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    return response.blob();
  })
  .then((response) => {
    myImage.src = URL.createObjectURL(response);
  });

2.

const myImage = document.querySelector('img');

const myRequest = new Request('flowers.jpg');

fetch(myRequest)
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    return response.blob();
  })
  .then((response) => {
    myImage.src = URL.createObjectURL(response);
  });

3 được triển khai bởi cả

const myImage = document.querySelector('img');

const myRequest = new Request('flowers.jpg');

fetch(myRequest)
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    return response.blob();
  })
  .then((response) => {
    myImage.src = URL.createObjectURL(response);
  });

4 và

const myImage = document.querySelector('img');

const myRequest = new Request('flowers.jpg');

fetch(myRequest)
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    return response.blob();
  })
  .then((response) => {
    myImage.src = URL.createObjectURL(response);
  });

5, điều đó có nghĩa là phương pháp fetch() có sẵn trong hầu hết mọi bối cảnh mà bạn có thể muốn tìm nạp tài nguyên.

Phương pháp fetch() được kiểm soát bởi chỉ thị của chính sách bảo mật nội dung

const myImage = document.querySelector('img');

const myRequest = new Request('flowers.jpg');

fetch(myRequest)
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    return response.blob();
  })
  .then((response) => {
    myImage.src = URL.createObjectURL(response);
  });

8 thay vì chỉ thị của các tài nguyên mà nó đang truy xuất.

LƯU Ý: Các tham số của phương thức fetch() giống hệt với các hàm xây dựng

const myImage = document.querySelector('img');

const myHeaders = new Headers();
myHeaders.append('Accept', 'image/jpeg');

const myInit = {
  method: 'GET',
  headers: myHeaders,
  mode: 'cors',
  cache: 'default',
};

const myRequest = new Request('flowers.jpg');

fetch(myRequest, myInit)
  .then((response) => {
    // …
  });

0. The fetch() method's parameters are identical to those of the

const myImage = document.querySelector('img');

const myHeaders = new Headers();
myHeaders.append('Accept', 'image/jpeg');

const myInit = {
  method: 'GET',
  headers: myHeaders,
  mode: 'cors',
  cache: 'default',
};

const myRequest = new Request('flowers.jpg');

fetch(myRequest, myInit)
  .then((response) => {
    // …
  });

0 constructor.

Cú pháp

fetch(resource)
fetch(resource, options)

Thông số

const myImage = document.querySelector('img');

const myHeaders = new Headers();
myHeaders.append('Accept', 'image/jpeg');

const myInit = {
  method: 'GET',
  headers: myHeaders,
  mode: 'cors',
  cache: 'default',
};

const myRequest = new Request('flowers.jpg');

fetch(myRequest, myInit)
  .then((response) => {
    // …
  });

1

Điều này xác định tài nguyên mà bạn muốn tìm nạp. Điều này có thể là:

Một chuỗi hoặc bất kỳ đối tượng nào khác có trình biến đổi chuỗi - bao gồm đối tượng

const myImage = document.querySelector('img');

const myHeaders = new Headers();
myHeaders.append('Accept', 'image/jpeg');

const myInit = {
  method: 'GET',
  headers: myHeaders,
  mode: 'cors',
  cache: 'default',
};

const myRequest = new Request('flowers.jpg');

fetch(myRequest, myInit)
  .then((response) => {
    // …
  });

2 - cung cấp URL của tài nguyên bạn muốn tìm nạp.

Một đối tượng

const myImage = document.querySelector('img');

const myHeaders = new Headers();
myHeaders.append('Accept', 'image/jpeg');

const myInit = {
  method: 'GET',
  headers: myHeaders,
  mode: 'cors',
  cache: 'default',
};

const myRequest = new Request('flowers.jpg');

fetch(myRequest, myInit)
  .then((response) => {
    // …
  });

3.

const myImage = document.querySelector('img');

const myHeaders = new Headers();
myHeaders.append('Accept', 'image/jpeg');

const myInit = {
  method: 'GET',
  headers: myHeaders,
  mode: 'cors',
  cache: 'default',
};

const myRequest = new Request('flowers.jpg');

fetch(myRequest, myInit)
  .then((response) => {
    // …
  });

4 Tùy chọnOptional

Một đối tượng chứa bất kỳ cài đặt tùy chỉnh nào bạn muốn áp dụng cho yêu cầu. Các tùy chọn có thể là:

const myImage = document.querySelector('img');

const myHeaders = new Headers();
myHeaders.append('Accept', 'image/jpeg');

const myInit = {
  method: 'GET',
  headers: myHeaders,
  mode: 'cors',
  cache: 'default',
};

const myRequest = new Request('flowers.jpg');

fetch(myRequest, myInit)
  .then((response) => {
    // …
  });

5

Phương thức yêu cầu, ví dụ:

const myImage = document.querySelector('img');

const myHeaders = new Headers();
myHeaders.append('Accept', 'image/jpeg');

const myInit = {
  method: 'GET',
  headers: myHeaders,
  mode: 'cors',
  cache: 'default',
};

const myRequest = new Request('flowers.jpg');

fetch(myRequest, myInit)
  .then((response) => {
    // …
  });

6,

const myImage = document.querySelector('img');

const myHeaders = new Headers();
myHeaders.append('Accept', 'image/jpeg');

const myInit = {
  method: 'GET',
  headers: myHeaders,
  mode: 'cors',
  cache: 'default',
};

const myRequest = new Request('flowers.jpg');

fetch(myRequest, myInit)
  .then((response) => {
    // …
  });

7. Lưu ý rằng tiêu đề

const myImage = document.querySelector('img');

const myHeaders = new Headers();
myHeaders.append('Accept', 'image/jpeg');

const myInit = {
  method: 'GET',
  headers: myHeaders,
  mode: 'cors',
  cache: 'default',
};

const myRequest = new Request('flowers.jpg');

fetch(myRequest, myInit)
  .then((response) => {
    // …
  });

8 không được đặt trên các yêu cầu tìm nạp bằng phương pháp

const myImage = document.querySelector('img');

const myHeaders = new Headers();
myHeaders.append('Accept', 'image/jpeg');

const myInit = {
  method: 'GET',
  headers: myHeaders,
  mode: 'cors',
  cache: 'default',
};

const myRequest = new Request('flowers.jpg');

fetch(myRequest, myInit)
  .then((response) => {
    // …
  });

9 hoặc

const myImage = document.querySelector('img');

const myHeaders = new Headers();
myHeaders.append('Accept', 'image/jpeg');

const myInit = {
  method: 'GET',
  headers: myHeaders,
  mode: 'cors',
  cache: 'default',
};

const myRequest = new Request('flowers.jpg');

fetch(myRequest, myInit)
  .then((response) => {
    // …
  });

6. (Hành vi này đã được sửa chữa trong Firefox 65 - Xem Bug & NBSP; 1508661.)

Bất kỳ tiêu đề nào bạn muốn thêm vào yêu cầu của mình, chứa trong một đối tượng

const myRequest = new Request('flowers.jpg', myInit);

1 hoặc một đối tượng theo nghĩa đen với các giá trị

const myRequest = new Request('flowers.jpg', myInit);

2. Lưu ý rằng một số tên bị cấm.

const myRequest = new Request('flowers.jpg', myInit);

3

Bất kỳ cơ thể nào bạn muốn thêm vào yêu cầu của mình: Đây có thể là

const myRequest = new Request('flowers.jpg', myInit);

4,

const myRequest = new Request('flowers.jpg', myInit);

5,

const myRequest = new Request('flowers.jpg', myInit);

6,

const myRequest = new Request('flowers.jpg', myInit);

7,

const myRequest = new Request('flowers.jpg', myInit);

8,

const myRequest = new Request('flowers.jpg', myInit);

9, đối tượng chuỗi hoặc đối tượng theo nghĩa đen hoặc đối tượng

const myInit = {
  method: 'GET',
  headers: {
    'Accept': 'image/jpeg',
  },
  mode: 'cors',
  cache: 'default',
};

const myRequest = new Request('flowers.jpg', myInit);

0. Khả năng mới nhất này vẫn là thử nghiệm; Kiểm tra thông tin tương thích để xác minh bạn có thể sử dụng nó. Lưu ý rằng một yêu cầu sử dụng phương thức

const myImage = document.querySelector('img');

const myHeaders = new Headers();
myHeaders.append('Accept', 'image/jpeg');

const myInit = {
  method: 'GET',
  headers: myHeaders,
  mode: 'cors',
  cache: 'default',
};

const myRequest = new Request('flowers.jpg');

fetch(myRequest, myInit)
  .then((response) => {
    // …
  });

6 hoặc

const myImage = document.querySelector('img');

const myHeaders = new Headers();
myHeaders.append('Accept', 'image/jpeg');

const myInit = {
  method: 'GET',
  headers: myHeaders,
  mode: 'cors',
  cache: 'default',
};

const myRequest = new Request('flowers.jpg');

fetch(myRequest, myInit)
  .then((response) => {
    // …
  });

9 không thể có một cơ thể.

const myInit = {
  method: 'GET',
  headers: {
    'Accept': 'image/jpeg',
  },
  mode: 'cors',
  cache: 'default',
};

const myRequest = new Request('flowers.jpg', myInit);

3

Chế độ bạn muốn sử dụng cho yêu cầu, ví dụ:

const myInit = {
  method: 'GET',
  headers: {
    'Accept': 'image/jpeg',
  },
  mode: 'cors',
  cache: 'default',
};

const myRequest = new Request('flowers.jpg', myInit);

4,

const myInit = {
  method: 'GET',
  headers: {
    'Accept': 'image/jpeg',
  },
  mode: 'cors',
  cache: 'default',
};

const myRequest = new Request('flowers.jpg', myInit);

5 hoặc

const myInit = {
  method: 'GET',
  headers: {
    'Accept': 'image/jpeg',
  },
  mode: 'cors',
  cache: 'default',
};

const myRequest = new Request('flowers.jpg', myInit);

6.

const myInit = {
  method: 'GET',
  headers: {
    'Accept': 'image/jpeg',
  },
  mode: 'cors',
  cache: 'default',
};

const myRequest = new Request('flowers.jpg', myInit);

7

Kiểm soát những gì các trình duyệt làm với thông tin đăng nhập (cookie, mục xác thực HTTP và chứng chỉ máy khách TLS). Phải là một trong những chuỗi sau:

const myInit = {
  method: 'GET',
  headers: {
    'Accept': 'image/jpeg',
  },
  mode: 'cors',
  cache: 'default',
};

const myRequest = new Request('flowers.jpg', myInit);

8

Nói với các trình duyệt để loại trừ thông tin đăng nhập khỏi yêu cầu và bỏ qua bất kỳ thông tin đăng nhập nào được gửi lại trong phản hồi (ví dụ: bất kỳ tiêu đề

const myInit = {
  method: 'GET',
  headers: {
    'Accept': 'image/jpeg',
  },
  mode: 'cors',
  cache: 'default',
};

const myRequest = new Request('flowers.jpg', myInit);

9 nào).

const myInit = {
  method: 'GET',
  headers: {
    'Accept': 'image/jpeg',
  },
  mode: 'cors',
  cache: 'default',
};

const myRequest = new Request('flowers.jpg', myInit);

6

Nói với các trình duyệt bao gồm thông tin đăng nhập với các yêu cầu đối với các URL có nguồn gốc tương tự và sử dụng bất kỳ thông tin đăng nhập nào được gửi lại trong các câu trả lời từ các URL có nguồn gốc. Đây là giá trị mặc định.This is the default value.

fetch()1

Nói với các trình duyệt bao gồm thông tin đăng nhập trong cả hai yêu cầu có nguồn gốc cùng và chéo và luôn sử dụng bất kỳ thông tin đăng nhập nào được gửi lại trong các phản hồi.

Lưu ý: Thông tin đăng nhập có thể được bao gồm trong các yêu cầu đơn giản và "cuối cùng", nhưng không nên được đưa vào các yêu cầu Preflight CORS. Credentials may be included in simple and "final" cross-origin requests, but should not be included in CORS preflight requests.

fetch()2

Một chuỗi cho biết cách yêu cầu sẽ tương tác với bộ đệm HTTP của trình duyệt. Các giá trị có thể, fetch()3, fetch()4, fetch()5, fetch()6, fetch()7 và fetch()8, được ghi lại trong bài viết cho thuộc tính fetch()2 của đối tượng

const myImage = document.querySelector('img');

const myHeaders = new Headers();
myHeaders.append('Accept', 'image/jpeg');

const myInit = {
  method: 'GET',
  headers: myHeaders,
  mode: 'cors',
  cache: 'default',
};

const myRequest = new Request('flowers.jpg');

fetch(myRequest, myInit)
  .then((response) => {
    // …
  });

3.

Response1

Cách xử lý phản hồi Response1:

Response3: Tự động theo chuyển hướng. Trừ khi có quy định khác, chế độ chuyển hướng được đặt thành Response3.
Response5: Hủy bỏ với lỗi nếu xảy ra chuyển hướng.
Response6: Người gọi dự định xử lý phản hồi trong bối cảnh khác. Xem tiêu chuẩn tìm nạp whatwg để biết thêm thông tin.

Response7

Một chuỗi chỉ định trình giới thiệu của yêu cầu. Đây có thể là một url đồng nghĩa, Response8 hoặc một chuỗi trống.

Response9

Chỉ định chính sách giới thiệu để sử dụng cho yêu cầu. Có thể là một trong số fetch()0, fetch()1,

const myInit = {
  method: 'GET',
  headers: {
    'Accept': 'image/jpeg',
  },
  mode: 'cors',
  cache: 'default',
};

const myRequest = new Request('flowers.jpg', myInit);

6, fetch()3, fetch()4, fetch()5, fetch()6 hoặc fetch()7.

fetch()8

Chứa giá trị toàn vẹn của Subresource của yêu cầu (ví dụ: fetch()9).

fetch()0

Tùy chọn fetch()0 có thể được sử dụng để cho phép yêu cầu vượt qua trang. Lấy cờ fetch()0 là một sự thay thế cho API fetch()3.

fetch()4

Một thể hiện đối tượng fetch()5; Cho phép bạn giao tiếp với một yêu cầu tìm nạp và hủy bỏ nó nếu muốn thông qua fetch()6.

Giá trị trả về

Một fetch()7 giải quyết cho một đối tượng Response.

Ngoại lệ

fetch()9 4040

Yêu cầu đã bị hủy bỏ do một cuộc gọi đến phương thức fetch()6 4042.

4043

Có thể xảy ra vì những lý do sau:

Ví dụ

Trong ví dụ yêu cầu tìm nạp của chúng tôi (xem Yêu cầu tìm nạp trực tiếp), chúng tôi tạo một đối tượng

const myImage = document.querySelector('img');

const myHeaders = new Headers();
myHeaders.append('Accept', 'image/jpeg');

const myInit = {
  method: 'GET',
  headers: myHeaders,
  mode: 'cors',
  cache: 'default',
};

const myRequest = new Request('flowers.jpg');

fetch(myRequest, myInit)
  .then((response) => {
    // …
  });

3 mới bằng cách sử dụng hàm tạo có liên quan, sau đó tìm nạp nó bằng cách sử dụng cuộc gọi fetch(). Vì chúng tôi đang tìm nạp một hình ảnh, chúng tôi chạy 4046 trên phản hồi để cung cấp cho nó loại mime thích hợp để nó được xử lý đúng cách, sau đó tạo một url đối tượng của nó và hiển thị nó trong một phần tử 4047.

const myImage = document.querySelector('img');

const myRequest = new Request('flowers.jpg');

fetch(myRequest)
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    return response.blob();
  })
  .then((response) => {
    myImage.src = URL.createObjectURL(response);
  });

Trong lần tìm kiếm với Initing sau đó yêu cầu ví dụ (xem Fetch yêu cầu init Live), chúng tôi làm điều tương tự ngoại trừ việc chúng tôi chuyển trong một đối tượng 4048 khi chúng tôi gọi fetch():

const myImage = document.querySelector('img');

const myHeaders = new Headers();
myHeaders.append('Accept', 'image/jpeg');

const myInit = {
  method: 'GET',
  headers: myHeaders,
  mode: 'cors',
  cache: 'default',
};

const myRequest = new Request('flowers.jpg');

fetch(myRequest, myInit)
  .then((response) => {
    // …
  });

Bạn cũng có thể vượt qua đối tượng 4048 với hàm tạo

const myImage = document.querySelector('img');

const myHeaders = new Headers();
myHeaders.append('Accept', 'image/jpeg');

const myInit = {
  method: 'GET',
  headers: myHeaders,
  mode: 'cors',
  cache: 'default',
};

const myRequest = new Request('flowers.jpg');

fetch(myRequest, myInit)
  .then((response) => {
    // …
  });

3 để có được hiệu ứng tương tự:

const myRequest = new Request('flowers.jpg', myInit);

Bạn cũng có thể sử dụng một đối tượng theo nghĩa đen là

const myImage = document.querySelector('img');

const myRequest = new Request('flowers.jpg');

fetch(myRequest)
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    return response.blob();
  })
  .then((response) => {
    myImage.src = URL.createObjectURL(response);
  });

02 trong 4048.

const myInit = {
  method: 'GET',
  headers: {
    'Accept': 'image/jpeg',
  },
  mode: 'cors',
  cache: 'default',
};

const myRequest = new Request('flowers.jpg', myInit);

Thông số kỹ thuật

Sự chỉ rõ
Tìm nạp tiêu chuẩn # Fetch-method # fetch-method

Tính tương thích của trình duyệt web

Bảng BCD chỉ tải trong trình duyệt

Xem thêm

Fetch có đi kèm với JavaScript không?

Giới thiệu API tìm nạp mặc dù API tìm nạp đã xuất hiện trong một thời gian, nó đã không được đưa vào nút.JS Core do một số hạn chế.it hasn't been included in Node. js core due to some limitations.

Làm thế nào để tìm nạp dữ liệu trong JavaScript?

API tìm nạp cho phép bạn yêu cầu không đồng bộ cho tài nguyên.Sử dụng phương thức Fetch () để trả về một lời hứa giải quyết thành một đối tượng phản hồi.Để có được dữ liệu thực tế, bạn gọi một trong các phương thức của đối tượng phản hồi, ví dụ: văn bản () hoặc json ().Các phương pháp này giải quyết vào dữ liệu thực tế.Use the fetch() method to return a promise that resolves into a Response object. To get the actual data, you call one of the methods of the Response object e.g., text() or json() . These methods resolve into the actual data.

Có sẵn có sẵn trong trình duyệt không?

tìm về.cờ bật.2 Chỉ có sẵn trong Chrome và Opera trong Dịch vụ.Only available in Chrome and Opera within ServiceWorkers.

Là tìm nạp được tích hợp vào nút js?

Tìm nạp đến: Nút mới.Vào ngày 1 tháng 2 năm 2022, nút.JS Core Team đã hợp nhất một yêu cầu kéo và thêm API tìm nạp vào nút.JS.Mặc dù API này đã được sử dụng trong một thời gian dài, nhưng nó hầu như không được tích hợp vào nút.it is hardly integrated into Node.

programming javascript Fetch JavaScript fetch() Fetch API Fetch - npm Fetch() method Fetch API JS Fetch data Fetch POST

Hướng dẫn is fetch available in javascript? - tìm nạp có sẵn trong javascript không?

Cú pháp

Thông số

Giá trị trả về

Ngoại lệ

Ví dụ

Thông số kỹ thuật

Tính tương thích của trình duyệt web

Xem thêm

Fetch có đi kèm với JavaScript không?

Làm thế nào để tìm nạp dữ liệu trong JavaScript?

Có sẵn có sẵn trong trình duyệt không?

Là tìm nạp được tích hợp vào nút js?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội