5.1 Fetch API
Để thực hiện các yêu cầu HTTP trong JavaScript, thường được sử dụng hai thư viện: hàm tích hợp fetch và thư viện bên ngoài Axios. Cả hai đều cung cấp các khả năng mạnh mẽ và linh hoạt để tương tác với API và các nguồn tài nguyên web khác.
Fetch API — là cách tích hợp trong trình duyệt để thực hiện các yêu cầu HTTP. Nó dựa trên promises và cung cấp một cách tiếp cận hiện đại và linh hoạt để làm việc với các yêu cầu mạng.
Cú pháp một yêu cầu fetch đơn giản:
let promise = fetch(url, {method, headers,
body})
Những khái niệm chính của Fetch:
fetch(url, options): phương thức chính để thực hiện các yêu cầu HTTP- Trả về promise, được giải quyết trong đối tượng Response
Ví dụ về yêu cầu GET đơn giản sử dụng Fetch:
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => {
if (!response.ok) {
throw new Error('Lỗi mạng: nhận được phản hồi không chính xác từ máy chủ');
}
return response.json();
})
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Lỗi khi thực hiện yêu cầu: ', error);
});
Ví dụ về yêu cầu POST sử dụng Fetch:
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
title: 'foo',
body: 'bar',
userId: 1
})
})
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Lỗi khi thực hiện yêu cầu: ', error);
});
Cài đặt Fetch
Fetch API cho phép cấu hình các tham số khác nhau của yêu cầu thông qua đối tượng options, như phương thức, tiêu đề, nội dung yêu cầu và các thông số khác.
const options = {
method: 'GET', // hoặc 'POST', 'PUT', 'DELETE', v.v.
headers: {
'Content-Type': 'application/json'
},
// body: JSON.stringify(data) // sử dụng cho yêu cầu POST và PUT
};
fetch('https://jsonplaceholder.typicode.com/posts/1', options)
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Lỗi khi thực hiện yêu cầu: ', error));
5.2 Thư viện Axios
Axios — là một thư viện nổi tiếng để thực hiện các yêu cầu HTTP trong JavaScript. Nó cung cấp API tiện lợi và đa chức năng so với Fetch API tích hợp, và còn hỗ trợ nhiều tính năng bổ sung, như chuyển đổi JSON tự động, xử lý timeout, hủy bỏ yêu cầu, và hỗ trợ các trình duyệt cũ.
Cài đặt Axios
Axios có thể được cài đặt qua npm hoặc kết nối qua CDN.
Cài đặt qua npm:
npm install axios
Kết nối trong Node.js hoặc khi sử dụng trình biên dịch module (như Webpack):
// Cho CommonJS
const axios = require('axios');
// Cho ES6 modules
import axios from 'axios';
Kết nối qua CDN trong trình duyệt:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
Cú pháp yêu cầu GET đơn giản:
let promise = axios.get(url)
Cú pháp yêu cầu POST đơn giản:
let promise = axios.post(url, data, config)
Những khái niệm chính của Axios:
- axios(config): phương thức chính để thực hiện các yêu cầu HTTP
- Nhận một đối tượng cấu hình, có thể bao gồm
url,method,headers,datavà các tham số khác. - Shortcut methods: Axios cung cấp các phương thức cho mỗi phương thức HTTP (
axios.get,axios.post,axios.put,axios.delete, v.v.), giúp thực hiện các yêu cầu tương ứng một cách dễ dàng. - Promises: tất cả các phương thức của Axios đều trả về Promise, được giải quyết thành đối tượng phản hồi hoặc bị từ chối trong trường hợp lỗi.
Cú pháp một yêu cầu GET đơn giản với xử lý phản hồi và lỗi:
axios.get(url)
.then(response => {
// Xử lý phản hồi thành công
})
.catch(error => {
// Xử lý lỗi
});
Cú pháp một yêu cầu POST đơn giản với xử lý phản hồi và lỗi:
axios.post(url, data, config)
.then(response => {
// Xử lý phản hồi thành công
})
.catch(error => {
// Xử lý lỗi
});
Ví dụ về yêu cầu GET đơn giản sử dụng Axios:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
axios.get('https://jsonplaceholder.typicode.com/posts/1')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Lỗi khi thực hiện yêu cầu: ', error);
});
Ví dụ về yêu cầu POST sử dụng Axios:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
axios.post('https://jsonplaceholder.typicode.com/posts', {
title: 'foo',
body: 'bar',
userId: 1
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Lỗi khi thực hiện yêu cầu: ', error);
});
5.3 Cấu hình Axios
Cài đặt Axios
Axios cho phép cấu hình các yêu cầu HTTP thông qua đối tượng config, bao gồm các tham số như url, method, headers và dữ liệu (data). Dưới đây là một ví dụ cơ bản về cấu hình yêu cầu:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
const config = {
method: 'get', // có thể là 'get', 'post', 'put', 'delete', v.v.
url: 'https://jsonplaceholder.typicode.com/posts/1',
headers: {
'Content-Type': 'application/json' // Tiêu đề để chỉ định loại dữ liệu
},
// data: JSON.stringify(data) // Sử dụng cho các yêu cầu POST và PUT để truyền nội dung yêu cầu
};
axios(config)
.then(response => console.log(response.data))
.catch(error => console.error('Lỗi khi thực hiện yêu cầu: ', error));
Các tính năng bổ sung của Axios:
- Tham số yêu cầu: có thể truyền tham số yêu cầu trong URL.
- Hủy bỏ yêu cầu: sử dụng
AbortController. - Timeout: thiết lập thời gian chờ cho yêu cầu.
Ví dụ sử dụng tham số yêu cầu:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
axios.get('https://jsonplaceholder.typicode.com/posts', {
params: {
userId: 1 // Tham số yêu cầu được truyền qua đối tượng params
}
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Lỗi khi thực hiện yêu cầu: ', error);
});
5.4 So sánh Fetch và Axios
Bây giờ hãy xem xét Fetch và Axios so với các chỉ số chính:
1. Đơn giản trong sử dụng:
- Fetch: dễ sử dụng cho các thao tác cơ bản, nhưng yêu cầu xử lý bổ sung cho các kịch bản phức tạp (ví dụ: chuyển đổi JSON, xử lý timeout).
- Axios: cung cấp API tiện lợi và mạnh mẽ hơn để thực hiện các yêu cầu phức tạp.
2. Hỗ trợ JSON:
- Fetch: yêu cầu gọi rõ ràng
response.json()để chuyển đổi nội dung phản hồi thành JSON. - Axios: tự động chuyển đổi phản hồi JSON.
3. Timeout:
- Fetch: không hỗ trợ timeout tích hợp. Để thực hiện timeout, cần sử dụng
AbortControllerhoặc các bọc ngoài. - Axios: hỗ trợ cấu hình timeout qua cấu hình.
4. Bộ đón (Interceptors):
- Fetch: không hỗ trợ bộ đón yêu cầu và phản hồi.
- Axios: cho phép sử dụng bộ đón để thực hiện logic trước và sau khi gửi yêu cầu.
Ví dụ với bộ đón trong Axios
Interceptors (bộ đón) cho phép thực hiện các hành động nhất định trước khi gửi yêu cầu hoặc sau khi nhận được phản hồi:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
// Thêm bộ đón cho yêu cầu
axios.interceptors.request.use(config => {
console.log('Yêu cầu được gửi đến máy chủ: ', new Date());
return config;
}, error => {
return Promise.reject(error);
});
// Thêm bộ đón cho phản hồi
axios.interceptors.response.use(response => {
console.log('Nhận được phản hồi từ máy chủ: ', new Date());
return response;
}, error => {
return Promise.reject(error);
});
// Ví dụ yêu cầu với bộ đón
axios.get('https://jsonplaceholder.typicode.com/todos/1')
.then(response => console.log(response.data))
.catch(error => console.error('Lỗi khi thực hiện yêu cầu: ', error));
Các yêu cầu song song sử dụng Axios
Với Axios, có thể dễ dàng thực hiện các yêu cầu song song và xử lý kết quả với Promise.all():
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
Promise.all([
axios.get('https://jsonplaceholder.typicode.com/todos/1'),
axios.get('https://jsonplaceholder.typicode.com/todos/2')
])
.then(responses => {
responses.forEach(response => {
console.log(response.data);
});
})
.catch(error => console.error('Lỗi khi thực hiện yêu cầu: ', error));
GO TO FULL VERSION