Axios和Fetch有什么区别？

Question

我通过使用fetch来调用Web服务,但是我可以在axios的帮助下做同样的事情.所以现在我很困惑.我应该选择axios还是获取？

Answer 1

Fetch和Axios在功能上非常相似,但为了更加向后兼容,Axios似乎效果更好(例如,获取在IE 11中不起作用,请查看此帖子)

此外,如果您使用JSON请求,以下是我偶然发现的一些差异.

获取JSON帖子请求

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发布请求

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
}

所以:

• 获取body = Axios的数据
• Fetch的主体必须被字符串化,Axios的数据包含该对象
• Fetch 在请求对象中没有url,Axios 在请求对象中有url
• 获取请求函数包括url作为参数,Axios请求函数不包含url作为参数.
• 当响应对象包含ok属性时,获取请求正常,当状态为200且statusText为"OK"时,Axios请求正常
• 要获取json对象响应:在fetch中调用响应对象上的json()函数,在Axios中获取响应对象的data属性.

希望这可以帮助.

Answer 2

它们是HTTP请求库......

我最后也遇到了同样的疑问,但这篇文章中的表让我顺其自然isomorphic-fetch.哪个fetch适用于NodeJS.

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

Answer 3

根据GitHub上的mzabriskie的说法 :

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

• 变形金刚:允许在发出请求之前或收到响应之后对数据进行变换

• 拦截器:允许您完全改变请求或响应(标题也是如此).此外,在发出请求之前或在Promise结算之前执行异步操作

• 内置XSRF保护

我认为你应该使用axios.

Answer 4

\n

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

   \n
\n

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

   \n
\n

\n

我想说使用 axios 更好，可以直接处理拦截器、标头配置、设置 cookie 和错误处理。

\n

参考这个

\n

Answer 5

提取API和axios API之间的另一大区别

• 使用Service Worker时，仅在要拦截HTTP请求时才必须使用访存API。
• 例如 使用Service Worker在PWA中执行高速缓存时，如果您使用的是axios API，则将无法进行高速缓存（仅适用于访存API）

Answer 6

axios 的好处：

• 转换器：允许在发出请求之前或收到响应之后对数据执行转换
• 拦截器：允许您完全更改请求或响应（以及标头）。在发出请求之前或在 Promise 解决之前执行异步操作
• 内置 XSRF 保护

优势axios超过fetch

Answer 7

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

您提到的另一个选项是访存功能。与Axios不同，fetch()它内置于大多数现代浏览器中。使用获取，您无需安装第三方软件包。

因此，由您自己决定，fetch()如果您不知道自己在做什么，则可以继续使用，并可能将其弄乱，或者只是使用Axios，我认为这更简单。

Answer 8

另外......我在测试中使用了各种库，并注意到它们对 4xx 请求的不同处理。在这种情况下，我的测试返回一个带有 400 响应的 json 对象。这是 3 个流行的库处理响应的方式：

// 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 解析。