Axios 和 Fetch 有什么区别？

Fetch 和 Axios 在功能上非常相似，但为了更好的向后兼容性，Axios 似乎工作得更好（例如，fetch 在 IE 11 中不起作用，请检查 this post）

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

所以：

Fetch 的 body = Axios 的数据

Fetch 的 body 必须被字符串化，axios 的数据包含对象

Fetch在请求对象中没有url，axios在请求对象中有url

fetch请求函数包含url作为参数，axios请求函数不包含url作为参数。

当响应对象包含 ok 属性时，获取请求是正确的，当状态为 200 且 statusText 为 'OK' 时，Axios 请求是正确的

获取 json 对象响应：在 fetch 中调用响应对象的 json() 函数，在 Axios 中获取响应对象的 data 属性。

---

它们是 HTTP 请求库...

我最终也有同样的疑问，但这个 post 中的表格让我选择了 isomorphic-fetch。这是 fetch 但适用于 NodeJS。

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

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

https://i.stack.imgur.com/qr24s.png

---

根据 mzabriskie on GitHub：

总的来说，它们非常相似。 axios 的一些好处： 转换器：允许在发出请求之前或收到响应之后对数据执行转换 拦截器：允许您完全更改请求或响应（也包括标头）。此外，在发出请求之前或在 Promise 解决之前执行异步操作内置 XSRF 保护

请查看浏览器支持 Axios

https://i.stack.imgur.com/LHV3m.png

我认为你应该使用 axios。

---

fetch API 和 axios API 之间的另一个主要区别

使用 service worker 时，只有在要拦截 HTTP 请求时才需要使用 fetch API

前任。在使用服务工作者在 PWA 中执行缓存时，如果您使用 axios API，您将无法缓存（它仅适用于 fetch API）

---

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

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

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

---

Fetch API，需要处理两个promise来获取JSON Object属性中的响应数据。而 axios 生成 JSON 对象。 fetch 中的错误处理也不同，因为它不处理 catch 块中的服务器端错误，即使响应是 HTTP 404 或 500，从 fetch() 返回的 Promise 也不会拒绝 HTTP 错误状态。相反，它将正常解决（ok 状态设置为 false），它只会在网络故障或任何阻止请求完成的情况下拒绝。在 axios 中，您可以在 catch 块中捕获所有错误。

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

Refer this

---

axios的好处：

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

拦截器：允许您完全更改请求或响应（也包括标头）。在发出请求之前或在 Promise 完成之前执行异步操作

内置 XSRF 保护

Advantages of axios over fetch

---

此外......我在测试中使用了各种库，并注意到它们对 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 解析的承诺。

---

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

---

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

我已经将 axios 用于 dart/flutter，但现在我正在学习如何构建我的网站，而 JQuery 没有意义。

问题是 axios 在发布两个普通输入字段并以相同形式上传文件时，另一方面让我对 PHP 感到有些头疼。我在 PHP 中尝试了 $_POST 和 file_get_contents("php://input")，使用 FormData 从 axios 发送或使用 json 构造，但我永远无法同时获取文件上传和输入字段。

另一方面，使用 Fetch 我已经成功使用以下代码：

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 是一个基于 Promise 的 HTTP 客户端库，而 Fetch 是一个用于发出 API 请求的 JavaScript API。

主要区别在于浏览器支持：Axios 支持包括 IE 在内的所有浏览器，而 Fetch 仅受最新浏览器支持，IE 不支持。

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

https://caniuse.com/fetch

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

---