我使用Fetch调用web服务,但我可以在Axios的帮助下做同样的事情。现在我很困惑。我应该选择Axios还是Fetch?
当前回答
对于fetch,我们需要处理两个承诺。使用axios,我们可以直接访问响应对象数据属性中的JSON结果。
其他回答
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的优点
一份工作,我做了很多似乎,这是通过ajax发送表单,通常包括一个附件和几个输入字段。在更经典的工作流程(HTML/PHP/JQuery)中,我在客户端和服务器端使用了$.ajax(),并获得了完全的成功。
我已经使用axios dart/flutter,但现在我正在学习react来构建我的网站,JQuery没有意义。
问题是axios在另一方面给了我一些头疼的PHP,当张贴正常的输入字段和上传文件在同一形式。我尝试了$_POST和file_get_contents(“php://input”)在php中,从axios与FormData或使用json构造发送,但我永远无法同时获得文件上传和输入字段。
另一方面,我成功地使用了下面的代码:
var formid = e.target.id;
// populate FormData
var fd = buildFormData(formid);
// post to remote
fetch('apiurl.php', {
method: 'POST',
body: fd,
headers:
{
'Authorization' : 'auth',
"X-Requested-With" : "XMLHttpRequest"
}
})
在PHP方面,我能够通过$_FILES检索上传,并通过$_POST处理其他字段数据:
$posts = [];
foreach ($_POST as $post) {
$posts[] = json_decode($post);
}
fetch API和axios API之间还有一个主要区别
在使用service worker时,只有当您想拦截HTTP请求时才必须使用fetch API 当使用service worker在PWA中执行缓存时,如果你使用axios API(它只适用于fetch API),你将无法缓存。
它们是HTTP请求库…
我最终也产生了同样的怀疑,但这篇文章中的表格让我选择了同构取回。它是fetch,但适用于NodeJS。
http://andrewhfarmer.com/ajax-libraries/
上面的链接失效了 同样的表格在这里:https://www.javascriptstuff.com/ajax-libraries/
或者在这里:
推荐文章
- 使用jQuery以像素为整数填充或边距值
- 检查是否选择了jQuery选项,如果没有选择默认值
- Next.js React应用中没有定义Window
- 如何重置笑话模拟函数调用计数之前,每次测试
- 如何强制一个功能React组件渲染?
- 在javascript中从平面数组构建树数组
- 将Dropzone.js与其他字段集成到现有的HTML表单中
- 如何在AngularJS中观察路由变化?
- JavaScript DOM删除元素
- 将dd-mm-yyyy字符串转换为日期
- Javascript复选框onChange
- Javascript函数前导bang !语法
- 如何在页面上遍历所有DOM元素?
- 在JS/jQuery中触发按键/按键/按键事件?
- 如何每5秒重新加载页面?