Trong một project ta hay sử dụng gọi API rất là nhiều lần, có thể sử dùng Axios hoặc Fetch, hay một số thư viện khác. Thường có các phương thức gọi trong API như : GET, POST,...
Để cho việc gọi linh động và tùy ý gọi bắt cứ đâu, ta có thể setup một tệp cấu hình chức năng gọi API.
Ví dụ trong React, mình sẽ tạo thư mục api/index.js và cấu hình tệp index.js gọi API như sau:
export default async function callApi(endpoint, method = 'GET', body=null){
const requestOptions = {
method: method,
headers: {
'Authorization': 'Bearer ' + localStorage.getItem('token'),
'Content-Type': 'application/json'
},
};
if(body){
requestOptions.body = JSON.stringify(body);
}
const data = await fetch(endpoint, requestOptions)
let res = await data.json();
return res;
}Đoạn code trên , mình có cài đặt function
export default async function callApi(endpoint, method = 'GET', body = null) { ... }
📌 Mục đích: Hàm này giúp gọi API một cách tái sử dụng trong React bằng fetch(), hỗ trợ các phương thức GET, POST, PUT, DELETE...
endpoint: URL của API mà bạn muốn gọi.
method: Mặc định là 'GET', có thể thay đổi thành 'POST', 'PUT', 'DELETE' tùy nhu cầu.
body: Nội dung gửi kèm trong request (nếu có), mặc định là null.
headers:
+ Authorization: Lấy token từ localStorage và gắn vào header để xác thực (Bearer Token Authentication).
+ Content-Type: application/json: Đảm bảo dữ liệu gửi đi ở định dạng JSON.
Okay bây giờ chúng ta có thể sử dụng function callApi trong các Component rồi á, nhưng nhớ phải import đường dẫn tới api/index.js nhé
Ví dụ:
import callApi from "../api";
//call function callApi
const fetchCategories = async () => {
try {
const res = await callApi(URL_API + `/categories`);
// console.log("RESULT:", res);
dispatch({ type: "INSTALL_CATEGORY", payload: res });
setCategories(res);
} catch (error) {
console.error("Error fetching categories:", error);
}
};