Giới thiệu
Có một thời gian khi xmlhttpRequest đã được sử dụng để thực hiện các yêu cầu API. Nó không bao gồm những lời hứa, và nó không tạo ra mã JavaScript sạch. Sử dụng jQuery, bạn có thể sử dụng cú pháp Cleaner của jQuery.ajax [] .
Bây giờ, JavaScript có cách tích hợp riêng để thực hiện các yêu cầu API. Đây là API FETCH, một tiêu chuẩn mới để tạo các yêu cầu của máy chủ với những lời hứa, nhưng cũng bao gồm nhiều tính năng khác.
Trong hướng dẫn này, bạn sẽ tạo cả các yêu cầu GET và POST bằng API FETCH.
Điều kiện tiên quyết
Để hoàn thành hướng dẫn này, bạn sẽ cần như sau:
- Phiên bản mới nhất của nút được cài đặt trên máy của bạn. Để cài đặt Node trên MacOS, hãy làm theo các bước được nêu trong cách cài đặt Node.js và tạo môi trường phát triển cục bộ trên hướng dẫn MacOS.
- Một hiểu biết cơ bản về mã hóa trong JavaScript, mà bạn có thể tìm hiểu thêm về cách mã trong loạt JavaScript.
- Một sự hiểu biết về những lời hứa trong JavaScript. Đọc phần Lời hứa của bài viết này về vòng lặp sự kiện, gọi lại, hứa hẹn và async / đang chờ trong JavaScript.
Bước 1 - Bắt đầu với cú pháp API Fetch
Để sử dụng API tìm nạp, hãy gọi cho Fetch , chấp nhận URL của API dưới dạng tham số:
Fetch [URL]
sau fetch [] , bao gồm phương thức hứa hẹn sau đó [] : fetch[] method, include the promise method then[]:
.then [hàm [] { }]
Fetch [] Phương thức sẽ trả về một lời hứa. Nếu Promise trở lại là resolve, the function within the then[] method is executed. That function contains the code for handling the data received from the API.
bên dưới sau đó [] , bao gồm Bắt [] Phương pháp: then[] method, include the catch[] method:
.catch [hàm [] { }];
API bạn gọi bằng cách sử dụng fetch [] có thể bị hỏng hoặc các lỗi khác có thể xảy ra. Nếu điều này xảy ra, từ chối Promise sẽ được trả lại. Phương thức bắt được sử dụng để xử lý Từ chối . Mã trong bắt [] sẽ được thực thi nếu xảy ra lỗi khi gọi API của sự lựa chọn của bạn.
Để tóm tắt, sử dụng API FETCH sẽ trông như thế này:
Fetch [URL] .then [hàm [] { }] .catch [hàm [] { }];
Với sự hiểu biết về cú pháp để sử dụng API Fetch, giờ đây bạn có thể chuyển sang sử dụng Fetch [] trên một API thực. .fetch[] on a real API.
Bước 2 - Sử dụng Fetch để lấy dữ liệu từ API
Các mẫu mã sau đây sẽ dựa trên API người dùng ngẫu nhiên. Sử dụng API, bạn sẽ nhận được mười người dùng và hiển thị chúng trên trang bằng JavaScript vanilla.
Ý tưởng là lấy tất cả dữ liệu từ API người dùng ngẫu nhiên và hiển thị nó trong danh sách các mục bên trong danh sách của tác giả. Bắt đầu bằng cách tạo tệp HTML và thêm danh sách tiêu đề và không có thứ tự với id of authors:
Tác giả
Bây giờ thêm Script Thẻ ở dưới cùng của tệp HTML của bạn và sử dụng bộ chọn DOM để lấy ul . Sử dụng getEuityById Với Tác giả như là đối số. Hãy nhớ rằng, Tác giả là ID cho ul : script tags to the bottom of your HTML file and use a DOM selector to grab the ul. Use getElementById with authors as the argument. Remember, authors is the id for the previously created ul:
.
const ul = document.getelementById ['tác giả'];
Tạo một biến không đổi được gọi là url sẽ giữ URL API sẽ trả về mười người dùng ngẫu nhiên:
Const url = '//randomuser.me/api/?results=10';
Với ul và URL Tại chỗ, đã đến lúc Để tạo các chức năng sẽ được sử dụng để tạo các mục danh sách. Tạo một hàm có tên createenode có một tham số gọi là phần tử : .ul and url in place, its time to create the functions that will be used to create the list items. Create a function called createNode that takes a parameter called element:
chức năng createnode [phần tử] {
Không
Sau đó, khi createenode được gọi, bạn sẽ cần phải chuyển tên của một yếu tố HTML thực tế để tạo.
Trong hàm, thêm Trả về Câu lệnh trả về Phần tử Sử dụng document.createase [] : return statement that returns element using document.createElement[]:
chức năng createnode [phần tử] {
trả về tài liệu.createase [phần tử];
Không
Bạn cũng sẽ cần tạo một hàm có tên append có hai tham số: Cha mẹ và el : append that takes two parameters: parent and el:
Chức năng Nối [Cha mẹ, EL] {
Không
Chức năng này sẽ nối thêm el thành Cha mẹ Sử dụng < /a>document.createase : el to parent using document.createElement:
Chức năng Nối [Cha mẹ, EL] {
trả về cha mẹ.appendchild [el];
Không
Cả createenode và Nối đã sẵn sàng để đi. Bây giờ sử dụng API FETCH, hãy gọi API người dùng ngẫu nhiên bằng fetch[] with url as the argument:
Fetch [URL]
sau fetch [] , bao gồm phương thức hứa hẹn sau đó [] :
.then [hàm [] {
}]
Fetch [] Phương thức sẽ trả về một lời hứa. Nếu Promise trở lại là Giải quyết , chức năng trong thì [] Phương pháp được thực thi. Hàm đó chứa mã để xử lý dữ liệu nhận được từ API.
bên dưới sau đó [] , bao gồm Bắt [] Phương pháp:
.catch [hàm [] {
}]; json [] .
Thêm sau đó [] Phương thức sẽ chứa hàm có tham số có tên RESP : then[] method which will contain a function with a parameter called resp:
API bạn gọi bằng cách sử dụng
the resp Tham số lấy giá trị của đối tượng được trả về từ Fetch [URL] . Sử dụng JSON [] để chuyển đổi RESP thành dữ liệu JSON: < / a >.resp parameter takes the value of the object returned from fetch[url]. Use the json[] method to convert resp into JSON data:
Fetch [URL]
.then [[resp] => resp.json []]
Dữ liệu JSON vẫn cần phải được xử lý. Thêm một then[] statement with a function that has an argument called data:
.then [chức năng [dữ liệu] {
}]
}]
Trong chức năng này, tạo một biến có tên Tác giả được đặt bằng Data.Results < / a> : authors that is set equal to data.results:
.then [chức năng [dữ liệu] {
Hãy để các tác giả = data.results;
Đối với mỗi tác giả trong Tác giả , bạn sẽ muốn tạo một mục danh sách hiển thị hình ảnh của chúng và hiển thị tên của chúng. Bản đồ [] Phương pháp là tuyệt vời cho việc này:
Hãy để các tác giả = data.results;
Trả lại tác giả.map [chức năng [tác giả] {
}]
Trong Map , tạo biến có tên Li Điều đó sẽ được đặt bằng CreateNode với Li [phần tử HTML ] Như đối số: map function, create a variable called li that will be set equal to createNode with li [the HTML element] as the argument:
Trả lại tác giả.map [chức năng [tác giả] {
Đặt li = createenode ['li'];
}]
lặp lại điều này để tạo span phần tử và một img yếu tố: span element and an img element:
Đặt li = createenode ['li'];
Đặt img = createenode ['img'];
Đặt span = createenode ['span'];
API cung cấp tên cho tác giả và một hình ảnh đi cùng với tên. Đặt img.src Để ảnh tác giả:
Đặt img = createenode ['img'];
Đặt span = createenode ['span'];
IMG.SRC = Tác giả.Picture.medium;
the span phần tử phải chứa tên và tên thứ nhất của Tác giả . InnerHtml Nội suy thuộc tính và chuỗi sẽ cho phép bạn làm điều này: span element should contain the the first and last name of the author. The innerHTML property and string interpolation will allow you to do this:
IMG.SRC = Tác giả.Picture.medium;
span.innerhtml = `$ {Tác giả.name.first} $ {Tác giả.name.last}`;
Với phần tử hình ảnh và danh sách được tạo cùng với SPAN , bạn có thể sử dụng Nối Chức năng đã được tạo trước đây để hiển thị các yếu tố này trên trang: span element, you can use the append function that was previously created to display these elements on the page:
Nối [Li, IMG];
nối thêm [li, span];
nối thêm [ul, li];
với cả sau đó [] Các hàm đã hoàn tất, bây giờ bạn có thể thêm Bắt [] Chức năng. Hàm này sẽ ghi lại lỗi tiềm năng vào bảng điều khiển: then[] functions completed, you can now add the catch[] function. This function will log the potential error to the console:
.catch [chức năng [lỗi] {
Console.log [lỗi];
}];
Đây là mã đầy đủ của yêu cầu bạn đã tạo:
chức năng createnode [phần tử] {
trả về tài liệu.createase [phần tử];
Không
Chức năng Nối [Cha mẹ, EL] {
trả về cha mẹ.appendchild [el];
Không
const ul = document.getelementById ['tác giả'];
Const url = '//randomuser.me/api/?results=10';
Fetch [URL]
.then [[resp] => resp.json []]
.then [chức năng [dữ liệu] {
Hãy để các tác giả = data.results;
Trả lại tác giả.map [chức năng [tác giả] {
Đặt li = createenode ['li'];
Đặt img = createenode ['img'];
Đặt span = createenode ['span'];
IMG.SRC = Tác giả.Picture.medium;
span.innerhtml = `$ {Tác giả.name.first} $ {Tác giả.name.last}`;
Nối [Li, IMG];
nối thêm [li, span];
nối thêm [ul, li];
}]
}]
.catch [chức năng [lỗi] {
Console.log [lỗi];
}];
Bạn vừa thực hiện thành công yêu cầu nhận bằng API người dùng ngẫu nhiên và API tìm nạp. Trong bước tiếp theo, bạn sẽ học cách thực hiện các yêu cầu POST.
Bước 3 - Xử lý yêu cầu POST
Fetch Mặc định để nhận yêu cầu, nhưng bạn có thể sử dụng tất cả các loại yêu cầu khác, thay đổi tiêu đề và gửi dữ liệu. Để thực hiện việc này, bạn cần đặt đối tượng của mình và truyền nó dưới dạng đối số thứ hai của hàm tìm nạp.
Trước khi tạo một yêu cầu POST, hãy tạo dữ liệu bạn muốn gửi đến API. Đây sẽ là một đối tượng được gọi là data with the key name and value Sammy [or your name]:
Const url = '//randomuser.me/api';
Hãy để dữ liệu = {
Tên: 'Sammy'
Không
Đảm bảo bao gồm một biến không đổi chứa liên kết API người dùng ngẫu nhiên.
Vì đây là một yêu cầu POST, bạn sẽ cần phải nêu rõ ràng. Tạo một đối tượng được gọi là fetchdata :
Hãy để fetchdata = {
Không
Đối tượng này cần bao gồm ba phím: Phương thức , Cơ thể , và Tiêu đề . Phương thức Phím phải có giá trị 'bài' . Body Nên được đặt bằng Dữ liệu đối tượng đã được tạo. Tiêu đề Nên có giá trị Tiêu đề mới [] : .method, body, and headers. The method key should have the value 'POST'. body should be set equal to the data object that was just created. headers should have the value of new Headers[]:
Hãy để fetchdata = {
Phương pháp: 'bài',
Cơ thể: Dữ liệu,
Tiêu đề: Tiêu đề mới []
Không
Giao diện Giao diện là một thuộc tính của API Fetch, cho phép bạn thực hiện các hành động khác nhau trên yêu cầu HTTP và tiêu đề phản hồi. Nếu bạn muốn tìm hiểu thêm về điều này, bài viết này gọi là cách xác định các tuyến đường và phương thức yêu cầu HTTP trong Express có thể cung cấp cho bạn thêm thông tin.
Với mã này tại chỗ, yêu cầu POST có thể được thực hiện bằng API tìm nạp. Bạn sẽ bao gồm url and fetchData as arguments for your fetch POST request:
FETCH [URL, FETCHDATA]
Sau đó [] sẽ bao gồm mã xử lý phản hồi nhận được từ máy chủ API người dùng ngẫu nhiên:
FETCH [URL, FETCHDATA]
.then [hàm [] {
// xử lý phản hồi bạn nhận được từ máy chủ
}];
Để tạo một đối tượng và sử dụng Fetch [] , còn có một tùy chọn khác. Thay vì tạo một đối tượng như fetchdata , bạn có thể sử dụng trình xây dựng yêu cầu để tạo đối tượng yêu cầu của mình. Để thực hiện việc này, hãy tạo một biến có tên yêu cầu :
Const url = '//randomuser.me/api';
Hãy để dữ liệu = {
Tên: 'Sara'
Không
Yêu cầu var =.
the Yêu cầu Biến phải được đặt bằng Yêu cầu mới . Yêu cầu mới Xây dựng có hai đối số: URL API [ URL ] và một đối tượng. Đối tượng cũng nên bao gồm phương thức , Body và Tiêu đề Phím giống như FetchData : request variable should be set equal to new Request. The new Request construct takes two arguments: the API url [url] and an object. The object should also include the method, body, and headers keys just like fetchData:
Yêu cầu var = Yêu cầu mới [URL, {
Phương pháp: 'bài',
Cơ thể: Dữ liệu,
Tiêu đề: Tiêu đề mới []
}];
Bây giờ, Yêu cầu có thể được sử dụng làm đối số duy nhất cho Fetch [] Vì nó cũng bao gồm URL API: request can be used as the sole argument for fetch[] since it also includes the API url:
Fetch [yêu cầu]
.then [hàm [] {
// Xử lý phản hồi chúng ta nhận được từ API
}]
Hoàn toàn, mã của bạn sẽ trông như thế này:
Const url = '//randomuser.me/api';
Hãy để dữ liệu = {
Tên: 'Sara'
Không
Yêu cầu var = Yêu cầu mới [URL, {
Phương pháp: 'bài',
Cơ thể: Dữ liệu,
Tiêu đề: Tiêu đề mới []
}];
Fetch [yêu cầu]
.then [hàm [] {
// Xử lý phản hồi chúng ta nhận được từ API
}]
Bây giờ bạn đã biết hai phương thức để tạo và thực thi các yêu cầu POST với API Fetch.
Phần kết luận
Trong khi API Fetch chưa được tất cả các trình duyệt hỗ trợ, nó là một sự thay thế tuyệt vời cho XMLHttpRequest. Nếu bạn muốn tìm hiểu cách gọi API Web bằng phản ứng, hãy xem bài viết này về chủ đề này.
Video liên quan
Bây giờ thêm Script Thẻ ở dưới cùng của tệp HTML của bạn và sử dụng bộ chọn DOM để lấy ul . Sử dụng getEuityById Với Tác giả như là đối số. Hãy nhớ rằng, Tác giả là ID cho ul : script tags to the bottom of your HTML file and use a DOM selector to grab the ul. Use getElementById with authors as the argument. Remember, authors is the id for the previously created ul:
. const ul = document.getelementById ['tác giả'];
Tạo một biến không đổi được gọi là url sẽ giữ URL API sẽ trả về mười người dùng ngẫu nhiên:
Const url = '//randomuser.me/api/?results=10';
Với ul và URL Tại chỗ, đã đến lúc Để tạo các chức năng sẽ được sử dụng để tạo các mục danh sách. Tạo một hàm có tên createenode có một tham số gọi là phần tử : .ul and url in place, its time to create the functions that will be used to create the list items. Create a function called createNode that takes a parameter called element:
chức năng createnode [phần tử] { Không
Sau đó, khi createenode được gọi, bạn sẽ cần phải chuyển tên của một yếu tố HTML thực tế để tạo.
Trong hàm, thêm Trả về Câu lệnh trả về Phần tử Sử dụng document.createase [] : return statement that returns element using document.createElement[]:
chức năng createnode [phần tử] { trả về tài liệu.createase [phần tử]; Không
Bạn cũng sẽ cần tạo một hàm có tên append có hai tham số: Cha mẹ và el : append that takes two parameters: parent and el:
Chức năng Nối [Cha mẹ, EL] { Không
Chức năng này sẽ nối thêm el thành Cha mẹ Sử dụng < /a>document.createase : el to parent using document.createElement:
Chức năng Nối [Cha mẹ, EL] { trả về cha mẹ.appendchild [el]; Không
Cả createenode và Nối đã sẵn sàng để đi. Bây giờ sử dụng API FETCH, hãy gọi API người dùng ngẫu nhiên bằng fetch[] with url as the argument:
Fetch [URL]
sau fetch [] , bao gồm phương thức hứa hẹn sau đó [] : .then [hàm [] { }] Fetch [] Phương thức sẽ trả về một lời hứa. Nếu Promise trở lại là Giải quyết , chức năng trong thì [] Phương pháp được thực thi. Hàm đó chứa mã để xử lý dữ liệu nhận được từ API. bên dưới sau đó [] , bao gồm Bắt [] Phương pháp: .catch [hàm [] {
}]; json [] .
Thêm sau đó [] Phương thức sẽ chứa hàm có tham số có tên RESP : then[] method which will contain a function with a parameter called resp:
API bạn gọi bằng cách sử dụng
the resp Tham số lấy giá trị của đối tượng được trả về từ Fetch [URL] . Sử dụng JSON [] để chuyển đổi RESP thành dữ liệu JSON: < / a >.resp parameter takes the value of the object returned from fetch[url]. Use the json[] method to convert resp into JSON data:
Fetch [URL] .then [[resp] => resp.json []]
Dữ liệu JSON vẫn cần phải được xử lý. Thêm một then[] statement with a function that has an argument called data:
.then [chức năng [dữ liệu] { }] }]
Trong chức năng này, tạo một biến có tên Tác giả được đặt bằng Data.Results < / a> : authors that is set equal to data.results:
.then [chức năng [dữ liệu] { Hãy để các tác giả = data.results;
Đối với mỗi tác giả trong Tác giả , bạn sẽ muốn tạo một mục danh sách hiển thị hình ảnh của chúng và hiển thị tên của chúng. Bản đồ [] Phương pháp là tuyệt vời cho việc này:
Hãy để các tác giả = data.results; Trả lại tác giả.map [chức năng [tác giả] { }]
Trong Map , tạo biến có tên Li Điều đó sẽ được đặt bằng CreateNode với Li [phần tử HTML ] Như đối số: map function, create a variable called li that will be set equal to createNode with li [the HTML element] as the argument:
Trả lại tác giả.map [chức năng [tác giả] { Đặt li = createenode ['li']; }]
lặp lại điều này để tạo span phần tử và một img yếu tố: span element and an img element:
Đặt li = createenode ['li']; Đặt img = createenode ['img']; Đặt span = createenode ['span'];
API cung cấp tên cho tác giả và một hình ảnh đi cùng với tên. Đặt img.src Để ảnh tác giả:
Đặt img = createenode ['img']; Đặt span = createenode ['span']; IMG.SRC = Tác giả.Picture.medium;
the span phần tử phải chứa tên và tên thứ nhất của Tác giả . InnerHtml Nội suy thuộc tính và chuỗi sẽ cho phép bạn làm điều này: span element should contain the the first and last name of the author. The innerHTML property and string interpolation will allow you to do this:
IMG.SRC = Tác giả.Picture.medium; span.innerhtml = `$ {Tác giả.name.first} $ {Tác giả.name.last}`;
Với phần tử hình ảnh và danh sách được tạo cùng với SPAN , bạn có thể sử dụng Nối Chức năng đã được tạo trước đây để hiển thị các yếu tố này trên trang: span element, you can use the append function that was previously created to display these elements on the page:
Nối [Li, IMG]; nối thêm [li, span]; nối thêm [ul, li];
với cả sau đó [] Các hàm đã hoàn tất, bây giờ bạn có thể thêm Bắt [] Chức năng. Hàm này sẽ ghi lại lỗi tiềm năng vào bảng điều khiển: then[] functions completed, you can now add the catch[] function. This function will log the potential error to the console:
.catch [chức năng [lỗi] { Console.log [lỗi]; }];
Đây là mã đầy đủ của yêu cầu bạn đã tạo:
chức năng createnode [phần tử] { trả về tài liệu.createase [phần tử]; Không Chức năng Nối [Cha mẹ, EL] { trả về cha mẹ.appendchild [el]; Không const ul = document.getelementById ['tác giả']; Const url = '//randomuser.me/api/?results=10'; Fetch [URL] .then [[resp] => resp.json []] .then [chức năng [dữ liệu] { Hãy để các tác giả = data.results; Trả lại tác giả.map [chức năng [tác giả] { Đặt li = createenode ['li']; Đặt img = createenode ['img']; Đặt span = createenode ['span']; IMG.SRC = Tác giả.Picture.medium; span.innerhtml = `$ {Tác giả.name.first} $ {Tác giả.name.last}`; Nối [Li, IMG]; nối thêm [li, span]; nối thêm [ul, li]; }] }] .catch [chức năng [lỗi] { Console.log [lỗi]; }];
Bạn vừa thực hiện thành công yêu cầu nhận bằng API người dùng ngẫu nhiên và API tìm nạp. Trong bước tiếp theo, bạn sẽ học cách thực hiện các yêu cầu POST.
Bước 3 - Xử lý yêu cầu POST
Fetch Mặc định để nhận yêu cầu, nhưng bạn có thể sử dụng tất cả các loại yêu cầu khác, thay đổi tiêu đề và gửi dữ liệu. Để thực hiện việc này, bạn cần đặt đối tượng của mình và truyền nó dưới dạng đối số thứ hai của hàm tìm nạp.
Trước khi tạo một yêu cầu POST, hãy tạo dữ liệu bạn muốn gửi đến API. Đây sẽ là một đối tượng được gọi là data with the key name and value Sammy [or your name]:
Const url = '//randomuser.me/api'; Hãy để dữ liệu = { Tên: 'Sammy' Không
Đảm bảo bao gồm một biến không đổi chứa liên kết API người dùng ngẫu nhiên.
Vì đây là một yêu cầu POST, bạn sẽ cần phải nêu rõ ràng. Tạo một đối tượng được gọi là fetchdata :
Hãy để fetchdata = { Không
Đối tượng này cần bao gồm ba phím: Phương thức , Cơ thể , và Tiêu đề . Phương thức Phím phải có giá trị 'bài' . Body Nên được đặt bằng Dữ liệu đối tượng đã được tạo. Tiêu đề Nên có giá trị Tiêu đề mới [] : .method, body, and headers. The method key should have the value 'POST'. body should be set equal to the data object that was just created. headers should have the value of new Headers[]:
Hãy để fetchdata = { Phương pháp: 'bài', Cơ thể: Dữ liệu, Tiêu đề: Tiêu đề mới [] Không
Giao diện Giao diện là một thuộc tính của API Fetch, cho phép bạn thực hiện các hành động khác nhau trên yêu cầu HTTP và tiêu đề phản hồi. Nếu bạn muốn tìm hiểu thêm về điều này, bài viết này gọi là cách xác định các tuyến đường và phương thức yêu cầu HTTP trong Express có thể cung cấp cho bạn thêm thông tin.
Với mã này tại chỗ, yêu cầu POST có thể được thực hiện bằng API tìm nạp. Bạn sẽ bao gồm url and fetchData as arguments for your fetch POST request:
FETCH [URL, FETCHDATA]
Sau đó [] sẽ bao gồm mã xử lý phản hồi nhận được từ máy chủ API người dùng ngẫu nhiên:
FETCH [URL, FETCHDATA] .then [hàm [] { // xử lý phản hồi bạn nhận được từ máy chủ }];
Để tạo một đối tượng và sử dụng Fetch [] , còn có một tùy chọn khác. Thay vì tạo một đối tượng như fetchdata , bạn có thể sử dụng trình xây dựng yêu cầu để tạo đối tượng yêu cầu của mình. Để thực hiện việc này, hãy tạo một biến có tên yêu cầu :
Const url = '//randomuser.me/api'; Hãy để dữ liệu = { Tên: 'Sara' Không Yêu cầu var =.
the Yêu cầu Biến phải được đặt bằng Yêu cầu mới . Yêu cầu mới Xây dựng có hai đối số: URL API [ URL ] và một đối tượng. Đối tượng cũng nên bao gồm phương thức , Body và Tiêu đề Phím giống như FetchData : request variable should be set equal to new Request. The new Request construct takes two arguments: the API url [url] and an object. The object should also include the method, body, and headers keys just like fetchData:
Yêu cầu var = Yêu cầu mới [URL, { Phương pháp: 'bài', Cơ thể: Dữ liệu, Tiêu đề: Tiêu đề mới [] }];
Bây giờ, Yêu cầu có thể được sử dụng làm đối số duy nhất cho Fetch [] Vì nó cũng bao gồm URL API: request can be used as the sole argument for fetch[] since it also includes the API url:
Fetch [yêu cầu] .then [hàm [] { // Xử lý phản hồi chúng ta nhận được từ API }]
Hoàn toàn, mã của bạn sẽ trông như thế này:
Const url = '//randomuser.me/api'; Hãy để dữ liệu = { Tên: 'Sara' Không Yêu cầu var = Yêu cầu mới [URL, { Phương pháp: 'bài', Cơ thể: Dữ liệu, Tiêu đề: Tiêu đề mới [] }]; Fetch [yêu cầu] .then [hàm [] { // Xử lý phản hồi chúng ta nhận được từ API }]
Bây giờ bạn đã biết hai phương thức để tạo và thực thi các yêu cầu POST với API Fetch.
Phần kết luận
Trong khi API Fetch chưa được tất cả các trình duyệt hỗ trợ, nó là một sự thay thế tuyệt vời cho XMLHttpRequest. Nếu bạn muốn tìm hiểu cách gọi API Web bằng phản ứng, hãy xem bài viết này về chủ đề này.