Tóm tắt: Trong hướng dẫn này, bạn sẽ tìm hiểu về API tìm nạp JavaScript và cách sử dụng nó để thực hiện các yêu cầu HTTP không đồng bộ.: in this tutorial, you’ll learn about the JavaScript Fetch API and how to use it to make asynchronous HTTP requests.
API Fetch là giao diện hiện đại cho phép bạn thực hiện các yêu cầu HTTP cho các máy chủ từ trình duyệt web.
Nếu bạn đã làm việc với đối tượng
2 [Code language: JavaScript [javascript]
fetch[url] .then[response => { // handle the response }] .catch[error => { // handle the error }];
3], API tìm nạp có thể thực hiện tất cả các tác vụ như đối tượngCode language: JavaScript [javascript]
fetch[url] .then[response => { // handle the response }] .catch[error => { // handle the error }];
3.Code language: JavaScript [javascript]
fetch[url] .then[response => { // handle the response }] .catch[error => { // handle the error }];
Ngoài ra, API tìm nạp đơn giản và sạch hơn nhiều. Nó sử dụng
5 để cung cấp các tính năng linh hoạt hơn để thực hiện các yêu cầu cho các máy chủ từ trình duyệt web.Code language: JavaScript [javascript]
fetch[url] .then[response => { // handle the response }] .catch[error => { // handle the error }];
Phương pháp
6 có sẵn trong phạm vi toàn cầu hướng dẫn các trình duyệt web gửi yêu cầu đến URL.Code language: JavaScript [javascript]
fetch[url] .then[response => { // handle the response }] .catch[error => { // handle the error }];
Gửi một yêu cầu
6 chỉ yêu cầu một tham số là URL của tài nguyên mà bạn muốn tìm nạp:Code language: JavaScript [javascript]
fetch[url] .then[response => { // handle the response }] .catch[error => { // handle the error }];
Code language: JavaScript [javascript]
let response = fetch[url];
Phương thức
6 trả vềCode language: JavaScript [javascript]
fetch[url] .then[response => { // handle the response }] .catch[error => { // handle the error }];
5 để bạn có thể sử dụng các phương thứcCode language: JavaScript [javascript]
fetch[url] .then[response => { // handle the response }] .catch[error => { // handle the error }];
0 vàCode language: JavaScript [javascript]
fetch['/readme.txt'] .then[response => response.text[]] .then[data => console.log[data]];
1 để xử lý nó:Code language: JavaScript [javascript]
fetch['/readme.txt'] .then[response => response.text[]] .then[data => console.log[data]];
Code language: JavaScript [javascript]
fetch[url] .then[response => { // handle the response }] .catch[error => { // handle the error }];
Khi yêu cầu hoàn thành, tài nguyên có sẵn. Tại thời điểm này, lời hứa sẽ giải quyết thành một đối tượng
2.Code language: JavaScript [javascript]
fetch['/readme.txt'] .then[response => response.text[]] .then[data => console.log[data]];
Đối tượng
2 là trình bao bọc API cho tài nguyên được tìm nạp. Đối tượngCode language: JavaScript [javascript]
fetch['/readme.txt'] .then[response => response.text[]] .then[data => console.log[data]];
2 có một số thuộc tính và phương pháp hữu ích để kiểm tra phản hồi.
fetch['/readme.txt'] .then[response => response.text[]] .then[data => console.log[data]];
Code language: JavaScript [javascript]
Đọc phản hồi
Nếu nội dung của phản hồi ở định dạng văn bản thô, bạn có thể sử dụng phương thức
5. Phương thứcCode language: JavaScript [javascript]
fetch['/readme.txt'] .then[response => response.text[]] .then[data => console.log[data]];
5 trả về mộtCode language: JavaScript [javascript]
fetch['/readme.txt'] .then[response => response.text[]] .then[data => console.log[data]];
5 giải quyết với các nội dung hoàn chỉnh của tài nguyên được tìm nạp:Code language: JavaScript [javascript]
fetch[url] .then[response => { // handle the response }] .catch[error => { // handle the error }];
Code language: JavaScript [javascript]
fetch['/readme.txt'] .then[response => response.text[]] .then[data => console.log[data]];
Trong thực tế, bạn thường sử dụng ________ 28/________ 29 với phương pháp
6 như thế này:Code language: JavaScript [javascript]
fetch[url] .then[response => { // handle the response }] .catch[error => { // handle the error }];
Code language: JavaScript [javascript]
async function fetchText[] { let response = await fetch['/readme.txt']; let data = await response.text[]; console.log[data]; }
Bên cạnh phương pháp
5, đối tượngCode language: JavaScript [javascript]
fetch['/readme.txt'] .then[response => response.text[]] .then[data => console.log[data]];
2 còn có các phương pháp khác nhưCode language: JavaScript [javascript]
fetch['/readme.txt'] .then[response => response.text[]] .then[data => console.log[data]];
3,Code language: JavaScript [javascript]
async function fetchText[] { let response = await fetch['/readme.txt']; let data = await response.text[]; console.log[data]; }
4,Code language: JavaScript [javascript]
async function fetchText[] { let response = await fetch['/readme.txt']; let data = await response.text[]; console.log[data]; }
5 vàCode language: JavaScript [javascript]
async function fetchText[] { let response = await fetch['/readme.txt']; let data = await response.text[]; console.log[data]; }
6 để xử lý loại dữ liệu tương ứng.Code language: JavaScript [javascript]
async function fetchText[] { let response = await fetch['/readme.txt']; let data = await response.text[]; console.log[data]; }
Xử lý các mã trạng thái của phản hồi
Đối tượng
2 cung cấp mã trạng thái và văn bản trạng thái thông qua các thuộc tínhCode language: JavaScript [javascript]
fetch['/readme.txt'] .then[response => response.text[]] .then[data => console.log[data]];
8 vàCode language: JavaScript [javascript]
async function fetchText[] { let response = await fetch['/readme.txt']; let data = await response.text[]; console.log[data]; }
9. Khi một yêu cầu thành công, mã trạng thái làCode language: JavaScript [javascript]
async function fetchText[] { let response = await fetch['/readme.txt']; let data = await response.text[]; console.log[data]; }
0 và văn bản trạng thái làCode language: JavaScript [javascript]
async function fetchText[] { let response = await fetch['/readme.txt']; console.log[response.status]; // 200 console.log[response.statusText]; // OK if [response.status === 200] { let data = await response.text[]; // handle data } } fetchText[];
1:Code language: JavaScript [javascript]
async function fetchText[] { let response = await fetch['/readme.txt']; console.log[response.status]; // 200 console.log[response.statusText]; // OK if [response.status === 200] { let data = await response.text[]; // handle data } } fetchText[];
async function fetchText[] { let response = await fetch['/readme.txt']; console.log[response.status]; // 200 console.log[response.statusText]; // OK if [response.status === 200] { let data = await response.text[]; // handle data } } fetchText[];
Code language: JavaScript [javascript]
Output:
Code language: JavaScript [javascript]
200 OK
Nếu tài nguyên được yêu cầu không tồn tại, mã phản hồi là
2:Code language: JavaScript [javascript]
async function fetchText[] { let response = await fetch['/readme.txt']; console.log[response.status]; // 200 console.log[response.statusText]; // OK if [response.status === 200] { let data = await response.text[]; // handle data } } fetchText[];
Code language: JavaScript [javascript]
let response = await fetch['/non-existence.txt']; console.log[response.status]; // 400 console.log[response.statusText]; // Not Found
Output:
Code language: JavaScript [javascript]
400 Not Found
Nếu URL được yêu cầu ném lỗi máy chủ, mã phản hồi sẽ là
3.Code language: JavaScript [javascript]
async function fetchText[] { let response = await fetch['/readme.txt']; console.log[response.status]; // 200 console.log[response.statusText]; // OK if [response.status === 200] { let data = await response.text[]; // handle data } } fetchText[];
Nếu URL được yêu cầu được chuyển hướng đến phần mới với phản hồi
4,Code language: JavaScript [javascript]
async function fetchText[] { let response = await fetch['/readme.txt']; console.log[response.status]; // 200 console.log[response.statusText]; // OK if [response.status === 200] { let data = await response.text[]; // handle data } } fetchText[];
8 của đối tượngCode language: JavaScript [javascript]
async function fetchText[] { let response = await fetch['/readme.txt']; let data = await response.text[]; console.log[data]; }
2 được đặt thànhCode language: JavaScript [javascript]
fetch['/readme.txt'] .then[response => response.text[]] .then[data => console.log[data]];
0. Ngoài ra thuộc tínhCode language: JavaScript [javascript]
async function fetchText[] { let response = await fetch['/readme.txt']; console.log[response.status]; // 200 console.log[response.statusText]; // OK if [response.status === 200] { let data = await response.text[]; // handle data } } fetchText[];
8 được đặt thànhCode language: JavaScript [javascript]
async function fetchText[] { let response = await fetch['/readme.txt']; console.log[response.status]; // 200 console.log[response.statusText]; // OK if [response.status === 200] { let data = await response.text[]; // handle data } } fetchText[];
9.Code language: JavaScript [javascript]
async function fetchText[] { let response = await fetch['/readme.txt']; console.log[response.status]; // 200 console.log[response.statusText]; // OK if [response.status === 200] { let data = await response.text[]; // handle data } } fetchText[];
6 trả về một lời hứa từ chối khi xảy ra lỗi thực sự như thời gian chờ trình duyệt web, mất kết nối mạng và vi phạm CORS.Code language: JavaScript [javascript]
fetch[url] .then[response => { // handle the response }] .catch[error => { // handle the error }];
Ví dụ API tìm nạp JavaScript
Giả sử rằng bạn có một tệp JSON định vị trên máy chủ web với các nội dung sau:
Code language: JSON / JSON with Comments [json]
[{ "username": "john", "firstName": "John", "lastName": "Doe", "gender": "Male", "profileURL": "img/male.png", "email": "" }, { "username": "jane", "firstName": "Jane", "lastName": "Doe", "gender": "Female", "profileURL": "img/female.png", "email": "" } ]
Những điều sau đây cho thấy trang HTML:
Code language: HTML, XML [xml]
Fetch API Demo
Trong
1, chúng tôi sẽ sử dụng phương thức
200 OK
Code language: JavaScript [javascript]
6 để lấy dữ liệu người dùng và hiển thị dữ liệu bên trong phần tửCode language: JavaScript [javascript]
fetch[url] .then[response => { // handle the response }] .catch[error => { // handle the error }];
3 với lớpCode language: JavaScript [javascript]
200 OK
4.Code language: JavaScript [javascript]
200 OK
Đầu tiên, khai báo chức năng
5 lấyCode language: JavaScript [javascript]
200 OK
6 từ máy chủ.Code language: JavaScript [javascript]
200 OK
0Code language: JavaScript [javascript]
fetch[url] .then[response => { // handle the response }] .catch[error => { // handle the error }];
Sau đó, phát triển chức năng
7 hiển thị dữ liệu người dùng:Code language: JavaScript [javascript]
200 OK
1Code language: JavaScript [javascript]
fetch[url] .then[response => { // handle the response }] .catch[error => { // handle the error }];
Kiểm tra bản demo API tìm nạp.
Bản tóm tắt
- 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
6 để trả về một lời hứa giải quyết thành đối tượng
Code language: JavaScript [javascript]fetch[url] .then[response => { // handle the response }] .catch[error => { // handle the error }];
2. Để 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ụ:
Code language: JavaScript [javascript]fetch['/readme.txt'] .then[response => response.text[]] .then[data => console.log[data]];
5 hoặc
Code language: JavaScript [javascript]fetch['/readme.txt'] .then[response => response.text[]] .then[data => console.log[data]];
3. Các phương pháp này giải quyết vào dữ liệu thực tế.
Code language: JavaScript [javascript]async function fetchText[] { let response = await fetch['/readme.txt']; let data = await response.text[]; console.log[data]; }
- Sử dụng các thuộc tính
8 và
Code language: JavaScript [javascript]async function fetchText[] { let response = await fetch['/readme.txt']; let data = await response.text[]; console.log[data]; }
9 của đối tượng
Code language: JavaScript [javascript]async function fetchText[] { let response = await fetch['/readme.txt']; let data = await response.text[]; console.log[data]; }
2 để có được văn bản trạng thái và trạng thái của phản hồi.
Code language: JavaScript [javascript]fetch['/readme.txt'] .then[response => response.text[]] .then[data => console.log[data]];
- Sử dụng phương thức
1 hoặc câu lệnh
Code language: JavaScript [javascript]fetch['/readme.txt'] .then[response => response.text[]] .then[data => console.log[data]];
6 để xử lý yêu cầu thất bại.
Code language: JavaScript [javascript]let response = await fetch['/non-existence.txt']; console.log[response.status]; // 400 console.log[response.statusText]; // Not Found
Hướng dẫn này có hữu ích không?