葡萄牙语版本
axios 和 fetch 是在 javascript 中发出 http 请求的流行工具，但它们有一些关键的区别。总结如下：
阿克西奥斯
- 内置功能：axios 具有许多内置功能，例如自动 json 转换、请求和响应拦截器以及请求取消。
- 浏览器兼容性：支持旧版浏览器，包括 internet explorer。
- 错误处理：axios 自动拒绝 http 错误状态（例如 404 或 500）的 promise，使错误处理更容易。
- 请求/响应拦截器：允许您以简单的方式全局修改请求或响应。
- 请求取消：axios 提供了一种简单的方法来取消请求。
拿来
- 原生 api：fetch 是原生 web api，这意味着无需安装额外的库。
- promise-based：使用promise，但需要手动检查响应状态是否有错误。
- 流处理：fetch 支持流，这对于处理大型响应非常有用。
- 更多控制：提供对请求的更多控制，但需要更多额外代码来实现设置模式或拦截请求等功能。
- 没有内置对 json 的支持：您需要在响应对象上调用 .json() 来解析 json 数据。
使用案例
- 如果您需要一组丰富的开箱即用功能，特别是对于复杂的应用程序，请使用 axios。
- 使用 fetch 来实现更简单的用例或当您想避免外部依赖时。
使用示例
axios：
axios.get('/api/data')
.then(response => console.log(response.data))
.catch(error => console.error(error));
const options = {
url: 'http://localhost/test.htm',
method: 'post',
headers: {
'accept': 'application/json',
'content-type': 'application/json;charset=utf-8'
},
data: {
a: 10,
b: 20
}
};
axios(options)
.then(response => {
console.log(response.status);
});
获取：
fetch('/api/data')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => console.log(data))
.catch(error => console.error(error));
const url = "https://jsonplaceholder.typicode.com/todos";
const options = {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json;charset=UTF-8",
},
body: JSON.stringify({
a: 10,
b: 20,
}),
};
fetch(url, options)
.then((response) => response.json())
.then((data) => {
console.log(data);
});
笔记：
- 为了发送数据，fetch() 使用 post 请求的 body 属性，而 axios 使用 data 属性。
- 使用 json.stringify 方法将 fetch() 中的数据转换为字符串。
- axios 会自动转换服务器返回的数据，但使用 fetch() 时，需要调用 response.json() 方法将数据解析为 javascript 对象。
- 使用 axios，可以在数据对象内访问服务器提供的数据响应，而在 fetch() 方法中，最终的数据可以用任意变量命名。
结论
两者都有各自的优点，选择通常取决于您的具体需求和偏好。如果您正在构建具有大量 api 交互的大型应用程序，axios 可以使某些任务变得更容易，而 fetch 非常适合简单的任务。
axios 提供了一个用户友好的 api，可以简化大多数 http 通信任务。但是，如果您更喜欢使用本机浏览器功能，您绝对可以使用 fetch api 自己实现类似的功能。
正如我们所探索的，使用浏览器中可用的 fetch() 方法复制 axios 的核心功能是完全可行的。包含客户端 http 库的决定最终取决于您对本机 api 的舒适度以及项目的具体要求。
更多信息：https://medium.com/trainingcenter/axios-ou-fetch-765e5db9dd59
