Trong bài viết này, chúng tôi trình bày cách tạo các yêu cầu HTTP GET và POST trong JavaScript. Chúng tôi sử dụng Fetch API và thư viện Axios
Giao thức truyền tải siêu văn bản [HTTP] là một giao thức ứng dụng cho các hệ thống thông tin siêu phương tiện, cộng tác, phân tán. Giao thức HTTP là nền tảng giao tiếp dữ liệu cho World Wide Web
Phương thức HTTP GET yêu cầu biểu diễn tài nguyên đã chỉ định. Yêu cầu sử dụng GET chỉ nên truy xuất dữ liệu
Phương thức HTTP POST gửi dữ liệu đến máy chủ. Nó thường được sử dụng khi tải lên một tệp hoặc khi gửi một biểu mẫu web đã hoàn thành
API tìm nạp
Fetch API cung cấp giao diện JavaScript để truy cập và thao tác các phần của đường dẫn HTTP, chẳng hạn như yêu cầu và phản hồi. API bắt nguồn từ trình duyệt
2 là một hàm toàn cầu nhận các tham số url và tùy chọn và trả về một lời hứa. Lời hứa giải quyết phản hồi của yêu cầu
let promise = fetch[url, [options]]
Nếu chúng tôi không cung cấp
3, một yêu cầu GET đơn giản tải xuống nội dung của url sẽ được tạo
Axios là ứng dụng khách HTTP dựa trên lời hứa cho trình duyệt và Node. js. Axios giúp dễ dàng gửi các yêu cầu HTTP không đồng bộ đến các điểm cuối REST và thực hiện các thao tác CRUD. Nó có thể được sử dụng trong JavaScript đơn giản hoặc với một thư viện như Vue hoặc React
JS lấy yêu cầu NHẬN
Ví dụ sau tạo một yêu cầu GET đơn giản và xử lý kết quả dưới dạng văn bản
Chúng tôi nhận được nội dung của mã web. trang web của tôi
let url = '//webcode.me'; let res = await fetch[url];
Phương thức
2 chỉ lấy URL làm tham số. Trong trường hợp như vậy, yêu cầu mặc định là yêu cầu GET
let text = await res.text[];
Chúng tôi nhận được nội dung từ yêu cầu dưới dạng văn bản thuần túy
Trong ví dụ tiếp theo, chúng tôi tạo một yêu cầu POST với dữ liệu JSON
Yêu cầu POST được gửi tới http. //httpbin. tổ chức/bài đăng
________số 8_______Đây là dữ liệu được gửi
Quảng cáolet res = await fetch[url, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify[data], }];
Chúng tôi đặt tham số
5 thành POST và chọn
6 cho loại nội dung. Dữ liệu được xâu chuỗi thành tham số
7
let ret = await res.json[]; return JSON.parse[ret.data];
Chúng tôi lấy lại dữ liệu dưới dạng chuỗi JSON và phân tích nó thành đối tượng JSON
JS NHẬN yêu cầu với Axios
Ví dụ sau tạo một yêu cầu GET với thư viện Axios
$ npm i axios
Chúng tôi cài đặt mô-đun Axios
const axios = require['axios']; async function doGetRequest[] { let res = await axios.get['//webcode.me']; let data = res.data; console.log[data]; } doGetRequest[];
Ví dụ lấy một trang chủ từ một trang web đơn giản. Nó sử dụng cú pháp
8
JS POST yêu cầu với Axios
Trong ví dụ sau, chúng tôi tạo một yêu cầu POST với dữ liệu biểu mẫu
0
Chúng tôi cài đặt mô-đun
9
Với ứng dụng/x-www-form-urlencoded, dữ liệu được gửi trong phần thân của yêu cầu;
Một nhiệm vụ rất phổ biến khác trong các trang web và ứng dụng hiện đại là truy xuất các mục dữ liệu riêng lẻ từ máy chủ để cập nhật các phần của trang web mà không phải tải toàn bộ trang mới. Chi tiết có vẻ nhỏ này lại có tác động rất lớn đến hiệu suất và hành vi của các trang web, vì vậy, trong bài viết này, chúng tôi sẽ giải thích khái niệm này và xem xét các công nghệ giúp điều đó trở nên khả thi. cụ thể là API tìm nạp
điều kiện tiên quyết. Kiến thức cơ bản về JavaScript [xem các bước đầu tiên, khối xây dựng, đối tượng JavaScript], kiến thức cơ bản về Client-side APIsObjective. Để tìm hiểu cách lấy dữ liệu từ máy chủ và sử dụng nó để cập nhật nội dung của trang webMột trang web bao gồm một trang HTML và [thường] nhiều tệp khác, chẳng hạn như biểu định kiểu, tập lệnh và hình ảnh. Mô hình tải trang cơ bản trên Web là trình duyệt của bạn thực hiện một hoặc nhiều yêu cầu HTTP tới máy chủ để cung cấp các tệp cần thiết để hiển thị trang và máy chủ sẽ phản hồi với các tệp được yêu cầu. Nếu bạn truy cập một trang khác, trình duyệt sẽ yêu cầu các tệp mới và máy chủ sẽ phản hồi với chúng
Mô hình này hoạt động hoàn toàn tốt cho nhiều trang web. Nhưng hãy xem xét một trang web rất dựa trên dữ liệu. Ví dụ: một trang web thư viện như Thư viện Công cộng Vancouver. Trong số những thứ khác, bạn có thể coi một trang web như thế này là giao diện người dùng với cơ sở dữ liệu. Nó có thể cho phép bạn tìm kiếm một thể loại sách cụ thể hoặc có thể hiển thị cho bạn các đề xuất cho những cuốn sách bạn có thể thích, dựa trên những cuốn sách bạn đã mượn trước đây. Khi bạn làm điều này, nó cần cập nhật trang với bộ sách mới để hiển thị. Nhưng lưu ý rằng hầu hết nội dung trang — bao gồm các mục như đầu trang, thanh bên và chân trang — vẫn giữ nguyên
Rắc rối với mô hình truyền thống ở đây là chúng tôi phải tìm nạp và tải toàn bộ trang, ngay cả khi chúng tôi chỉ cần cập nhật một phần của nó. Điều này không hiệu quả và có thể dẫn đến trải nghiệm người dùng kém
Vì vậy, thay vì mô hình truyền thống, nhiều trang web sử dụng API JavaScript để yêu cầu dữ liệu từ máy chủ và cập nhật nội dung trang mà không cần tải trang. Vì vậy, khi người dùng tìm kiếm một sản phẩm mới, trình duyệt chỉ yêu cầu dữ liệu cần thiết để cập nhật trang - chẳng hạn như bộ sách mới để hiển thị
API chính ở đây là Fetch API. Điều này cho phép JavaScript chạy trong một trang để thực hiện yêu cầu HTTP tới máy chủ để truy xuất các tài nguyên cụ thể. Khi máy chủ cung cấp chúng, JavaScript có thể sử dụng dữ liệu để cập nhật trang, thường bằng cách sử dụng API thao tác DOM. Dữ liệu được yêu cầu thường là JSON, đây là định dạng tốt để truyền dữ liệu có cấu trúc, nhưng cũng có thể là HTML hoặc chỉ văn bản
Đây là mẫu phổ biến cho các trang web dựa trên dữ liệu như Amazon, YouTube, eBay, v.v. Với mô hình này
- Cập nhật trang nhanh hơn rất nhiều và bạn không phải đợi trang làm mới, nghĩa là trang web sẽ nhanh hơn và phản hồi nhanh hơn
- Ít dữ liệu được tải xuống trên mỗi bản cập nhật, nghĩa là ít lãng phí băng thông hơn. Đây có thể không phải là vấn đề lớn trên máy tính để bàn có kết nối băng thông rộng nhưng lại là vấn đề lớn trên thiết bị di động và ở các quốc gia không có dịch vụ internet nhanh phổ biến
Ghi chú. Trong những ngày đầu, kỹ thuật chung này được gọi là JavaScript và XML không đồng bộ [Ajax], bởi vì nó có xu hướng yêu cầu dữ liệu XML. Ngày nay, điều này thường không xảy ra [bạn có nhiều khả năng yêu cầu JSON hơn], nhưng kết quả vẫn như vậy và thuật ngữ "Ajax" vẫn thường được sử dụng để mô tả kỹ thuật này
Để tăng tốc hơn nữa, một số trang web cũng lưu trữ nội dung và dữ liệu trên máy tính của người dùng khi chúng được yêu cầu lần đầu, nghĩa là trong các lần truy cập tiếp theo, họ sử dụng các phiên bản cục bộ thay vì tải xuống các bản sao mới mỗi khi trang được tải lần đầu. Nội dung chỉ được tải lại từ máy chủ khi nó đã được cập nhật
Hãy xem qua một vài ví dụ về Fetch API
Đối với ví dụ này, chúng tôi sẽ yêu cầu dữ liệu từ một số tệp văn bản khác nhau và sử dụng chúng để điền vào một khu vực nội dung
Loạt tệp này sẽ đóng vai trò là cơ sở dữ liệu giả mạo của chúng tôi; . Tuy nhiên, ở đây, chúng tôi muốn giữ cho nó đơn giản và tập trung vào phần phía máy khách của tài liệu này.
Để bắt đầu ví dụ này, hãy tạo một bản sao cục bộ của bắt đầu tìm nạp. html và bốn tệp văn bản — câu 1. txt, câu 2. txt, câu 3. txt và câu 4. txt — trong một thư mục mới trên máy tính của bạn. Trong ví dụ này, chúng tôi sẽ lấy một câu thơ khác của bài thơ [mà bạn có thể nhận ra rõ ràng] khi nó được chọn trong trình đơn thả xuống
Ngay bên trong phần tử , hãy thêm đoạn mã sau. Điều này lưu trữ các tham chiếu đến các phần tử
và
function updateDisplay[verse] {
}
0 và thêm một trình lắng nghe vào phần tử
để khi người dùng chọn một giá trị mới, giá trị mới sẽ được chuyển đến hàm có tên function updateDisplay[verse] {
}
2 dưới dạng tham sốconst verseChoose = document.querySelector['select'];
const poemDisplay = document.querySelector['pre'];
verseChoose.addEventListener['change', [] => {
const verse = verseChoose.value;
updateDisplay[verse];
}];
Hãy định nghĩa hàm
function updateDisplay[verse] {
}
2 của chúng ta. Trước hết, hãy đặt đoạn mã sau bên dưới khối mã trước đó của bạn — đây là phần vỏ trống của hàmfunction updateDisplay[verse] {
}
Chúng tôi sẽ bắt đầu chức năng của mình bằng cách xây dựng một URL tương đối trỏ tới tệp văn bản mà chúng tôi muốn tải, vì chúng tôi sẽ cần nó sau này. Giá trị của phần tử tại bất kỳ thời điểm nào cũng giống như văn bản bên trong
function updateDisplay[verse] {
}
5 đã chọn [trừ khi bạn chỉ định một giá trị khác trong thuộc tính giá trị] — ví dụ: "Verse 1". Tệp văn bản câu thơ tương ứng là "câu1. txt" và nằm trong cùng thư mục với tệp HTML, do đó chỉ cần đặt tên tệp là đủTuy nhiên, các máy chủ web có xu hướng phân biệt chữ hoa chữ thường và tên tệp không có khoảng trắng trong đó. Để chuyển đổi "Verse 1" thành "verse1. txt", chúng ta cần chuyển đổi 'V' thành chữ thường, xóa khoảng trắng và thêm ". txt" ở cuối. Điều này có thể được thực hiện với
function updateDisplay[verse] {
}
6, function updateDisplay[verse] {
}
7 và mẫu chữ. Thêm các dòng sau vào hàm function updateDisplay[verse] {
}
2 của bạnverse = verse.replace[' ', ''].toLowerCase[];
const url = `${verse}.txt`;
Cuối cùng, chúng ta đã sẵn sàng sử dụng Fetch API
// Call `fetch[]`, passing in the URL.
fetch[url]
// fetch[] returns a promise. When we have received a response from the server,
// the promise's `then[]` handler is called with the response.
.then[[response] => {
// Our handler throws an error if the request did not succeed.
if [!response.ok] {
throw new Error[`HTTP error: ${response.status}`];
}
// Otherwise [if the response succeeded], our handler fetches the response
// as text by calling response.text[], and immediately returns the promise
// returned by `response.text[]`.
return response.text[];
}]
// When response.text[] has succeeded, the `then[]` handler is called with
// the text, and we copy it into the `poemDisplay` box.
.then[[text] => poemDisplay.textContent = text]
// Catch any errors that might happen, and display a message
// in the `poemDisplay` box.
.catch[[error] => poemDisplay.textContent = `Could not fetch verse: ${error}`];
Có khá nhiều thứ để giải nén ở đây
Đầu tiên, điểm vào của Fetch API là một hàm toàn cục có tên là
function updateDisplay[verse] {
}
9, lấy URL làm tham số [hàm này lấy một tham số tùy chọn khác cho cài đặt tùy chỉnh, nhưng chúng tôi không sử dụng tham số đó ở đây]Tiếp theo,
function updateDisplay[verse] {
}
9 là một API không đồng bộ trả về một verse = verse.replace[' ', ''].toLowerCase[];
const url = `${verse}.txt`;
1. Nếu bạn không biết đó là gì, hãy đọc mô-đun về JavaScript không đồng bộ và đặc biệt là bài viết về lời hứa, sau đó quay lại đây. Bạn sẽ thấy bài viết đó cũng nói về API function updateDisplay[verse] {
}
9Vì vậy, bởi vì
function updateDisplay[verse] {
}
9 trả về một lời hứa, chúng tôi chuyển một hàm vào phương thức verse = verse.replace[' ', ''].toLowerCase[];
const url = `${verse}.txt`;
4 của lời hứa được trả lại. Phương thức này sẽ được gọi khi yêu cầu HTTP đã nhận được phản hồi từ máy chủ. Trong trình xử lý, chúng tôi kiểm tra xem yêu cầu đã thành công chưa và đưa ra lỗi nếu không. Mặt khác, chúng tôi gọi verse = verse.replace[' ', ''].toLowerCase[];
const url = `${verse}.txt`;
5, để lấy nội dung phản hồi dưới dạng văn bảnHóa ra
verse = verse.replace[' ', ''].toLowerCase[];
const url = `${verse}.txt`;
5 cũng không đồng bộ, vì vậy chúng tôi trả lại lời hứa mà nó trả về và chuyển một hàm vào phương thức verse = verse.replace[' ', ''].toLowerCase[];
const url = `${verse}.txt`;
4 của lời hứa mới này. Hàm này sẽ được gọi khi văn bản phản hồi đã sẵn sàng và bên trong nó, chúng tôi sẽ cập nhật khối function updateDisplay[verse] {
}
0 của mình bằng văn bảnCuối cùng, chúng tôi xâu chuỗi một trình xử lý
verse = verse.replace[' ', ''].toLowerCase[];
const url = `${verse}.txt`;
9 ở cuối, để bắt bất kỳ lỗi nào được đưa ra trong một trong các hàm không đồng bộ mà chúng tôi đã gọi hoặc trình xử lý của chúngMột vấn đề với ví dụ hiện tại là nó sẽ không hiển thị bất kỳ bài thơ nào khi tải lần đầu. Để khắc phục điều này, hãy thêm hai dòng sau vào cuối mã của bạn [ngay phía trên thẻ đóng
// Call `fetch[]`, passing in the URL.
fetch[url]
// fetch[] returns a promise. When we have received a response from the server,
// the promise's `then[]` handler is called with the response.
.then[[response] => {
// Our handler throws an error if the request did not succeed.
if [!response.ok] {
throw new Error[`HTTP error: ${response.status}`];
}
// Otherwise [if the response succeeded], our handler fetches the response
// as text by calling response.text[], and immediately returns the promise
// returned by `response.text[]`.
return response.text[];
}]
// When response.text[] has succeeded, the `then[]` handler is called with
// the text, and we copy it into the `poemDisplay` box.
.then[[text] => poemDisplay.textContent = text]
// Catch any errors that might happen, and display a message
// in the `poemDisplay` box.
.catch[[error] => poemDisplay.textContent = `Could not fetch verse: ${error}`];
0] để tải câu 1 theo mặc định và đảm bảo rằng phần tử
luôn hiển thị đúng giá trịupdateDisplay['Verse 1'];
verseChoose.value = 'Verse 1';
Phục vụ ví dụ của bạn từ một máy chủ
Các trình duyệt hiện đại sẽ không chạy các yêu cầu HTTP nếu bạn chỉ chạy ví dụ từ tệp cục bộ. Điều này là do các hạn chế về bảo mật [để biết thêm về bảo mật web, hãy đọc Bảo mật trang web]
Để giải quyết vấn đề này, chúng ta cần kiểm tra ví dụ bằng cách chạy nó thông qua máy chủ web cục bộ. Để tìm hiểu cách thực hiện việc này, hãy đọc hướng dẫn của chúng tôi để thiết lập máy chủ thử nghiệm cục bộ
Trong ví dụ này, chúng tôi đã tạo một trang web mẫu có tên The Can Store — đó là một siêu thị hư cấu chỉ bán đồ hộp. Bạn có thể tìm thấy ví dụ này trực tiếp trên GitHub và xem mã nguồn
Theo mặc định, trang web hiển thị tất cả các sản phẩm nhưng bạn có thể sử dụng các điều khiển biểu mẫu ở cột bên trái để lọc chúng theo danh mục hoặc cụm từ tìm kiếm hoặc cả hai
Có khá nhiều mã phức tạp xử lý việc lọc sản phẩm theo danh mục và cụm từ tìm kiếm, thao tác chuỗi để dữ liệu hiển thị chính xác trong giao diện người dùng, v.v. Chúng tôi sẽ không thảo luận tất cả về nó trong bài viết, nhưng bạn có thể tìm thấy các nhận xét mở rộng trong mã [xem can-script. js]
Tuy nhiên, chúng tôi sẽ giải thích về Fetch code
Có thể tìm thấy khối đầu tiên sử dụng Tìm nạp khi bắt đầu JavaScript
fetch['products.json']
.then[[response] => {
if [!response.ok] {
throw new Error[`HTTP error: ${response.status}`];
}
return response.json[];
}]
.then[[json] => initialize[json]]
.catch[[err] => console.error[`Fetch problem: ${err.message}`]];
Hàm
function updateDisplay[verse] {
}
9 trả về một lời hứa. Nếu điều này hoàn thành thành công, chức năng bên trong khối // Call `fetch[]`, passing in the URL.
fetch[url]
// fetch[] returns a promise. When we have received a response from the server,
// the promise's `then[]` handler is called with the response.
.then[[response] => {
// Our handler throws an error if the request did not succeed.
if [!response.ok] {
throw new Error[`HTTP error: ${response.status}`];
}
// Otherwise [if the response succeeded], our handler fetches the response
// as text by calling response.text[], and immediately returns the promise
// returned by `response.text[]`.
return response.text[];
}]
// When response.text[] has succeeded, the `then[]` handler is called with
// the text, and we copy it into the `poemDisplay` box.
.then[[text] => poemDisplay.textContent = text]
// Catch any errors that might happen, and display a message
// in the `poemDisplay` box.
.catch[[error] => poemDisplay.textContent = `Could not fetch verse: ${error}`];
3 đầu tiên chứa // Call `fetch[]`, passing in the URL.
fetch[url]
// fetch[] returns a promise. When we have received a response from the server,
// the promise's `then[]` handler is called with the response.
.then[[response] => {
// Our handler throws an error if the request did not succeed.
if [!response.ok] {
throw new Error[`HTTP error: ${response.status}`];
}
// Otherwise [if the response succeeded], our handler fetches the response
// as text by calling response.text[], and immediately returns the promise
// returned by `response.text[]`.
return response.text[];
}]
// When response.text[] has succeeded, the `then[]` handler is called with
// the text, and we copy it into the `poemDisplay` box.
.then[[text] => poemDisplay.textContent = text]
// Catch any errors that might happen, and display a message
// in the `poemDisplay` box.
.catch[[error] => poemDisplay.textContent = `Could not fetch verse: ${error}`];
4 được trả về từ mạngBên trong chức năng này, chúng tôi
- kiểm tra xem máy chủ có trả về lỗi không [chẳng hạn như
5]. Nếu nó đã làm, chúng tôi ném lỗi// Call `fetch[]`, passing in the URL. fetch[url] // fetch[] returns a promise. When we have received a response from the server, // the promise's `then[]` handler is called with the response. .then[[response] => { // Our handler throws an error if the request did not succeed. if [!response.ok] { throw new Error[`HTTP error: ${response.status}`]; } // Otherwise [if the response succeeded], our handler fetches the response // as text by calling response.text[], and immediately returns the promise // returned by `response.text[]`. return response.text[]; }] // When response.text[] has succeeded, the `then[]` handler is called with // the text, and we copy it into the `poemDisplay` box. .then[[text] => poemDisplay.textContent = text] // Catch any errors that might happen, and display a message // in the `poemDisplay` box. .catch[[error] => poemDisplay.textContent = `Could not fetch verse: ${error}`];
- gọi
6 khi có phản hồi. Điều này sẽ lấy dữ liệu dưới dạng đối tượng JSON. Chúng tôi trả lại lời hứa được trả lại bởi// Call `fetch[]`, passing in the URL. fetch[url] // fetch[] returns a promise. When we have received a response from the server, // the promise's `then[]` handler is called with the response. .then[[response] => { // Our handler throws an error if the request did not succeed. if [!response.ok] { throw new Error[`HTTP error: ${response.status}`]; } // Otherwise [if the response succeeded], our handler fetches the response // as text by calling response.text[], and immediately returns the promise // returned by `response.text[]`. return response.text[]; }] // When response.text[] has succeeded, the `then[]` handler is called with // the text, and we copy it into the `poemDisplay` box. .then[[text] => poemDisplay.textContent = text] // Catch any errors that might happen, and display a message // in the `poemDisplay` box. .catch[[error] => poemDisplay.textContent = `Could not fetch verse: ${error}`];
7// Call `fetch[]`, passing in the URL. fetch[url] // fetch[] returns a promise. When we have received a response from the server, // the promise's `then[]` handler is called with the response. .then[[response] => { // Our handler throws an error if the request did not succeed. if [!response.ok] { throw new Error[`HTTP error: ${response.status}`]; } // Otherwise [if the response succeeded], our handler fetches the response // as text by calling response.text[], and immediately returns the promise // returned by `response.text[]`. return response.text[]; }] // When response.text[] has succeeded, the `then[]` handler is called with // the text, and we copy it into the `poemDisplay` box. .then[[text] => poemDisplay.textContent = text] // Catch any errors that might happen, and display a message // in the `poemDisplay` box. .catch[[error] => poemDisplay.textContent = `Could not fetch verse: ${error}`];
Tiếp theo, chúng tôi chuyển một hàm vào phương thức
verse = verse.replace[' ', ''].toLowerCase[];
const url = `${verse}.txt`;
4 của lời hứa được trả lại đó. Hàm này sẽ được truyền một đối tượng chứa dữ liệu phản hồi dưới dạng JSON mà chúng ta truyền vào hàm // Call `fetch[]`, passing in the URL.
fetch[url]
// fetch[] returns a promise. When we have received a response from the server,
// the promise's `then[]` handler is called with the response.
.then[[response] => {
// Our handler throws an error if the request did not succeed.
if [!response.ok] {
throw new Error[`HTTP error: ${response.status}`];
}
// Otherwise [if the response succeeded], our handler fetches the response
// as text by calling response.text[], and immediately returns the promise
// returned by `response.text[]`.
return response.text[];
}]
// When response.text[] has succeeded, the `then[]` handler is called with
// the text, and we copy it into the `poemDisplay` box.
.then[[text] => poemDisplay.textContent = text]
// Catch any errors that might happen, and display a message
// in the `poemDisplay` box.
.catch[[error] => poemDisplay.textContent = `Could not fetch verse: ${error}`];
9. Chức năng này bắt đầu quá trình hiển thị tất cả các sản phẩm trong giao diện người dùngĐể xử lý lỗi, chúng tôi xâu chuỗi một khối
updateDisplay['Verse 1'];
verseChoose.value = 'Verse 1';
0 vào cuối chuỗi. Điều này chạy nếu lời hứa thất bại vì một số lý do. Bên trong nó, chúng ta bao gồm một hàm được truyền dưới dạng tham số, một đối tượng updateDisplay['Verse 1'];
verseChoose.value = 'Verse 1';
1. Đối tượng updateDisplay['Verse 1'];
verseChoose.value = 'Verse 1';
1 này có thể được sử dụng để báo cáo bản chất của lỗi đã xảy ra, trong trường hợp này, chúng tôi thực hiện điều đó với một updateDisplay['Verse 1'];
verseChoose.value = 'Verse 1';
3 đơn giảnTuy nhiên, một trang web hoàn chỉnh sẽ xử lý lỗi này nhẹ nhàng hơn bằng cách hiển thị thông báo trên màn hình của người dùng và có thể cung cấp các tùy chọn để khắc phục tình huống, nhưng chúng tôi không cần gì hơn là một
updateDisplay['Verse 1'];
verseChoose.value = 'Verse 1';
4 đơn giảnBạn có thể tự kiểm tra trường hợp thất bại
- Tạo một bản sao cục bộ của các tệp ví dụ
- Chạy mã thông qua máy chủ web [như được mô tả ở trên, trong ]
- Sửa đổi đường dẫn đến tệp đang được tìm nạp, thành một cái gì đó như 'product. json' [đảm bảo rằng nó bị viết sai chính tả]
- Bây giờ hãy tải tệp chỉ mục trong trình duyệt của bạn [thông qua
5] và tìm trong bảng điều khiển dành cho nhà phát triển trình duyệt của bạn. Bạn sẽ thấy một thông báo tương tự như "Tìm nạp vấn đề. Lỗi HTTP. 404"updateDisplay['Verse 1']; verseChoose.value = 'Verse 1';
Khối Fetch thứ hai có thể được tìm thấy bên trong hàm
updateDisplay['Verse 1'];
verseChoose.value = 'Verse 1';
6fetch[url]
.then[[response] => {
if [!response.ok] {
throw new Error[`HTTP error: ${response.status}`];
}
return response.blob[];
}]
.then[[blob] => showProduct[blob, product]]
.catch[[err] => console.error[`Fetch problem: ${err.message}`]];
Điều này hoạt động theo cách tương tự như cách trước, ngoại trừ việc thay vì sử dụng
// Call `fetch[]`, passing in the URL.
fetch[url]
// fetch[] returns a promise. When we have received a response from the server,
// the promise's `then[]` handler is called with the response.
.then[[response] => {
// Our handler throws an error if the request did not succeed.
if [!response.ok] {
throw new Error[`HTTP error: ${response.status}`];
}
// Otherwise [if the response succeeded], our handler fetches the response
// as text by calling response.text[], and immediately returns the promise
// returned by `response.text[]`.
return response.text[];
}]
// When response.text[] has succeeded, the `then[]` handler is called with
// the text, and we copy it into the `poemDisplay` box.
.then[[text] => poemDisplay.textContent = text]
// Catch any errors that might happen, and display a message
// in the `poemDisplay` box.
.catch[[error] => poemDisplay.textContent = `Could not fetch verse: ${error}`];
6, chúng tôi sử dụng updateDisplay['Verse 1'];
verseChoose.value = 'Verse 1';
8. Trong trường hợp này, chúng tôi muốn trả về phản hồi của mình dưới dạng tệp hình ảnh và định dạng dữ liệu chúng tôi sử dụng cho đó là Blob [thuật ngữ này là từ viết tắt của "Đối tượng lớn nhị phân" và về cơ bản có thể được sử dụng để biểu thị các đối tượng giống như tệp lớn, chẳng hạn Khi chúng tôi đã nhận thành công blob của mình, chúng tôi chuyển nó vào hàm
updateDisplay['Verse 1'];
verseChoose.value = 'Verse 1';
9 của mình, hàm này sẽ hiển thị nóĐôi khi, đặc biệt là trong mã cũ hơn, bạn sẽ thấy một API khác có tên là
fetch['products.json']
.then[[response] => {
if [!response.ok] {
throw new Error[`HTTP error: ${response.status}`];
}
return response.json[];
}]
.then[[json] => initialize[json]]
.catch[[err] => console.error[`Fetch problem: ${err.message}`]];
0 [thường được viết tắt là "XHR"] được sử dụng để thực hiện các yêu cầu HTTP. Tìm nạp trước này và thực sự là API đầu tiên được sử dụng rộng rãi để triển khai AJAX. Chúng tôi khuyên bạn nên sử dụng Tìm nạp nếu có thể. đó là một API đơn giản hơn và có nhiều tính năng hơn fetch['products.json']
.then[[response] => {
if [!response.ok] {
throw new Error[`HTTP error: ${response.status}`];
}
return response.json[];
}]
.then[[json] => initialize[json]]
.catch[[err] => console.error[`Fetch problem: ${err.message}`]];
0. Chúng tôi sẽ không đi qua một ví dụ sử dụng fetch['products.json']
.then[[response] => {
if [!response.ok] {
throw new Error[`HTTP error: ${response.status}`];
}
return response.json[];
}]
.then[[json] => initialize[json]]
.catch[[err] => console.error[`Fetch problem: ${err.message}`]];
0, nhưng chúng tôi sẽ cho bạn thấy phiên bản fetch['products.json']
.then[[response] => {
if [!response.ok] {
throw new Error[`HTTP error: ${response.status}`];
}
return response.json[];
}]
.then[[json] => initialize[json]]
.catch[[err] => console.error[`Fetch problem: ${err.message}`]];
0 của yêu cầu lưu trữ lon đầu tiên của chúng tôi trông như thế nàoconst request = new XMLHttpRequest[];
try {
request.open['GET', 'products.json'];
request.responseType = 'json';
request.addEventListener['load', [] => initialize[request.response]];
request.addEventListener['error', [] => console.error['XHR error']];
request.send[];
} catch [error] {
console.error[`XHR error ${request.status}`];
}
Có năm giai đoạn này
- Tạo một đối tượng
0 mớifetch['products.json'] .then[[response] => { if [!response.ok] { throw new Error[`HTTP error: ${response.status}`]; } return response.json[]; }] .then[[json] => initialize[json]] .catch[[err] => console.error[`Fetch problem: ${err.message}`]];
- Gọi phương thức
5 của nó để khởi tạo nófetch['products.json'] .then[[response] => { if [!response.ok] { throw new Error[`HTTP error: ${response.status}`]; } return response.json[]; }] .then[[json] => initialize[json]] .catch[[err] => console.error[`Fetch problem: ${err.message}`]];
- Thêm một trình lắng nghe sự kiện vào sự kiện
6 của nó, sự kiện này sẽ kích hoạt khi phản hồi hoàn tất thành công. Trong trình nghe, chúng tôi gọifetch['products.json'] .then[[response] => { if [!response.ok] { throw new Error[`HTTP error: ${response.status}`]; } return response.json[]; }] .then[[json] => initialize[json]] .catch[[err] => console.error[`Fetch problem: ${err.message}`]];
9 với dữ liệu// Call `fetch[]`, passing in the URL. fetch[url] // fetch[] returns a promise. When we have received a response from the server, // the promise's `then[]` handler is called with the response. .then[[response] => { // Our handler throws an error if the request did not succeed. if [!response.ok] { throw new Error[`HTTP error: ${response.status}`]; } // Otherwise [if the response succeeded], our handler fetches the response // as text by calling response.text[], and immediately returns the promise // returned by `response.text[]`. return response.text[]; }] // When response.text[] has succeeded, the `then[]` handler is called with // the text, and we copy it into the `poemDisplay` box. .then[[text] => poemDisplay.textContent = text] // Catch any errors that might happen, and display a message // in the `poemDisplay` box. .catch[[error] => poemDisplay.textContent = `Could not fetch verse: ${error}`];
- Thêm một trình lắng nghe sự kiện vào sự kiện
8 của nó, sự kiện này kích hoạt khi yêu cầu gặp lỗifetch['products.json'] .then[[response] => { if [!response.ok] { throw new Error[`HTTP error: ${response.status}`]; } return response.json[]; }] .then[[json] => initialize[json]] .catch[[err] => console.error[`Fetch problem: ${err.message}`]];
- Gửi yêu cầu
Chúng tôi cũng phải cố gắng hết sức. bắt khối, để xử lý bất kỳ lỗi nào do
fetch['products.json']
.then[[response] => {
if [!response.ok] {
throw new Error[`HTTP error: ${response.status}`];
}
return response.json[];
}]
.then[[json] => initialize[json]]
.catch[[err] => console.error[`Fetch problem: ${err.message}`]];
5 hoặc fetch[url]
.then[[response] => {
if [!response.ok] {
throw new Error[`HTTP error: ${response.status}`];
}
return response.blob[];
}]
.then[[blob] => showProduct[blob, product]]
.catch[[err] => console.error[`Fetch problem: ${err.message}`]];
0 đưa raHy vọng rằng bạn nghĩ Fetch API là một cải tiến về điều này. Đặc biệt, hãy xem cách chúng tôi phải xử lý lỗi ở hai nơi khác nhau
Bài viết này hướng dẫn cách bắt đầu làm việc với Fetch để tìm nạp dữ liệu từ máy chủ
Tuy nhiên, có rất nhiều chủ đề khác nhau được thảo luận trong bài viết này, điều này chỉ thực sự làm trầy xước bề mặt. Để biết thêm chi tiết về các chủ đề này, hãy thử các bài viết sau