Các nhà phát triển thường phải truy xuất dữ liệu từ API của riêng họ hoặc API của bên thứ ba. Bài viết này nói về cách sử dụng API tìm nạp của trình duyệt của bạn để NHẬN một số dữ liệu từ một điểm cuối.
API Tìm nạp là gì?
API tìm nạp là một giao diện cho phép chúng tôi thực hiện các Yêu cầu HTTP tới máy chủ từ trình duyệt web như Chrome hoặc Firefox. Yêu cầu GET truy cập vào một điểm cuối trên máy chủ, sau đó trả về phản hồi với dữ liệu từ điểm cuối đó để bạn có thể đọc nó.
Các loại yêu cầu
Yêu cầu GET HTTP chỉ là một loại yêu cầu bạn có thể thực hiện đối với máy chủ. Các loại yêu cầu khác là POST, PUT và DELETE. Những yêu cầu này làm cho một ứng dụng CRUD. Đó là nơi chúng ta có thể Tạo (ĐĂNG), Đọc (GET), Cập nhật (PUT) và Hủy (XÓA) dữ liệu trong cơ sở dữ liệu của mình.
Ngoài ra, chúng tôi có thể đạt được điểm cuối trên API của bên thứ ba. Tùy thuộc vào API, bạn sẽ chỉ được phép thực hiện một số yêu cầu nhất định, chủ yếu là để giữ cho dữ liệu của chúng không thay đổi, vì vậy bạn sẽ không thể thực hiện những yêu cầu thao túng dữ liệu đó, bạn sẽ chỉ có thể đọc nó.
API tìm nạp hoạt động như thế nào?
API tìm nạp sử dụng hệ thống giao tiếp dựa trên Promise. Xin nhắc lại, Promises là các hàm không đồng bộ đóng gói logic vào khối mã của nó và trả về một phản hồi xác định xem lời hứa đã được giải quyết hay bị từ chối.
Với tư cách là người dùng API tìm nạp, chúng tôi không cần thực sự viết logic lời hứa. Chúng tôi chỉ cần sử dụng nó để gửi một yêu cầu và API Tìm nạp trả về một lời hứa dưới mui xe. Đây là cú pháp cơ bản để chúng tôi có thể nhận được phản hồi:
promise.then (phản hồi) .then (json) .catch (lỗi);
Lời hứa là yêu cầu không đồng bộ thực tế. fetch() phương thức có sẵn trong phạm vi toàn cầu và được chuyển đến điểm cuối mà chúng tôi muốn thực hiện yêu cầu HTTP.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
let promise = fetch("https://swapi.dev/api/films/1"); Sau khi yêu cầu, chúng tôi có thể sử dụng cú pháp hứa với then và bắt hoặc sử dụng hàm async / await để nhận phản hồi của máy chủ.
Cú pháp lời hứa
promise.then(response => {
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ' +
response.status);
return;
}
response.json().then(data => {
console.log(data);
}).catch(error => {
console.log(error.message);
})
})
Ở đây chúng tôi thực hiện lời hứa sau đó chờ phản hồi. Khi chúng tôi nhận được phản hồi, nếu mã trạng thái khác 200, chúng tôi ghi mã lỗi vào bảng điều khiển của mình và chấm dứt chức năng.
Nếu không, để làm cho phản hồi có thể đọc được để trang web giao diện người dùng của chúng tôi có thể sử dụng nó, chúng tôi thay đổi nó thành đối tượng JavaScript Object Notation (JSON) với json() phương pháp. Chúng tôi muốn đánh giá điều này trước khi chuyển sang bước tiếp theo, vì vậy chúng tôi dựa trên một lời hứa với lời hứa trước đó.
Sau khi điều đó được đánh giá, chúng tôi có thể đăng nhập những gì đã được chuyển vào để xem nó trên bảng điều khiển của chúng tôi. Nếu bạn đang theo dõi, bạn sẽ nhận được một cái gì đó như sau:
{
title: 'A New Hope',
episode_id: 4,
opening_crawl: 'It is a period of civil war.\r\n' +
'Rebel spaceships, striking\r\n' +
'from a hidden base, have won\r\n' +
'their first victory against\r\n' +
'the evil Galactic Empire.\r\n' +
'\r\n' +
'During the battle, Rebel\r\n' +
'spies managed to steal secret\r\n' +
"plans to the Empire's\r\n" +
'ultimate weapon, the DEATH\r\n' +
'STAR, an armored space\r\n' +
'station with enough power\r\n' +
'to destroy an entire planet.\r\n' +
'\r\n' +
"Pursued by the Empire's\r\n" +
'sinister agents, Princess\r\n' +
'Leia races home aboard her\r\n' +
'starship, custodian of the\r\n' +
'stolen plans that can save her\r\n' +
'people and restore\r\n' +
'freedom to the galaxy....',
director: 'George Lucas',
producer: 'Gary Kurtz, Rick McCallum',
release_date: '1977-05-25',
characters: [
'https://swapi.dev/api/people/1/',
'https://swapi.dev/api/people/2/',
'https://swapi.dev/api/people/3/',
'https://swapi.dev/api/people/4/',
'https://swapi.dev/api/people/5/',
'https://swapi.dev/api/people/6/',
'https://swapi.dev/api/people/7/',
'https://swapi.dev/api/people/8/',
'https://swapi.dev/api/people/9/',
'https://swapi.dev/api/people/10/',
'https://swapi.dev/api/people/12/',
'https://swapi.dev/api/people/13/',
'https://swapi.dev/api/people/14/',
'https://swapi.dev/api/people/15/',
'https://swapi.dev/api/people/16/',
'https://swapi.dev/api/people/18/',
'https://swapi.dev/api/people/19/',
'https://swapi.dev/api/people/81/'
],
planets: [
'https://swapi.dev/api/planets/1/',
'https://swapi.dev/api/planets/2/',
'https://swapi.dev/api/planets/3/'
],
starships: [
'https://swapi.dev/api/starships/2/',
'https://swapi.dev/api/starships/3/',
'https://swapi.dev/api/starships/5/',
'https://swapi.dev/api/starships/9/',
'https://swapi.dev/api/starships/10/',
'https://swapi.dev/api/starships/11/',
'https://swapi.dev/api/starships/12/',
'https://swapi.dev/api/starships/13/'
],
vehicles: [
'https://swapi.dev/api/vehicles/4/',
'https://swapi.dev/api/vehicles/6/',
'https://swapi.dev/api/vehicles/7/',
'https://swapi.dev/api/vehicles/8/'
],
species: [
'https://swapi.dev/api/species/1/',
'https://swapi.dev/api/species/2/',
'https://swapi.dev/api/species/3/',
'https://swapi.dev/api/species/4/',
'https://swapi.dev/api/species/5/'
],
created: '2014-12-10T14:23:31.880000Z',
edited: '2014-12-20T19:49:45.256000Z',
url: 'https://swapi.dev/api/films/1/'
} Nếu chúng tôi nhận được thông tin này trên giao diện người dùng, chúng tôi có thể sử dụng thông tin này để điền thẻ hoặc bảng hoặc tuy nhiên chúng tôi muốn hiển thị thông tin đó.
Không đồng bộ / Đang chờ
Chúng ta cũng có thể sử dụng hàm async / await để ghi lại kết quả tương tự.
let getRequest = async () => {
try {
let fetched = await fetch("https://swapi.dev/api/films/1");
if(fetched) {
let read = await fetched.json()
console.log(read);
return read;
}
}
catch (error) {
throw new Error(error.message);
}
}
getRequest()
async từ khóa cho chúng ta biết rằng một số phần của hàm đó sẽ không đồng bộ. Khi chúng ta đến từ khóa await, việc thực thi tập lệnh sẽ tạm dừng cho đến khi dòng mã đó được đánh giá.
Chúng tôi có hai await trong hàm này, có thể so sánh với hai câu lệnh then() tuyên bố chúng tôi đã có trong lôgic lời hứa. Một câu lệnh đợi quá trình tìm nạp xảy ra tại URL mà chúng tôi đã chuyển vào và câu lệnh kia đợi cho đến khi thông tin tìm nạp được phân tích cú pháp thành JSON. Chúng tôi sử dụng try/catch để nắm bắt bất kỳ lỗi nào mà chúng tôi có thể mắc phải nếu có điều gì đó bất thường xuất hiện từ các câu trả lời.
Ghi chú cuối cùng
Để API tìm nạp hoạt động trong môi trường nút (tức là nếu bạn đang sử dụng IDE như Mã Visual Studio), bạn sẽ cần phải yarn add hoặc npm install node-fetch , vì tìm nạp chỉ hoạt động trong môi trường trình duyệt.