So sánh Axios và Fetch
Sự khác nhau giữa axios và fetch
Axios và Fetch là hai module được dùng và tương tác với client thông qua HTTP request. Dưới đây là một vài so sánh về cách sử dụng của axios và fetch khác nhau như thế nào
1. GET HTTP calls
Ví dụ về Fetch:
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response => response.json())
.then(json => console.log(json))
// {
// "userId": 1,
// "id": 1,
// "title": "delectus aut autem",
// "completed": false
// }Ví dụ về Axios:
axios.get("https://jsonplaceholder.typicode.com/todos/1")
.then(response => console.log("response", response.data))
// {
// "userId": 1,
// "id": 1,
// "title": "delectus aut autem",
// "completed": false
// }
Trong khi với fetch sử dụng đến 2 lần promise thì mới nhận được kết quả thì axios chúng ta có thể lấy trực tiếp kết quả khi return promise
2. POST HTTP calls
Ví dụ về fetch:
fetch("https://jsonplaceholder.typicode.com/posts", {
method: "POST",
body: JSON.stringify({
title: "Title of post",
body: "Post Body"
})
})
.then(res => {
if (!response.ok) throw Error(response.statusText);
return response.json();
})
.then(data => console.log(data))
.catch(error => console.log(error));Ví dụ về Axios:
axios.post("https://jsonplaceholder.typicode.com/posts", {
title: "Title of post",
body: "Body of post"
})
.then(response => console.log(response.data))
.catch(error => console.log(error));Với fetch khi truyền params thì cần phải convert từ string sang json qua phương thức JSON.stringify() còn đối với axios thì có thể truyền thằng params mà không cần thông qua phương thức đó. Tương tự với phương thức GET, axios có thể trả về thẳng kết quả thông qua return promise.
3. Error handling
Ví dụ về Fetch:
fetch("https://jsonplaceholder.typicode.com/todos/100000")
.then(response => {
if (!response.ok) throw Error(response.statusText);
return response.json();
})
.then(data => console.log("data", data))
.catch(error => {
console.log("error", error);
});
// error Error: Not FoundVí dụ về Axios:
axios.get("https://jsonplaceholder.typicode.com/todos/100000")
.then(response => {
console.log("response", response);
})
.catch(error => {
console.log("error", error);
});Nếu chúng ta làm việc với Fetch thì chúng ta phải check propertie response.ok. Còn đối với Axios network errors một cách trực tiếp
4. Simultaneous requests
Serial and parallel trong promise là một khái niệm quan trọng, bạn cần luôn luôn sử dụng vì nó quyết định tới performance code của bạn.
Ví dụ về Fetch:
Promise.all([
fetch('https://api.github.com/users/anonystick'),
fetch('https://api.github.com/users/anonystick')
])
.then(async([res1, res2]) => {
const a = await res1.json();
const b = await res2.json();
console.log(a.login + ' has ' + a.public_repos + ' public repos on GitHub');
console.log(b.login + ' has ' + b.public_repos + ' public repos on GitHub');
})
.catch(error => {
console.log(error);
});Ví dụ về Axios:
axios.all([
axios.get('https://api.github.com/users/anonystick'),
axios.get('https://api.github.com/users/anonystick')
])
.then(axios.spread((obj1, obj2) => {
// Both requests are now complete
console.log(obj1.data.login + ' has ' + obj1.data.public_repos + ' public repos on GitHub');
console.log(obj2.data.login + ' has ' + obj2.data.public_repos + ' public repos on GitHub');
}));5. Upload
Upload thì toi nghĩ cái quan trọng là làm sao quản lý được monitor the progress khi upload thôi, để làm được điểu đó thì fetch chưa support. Trong khi đó chúng ta có thể sử dụng Axios trong trường hợp này
const config = { onUploadProgress: event => console.log(event.loaded) }; axios.put("/api", data, config);Tổng kết
Phía trên là một vài ví dụ cho thấy sự khác biệt giữa cả 2 module Axios và fetch. Nếu như bạn phát triển ứng dụng dựa trên node thì nên sử dụng phương thức Axios còn khi phát triển trên browser thì có thể tuỳ từng trường hợp để sử dụng một trong hai module trên.
Tài liệu tham khảo