我使用Fetch调用web服务,但我可以在Axios的帮助下做同样的事情。现在我很困惑。我应该选择Axios还是Fetch?
当前回答
除了……我在测试中使用了各种lib,并注意到它们对4xx请求的不同处理。在这种情况下,我的测试返回一个json对象,响应为400。这是3个流行的libs处理响应的方式:
// request-promise-native
const body = request({ url: url, json: true })
const res = await t.throws(body);
console.log(res.error)
// node-fetch
const body = await fetch(url)
console.log(await body.json())
// Axios
const body = axios.get(url)
const res = await t.throws(body);
console.log(res.response.data)
有趣的是,request-promise-native和axios在4xx响应上抛出,而节点获取则不会抛出。fetch还使用了json解析的promise。
其他回答
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.
axios的好处:
变形:允许在发出请求之前或在收到响应之后对数据进行转换 拦截器:允许您完全更改请求或响应(包括头)。也执行异步操作之前提出请求或承诺解决之前 内置XSRF保护
axios相对于fetch的优点
它们是HTTP请求库…
我最终也产生了同样的怀疑,但这篇文章中的表格让我选择了同构取回。它是fetch,但适用于NodeJS。
http://andrewhfarmer.com/ajax-libraries/
上面的链接失效了 同样的表格在这里:https://www.javascriptstuff.com/ajax-libraries/
或者在这里:
Fetch API, need to deal with two promises to get the response data in JSON Object property. While axios result into JSON object. Also error handling is different in fetch, as it does not handle server side error in the catch block, the Promise returned from fetch() won’t reject on HTTP error status even if the response is an HTTP 404 or 500. Instead, it will resolve normally (with ok status set to false), and it will only reject on network failure or if anything prevented the request from completing. While in axios you can catch all error in catch block.
我会说更好的使用axios,直接处理拦截器,头配置,设置cookie和错误处理。
请参考这个
根据mzabriskie在GitHub上的说法:
总的来说,它们非常相似。axios的一些好处: 变形:允许在发出请求之前或在接收到响应之后对数据进行转换 拦截器:允许您完全更改请求或响应(包括头)。另外,在请求被发送之前执行异步操作 在承诺解决之前 内置XSRF保护
请检查浏览器支持Axios
我认为您应该使用axios。
推荐文章
- 我如何使用Jest模拟JavaScript的“窗口”对象?
- 我如何等待一个承诺完成之前返回一个函数的变量?
- 在JavaScript中根据键值查找和删除数组中的对象
- 使嵌套JavaScript对象平放/不平放的最快方法
- 如何以及为什么'a'['toUpperCase']()在JavaScript工作?
- 有Grunt生成index.html不同的设置
- 文档之间的区别。addEventListener和window。addEventListener?
- 如何检查动态附加的事件监听器是否存在?
- 如何写setTimeout与参数Coffeescript
- 将JavaScript字符串中的多个空格替换为单个空格
- JavaScript: override alert()
- 重置setTimeout
- 如何确保<select>表单字段被禁用时提交?
- jQuery有不聚焦的方法吗?
- 反应钩子-正确的方式清除超时和间隔