我使用Fetch调用web服务,但我可以在Axios的帮助下做同样的事情。现在我很困惑。我应该选择Axios还是Fetch?
当前回答
Fetch和Axios在功能上非常相似,但为了更多的向后兼容性,Axios似乎工作得更好(例如,Fetch在IE 11中不能工作,请查看这篇文章)。
此外,如果您使用JSON请求,以下是我偶然发现的一些差异。
获取JSON post请求
let url = 'https://someurl.com';
let options = {
method: 'POST',
mode: 'cors',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json;charset=UTF-8'
},
body: JSON.stringify({
property_one: value_one,
property_two: value_two
})
};
let response = await fetch(url, options);
let responseOK = response && response.ok;
if (responseOK) {
let data = await response.json();
// do something with data
}
Axios JSON post请求
let url = 'https://someurl.com';
let options = {
method: 'POST',
url: url,
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json;charset=UTF-8'
},
data: {
property_one: value_one,
property_two: value_two
}
};
let response = await axios(options);
let responseOK = response && response.status === 200 && response.statusText === 'OK';
if (responseOK) {
let data = await response.data;
// do something with data
}
So:
Fetch's body = Axios' data Fetch's body has to be stringified, Axios' data contains the object Fetch has no url in request object, Axios has url in request object Fetch request function includes the url as parameter, Axios request function does not include the url as parameter. Fetch request is ok when response object contains the ok property, Axios request is ok when status is 200 and statusText is 'OK' To get the json object response: in fetch call the json() function on the response object, in Axios get data property of the response object.
其他回答
它们是HTTP请求库…
我最终也产生了同样的怀疑,但这篇文章中的表格让我选择了同构取回。它是fetch,但适用于NodeJS。
http://andrewhfarmer.com/ajax-libraries/
上面的链接失效了 同样的表格在这里:https://www.javascriptstuff.com/ajax-libraries/
或者在这里:
axios的好处:
变形:允许在发出请求之前或在收到响应之后对数据进行转换 拦截器:允许您完全更改请求或响应(包括头)。也执行异步操作之前提出请求或承诺解决之前 内置XSRF保护
axios相对于fetch的优点
fetch API和axios API之间还有一个主要区别
在使用service worker时,只有当您想拦截HTTP请求时才必须使用fetch API 当使用service worker在PWA中执行缓存时,如果你使用axios API(它只适用于fetch API),你将无法缓存。
对于fetch,我们需要处理两个承诺。使用axios,我们可以直接访问响应对象数据属性中的JSON结果。
根据mzabriskie在GitHub上的说法:
总的来说,它们非常相似。axios的一些好处: 变形:允许在发出请求之前或在接收到响应之后对数据进行转换 拦截器:允许您完全更改请求或响应(包括头)。另外,在请求被发送之前执行异步操作 在承诺解决之前 内置XSRF保护
请检查浏览器支持Axios
我认为您应该使用axios。
推荐文章
- 如何使用Jest测试对象键和值是否相等?
- 将长模板文字行换行为多行,而无需在字符串中创建新行
- 如何在JavaScript中映射/减少/过滤一个集?
- Bower: ENOGIT Git未安装或不在PATH中
- 添加javascript选项选择
- 在Node.js中克隆对象
- 为什么在JavaScript的Date构造函数中month参数的范围从0到11 ?
- 使用JavaScript更改URL参数并指定默认值
- 在window.setTimeout()发生之前取消/终止
- 如何删除未定义和空值从一个对象使用lodash?
- 检测当用户滚动到底部的div与jQuery
- 在JavaScript中检查字符串包含另一个子字符串的最快方法?
- 检测视口方向,如果方向是纵向显示警告消息通知用户的指示
- ASP。NET MVC 3 Razor:在head标签中包含JavaScript文件
- 禁用从HTML页面中拖动图像