API là viết tắt của Application Programming Interface, là một tập hợp các hàm và các tài nguyên khác cung cấp cho các ứng dụng khả năng tương tác với nhau. API có thể được sử dụng để truy cập dữ liệu, thực hiện các tác vụ hoặc tương tác với các hệ thống khác.
Trong JavaScript, có nhiều cách để gọi API. Một cách phổ biến là sử dụng phương thức fetch() của đối tượng window. Phương thức fetch() cho phép bạn gửi các yêu cầu HTTP đến một API và nhận response.
Để gọi API bằng phương thức fetch(), bạn cần cung cấp URL của API endpoint, phương thức HTTP và các header và body tùy chọn. Ví dụ:
// Gọi API GET
fetch("https://api.example.com/users")
.then(function(response) {
// Xử lý response
})
.catch(function(error) {
// Xử lý lỗi
});
// Gọi API POST
fetch("https://api.example.com/users", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
"name": "John Doe",
"email": "johndoe@example.com"
})
})
.then(function(response) {
// Xử lý response
})
.catch(function(error) {
// Xử lý lỗi
});
Khi fetch() hoàn thành, nó sẽ trả về một đối tượng Response. Bạn có thể sử dụng đối tượng này để truy cập body, status code và các thông tin khác của response.
Để xử lý response, bạn có thể sử dụng phương thức then() của đối tượng Response. Phương thức then() cho phép bạn đăng ký một callback sẽ được gọi khi response được hoàn thành. Callback này sẽ nhận được đối tượng Response làm tham số.
Ví dụ:
fetch("https://api.example.com/users")
.then(function(response) {
// Xử lý response
if (response.status === 200) {
// Response thành công
const users = JSON.parse(response.body);
console.log(users);
} else {
// Response thất bại
console.log("Response thất bại");
}
})
.catch(function(error) {
// Xử lý lỗi
console.log(error);
});
Trong ví dụ này, chúng ta sử dụng phương thức then() để đăng ký một callback sẽ được gọi khi response được hoàn thành. Callback này sẽ kiểm tra status code của response. Nếu status code là 200, tức là response thành công. Chúng ta sẽ parse body của response thành object JSON và in ra console. Nếu status code khác 200, tức là response thất bại. Chúng ta sẽ in ra console thông báo “Response thất bại”.
Ngoài phương thức fetch(), bạn cũng có thể sử dụng các thư viện JavaScript khác để gọi API. Một số thư viện phổ biến bao gồm:
- Axios
- XMLHttpRequest
- Fetch API
Xử lý lỗi API
Khi gọi API, có thể xảy ra lỗi. Ví dụ, lỗi có thể xảy ra do kết nối mạng bị lỗi, API không khả dụng hoặc dữ liệu được trả về không hợp lệ.
Để xử lý lỗi API, bạn có thể sử dụng phương thức catch() của đối tượng Response. Phương thức catch() sẽ được gọi khi xảy ra lỗi. Bạn có thể sử dụng callback của phương thức catch() để xử lý lỗi.
Ví dụ:
fetch("https://api.example.com/users")
.then(function(response) {
// Xử lý response
})
.catch(function(error) {
// Xử lý lỗi
console.log(error);
});
Trong ví dụ này, chúng ta sử dụng phương thức catch() để đăng ký một callback sẽ được gọi khi xảy ra lỗi. Callback này sẽ in ra console thông tin lỗi.
Kết luận
Trong bài viết này, chúng ta đã tìm hiểu cách gọi API và xử lý cơ bản API trong JavaScript. Bạn có thể sử dụng các kiến thức này để gọi API từ ứng dụng JavaScript của mình.
