Axios和Fetch有什么区别？

我通过使用访存来调用Web服务，但是我可以在axios的帮助下进行相同的操作。所以现在我很困惑。我应该选择axios还是fetch？

Fetch和Axios在功能上非常相似，但是为了实现向后兼容性，Axios似乎工作得更好（例如，在IE 11中，fetch无法正常工作，请查看此文章）

另外，如果您使用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
}

所以：

• 提取主体 = Axios的数据
• 必须对提取的主体进行字符串化，Axios的数据包含该对象
• 提取在请求对象中没有URL，Axios 在请求对象中具有URL
• 提取请求功能包括url作为参数，Axios请求功能不包括url作为参数。
• 取请求是确定当响应对象包含的确定属性，Axios公司请求是确定当状态为200和状态文本是“OK”
• 获取json对象的响应：在访存中，调用响应对象上的json（）函数，在Axios中获取响应对象的data属性。

希望这可以帮助。

它们是HTTP请求库...

我最终还是有同样的疑问，但是这篇文章中的表格使我同意isomorphic-fetch。这是fetch但随着工作的NodeJS。

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

上面的链接失效了。这张表在这里：https : //www.javascriptstuff.com/ajax-libraries/

或在这里：

根据GitHub上的mzabriskie ：

总体而言，它们非常相似。axios的一些优点：

• 变形器：允许在发出请求之前或接收到响应之后对数据执行转换

• 拦截器：允许您完全更改请求或响应（也包括标题）。另外，在发出请求或Promise解决之前执行异步操作

• 内置XSRF保护

请检查浏览器支持Axios

我认为您应该使用axios。

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

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

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

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

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

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

// 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在node-fetch没有响应时引发4xx响应。还fetch对JSON解析使用了Promise。

axios的优点：

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

优势axios超过fetch