Axios和Fetch有什么区别?

我使用Fetch调用web服务，但我可以在Axios的帮助下做同样的事情。现在我很困惑。我应该选择Axios还是Fetch?

174360 次浏览
小开

它们是HTTP请求库…

我最终有同样的怀疑，但这个帖子中的表使我选择isomorphic-fetch。它是fetch，但适用于NodeJS。

http://andrewhfarmer.com/ajax-libraries/

上面的链接无效 相同的表在这里:https://www.javascriptstuff.com/ajax-libraries/

< p >或在这里: enter image description here < / p >
小开

根据mzabriskie GitHub上:

总的来说，它们非常相似。axios的一些好处:

  • transformer:允许在请求发出之前或接收到响应之后对数据进行转换

  • 拦截器:允许你完全改变请求或响应(头)。另外，在请求被发送之前执行异步操作 承诺解决

  • 内置XSRF保护

请检查浏览器支持Axios

浏览器支持表

我认为您应该使用axios。

小开

除了……我在测试中使用了各种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响应，而node-fetch没有。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
}

所以:

  • Fetch的身体 = Axios的数据
  • Fetch的主体必须是stringified, Axios的数据包含对象 . xml
  • 在请求对象中获取没有url，在请求对象中获取Axios 有网址
  • 取请求函数包括Url作为参数、Axios请求函数不包括url作为参数。
  • 当响应对象包含好的属性时，Fetch请求为好吧，当状态为200和statusText是OK时，Axios请求为好吧
  • 要获取json对象的响应:在fetch中调用响应对象的json()函数，在Axios中获取响应对象的数据属性。
小开

axios的好处:

  • 变形:允许在发出请求之前或在收到响应之后对数据进行转换
  • 拦截器:允许您完全更改请求或响应(包括头)。也执行异步操作之前提出请求或承诺解决之前
  • 内置XSRF保护

axios相对于fetch的优势 . >

小开

Axios是一个独立的第三方包，可以使用NPM轻松安装到React项目中。

你提到的另一个选项是fetch函数。与Axios不同，fetch()内置在大多数现代浏览器中。使用fetch，您不需要安装第三方包。

所以这取决于你，你可以使用fetch()，如果你不知道你在做什么，可能会搞砸，或者只是使用Axios，这在我看来更直接。

小开

在fetchapi &之间多一个主要区别;axios API

  • 在使用service worker时，如果你想拦截HTTP请求，你必须只使用获取API
  • 当使用service worker在PWA中执行缓存时，如果你使用axios API(它只适用于fetch API)，你将无法缓存。
小开

对于fetch，我们需要处理两个承诺。使用axios，我们可以直接访问响应对象数据属性中的JSON结果。

小开

  1. 获取API，需要处理两个承诺来获得JSON对象属性中的响应数据。而axios的结果是JSON对象。

  2. 同样，错误处理在fetch中是不同的，因为它不处理捕获块中的服务器端错误，从fetch()返回的Promise不会拒绝HTTP错误状态，即使响应是HTTP 404或500。相反，它将正常解析(ok状态设置为false)，仅在网络故障或有任何阻止请求完成的情况下才会拒绝。而在axios中，您可以在catch块中捕获所有错误。

我会说更好的使用axios，直接处理拦截器，头配置，设置cookie和错误处理。

参考这个

小开

一份工作，我做了很多似乎，这是通过ajax发送表单，通常包括一个附件和几个输入字段。在更经典的工作流程(HTML/PHP/JQuery)中，我已经在客户端和服务器端成功地使用了$.ajax()。

我已经使用axios dart/flutter，但现在我正在学习react来构建我的网站，JQuery没有意义。

问题是axios在另一方面给了我一些头疼的PHP，当张贴正常的输入字段和上传文件在同一形式。我尝试了PHP中的$_POST和file_get_contents("php://input")，从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);
}
小开

Axios是一个基于承诺的HTTP客户端库，而Fetch是一个用于发出API请求的javascript API。

  1. 主要区别是浏览器支持:Axios支持包括IE在内的所有浏览器，而Fetch只支持最新的浏览器，IE不支持。

参考链接:https://github.com/axios/axios#browser-support

https://caniuse.com/fetch

    与获取API相比，Axios有更好的错误处理。Axios可以抛出400到500个范围的状态代码错误，而在fetch API中，您需要手动处理这些错误。 更多信息:https://bariablogger.in/f/axios-vs-fetch-react

提交答案