Axios 和 Fetch 有啥区别？

Posted 2023-02-22

【中文标题】Axios 和 Fetch 有啥区别？

【英文标题】：What is difference between Axios and Fetch?Axios 和 Fetch 有什么区别？

【发布时间】：2017-04-12 04:12:03

【问题描述】：

我正在使用 Fetch 调用 Web 服务，但在 Axios 的帮助下我也可以这样做。所以现在我很困惑。我应该选择 Axios 还是 Fetch？

【问题讨论】：

我认为这已经在github.com/mzabriskie/axios/issues/314进行了非常详细的讨论

虽然有很多答案，但我发现没有人提到axiso over fetch的请求超时。

【参考方案1】：

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 的

data

Fetch 的 body 必须是

stringified

，Axios 的 data 包含

object

Fetch

请求对象中没有url

，Axios

请求对象中有url

获取请求函数包含

url作为参数

，axios请求函数

不包含url作为参数

。 当响应对象包含

ok属性

时获取请求

ok

，

status为200

时Axios请求

ok

> 和

statusText 为“正常”

获取json对象响应：在fetch中调用响应对象的

json()函数

，在axios中获取响应对象的

data属性

。

【讨论】：

这里有更多问题。一旦 responseOk 为真，如果提供了状态，我们是否需要检查 response.data 中的状态？谢谢

Axios request is ok when status is 200 and statusText is 'OK' 2xx 范围内的其他 httpStatus（如 201 或 204）呢？

或者我认为response.ok 是一个布尔值，true 或false 值表示响应是否正常。用户离线由fetch()拒绝处理，但其他类型的服务器错误由response.ok处理

【参考方案2】：

它们是 HTTP 请求库...

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

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

---

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

或者在这里：

【讨论】：

我仍然无法找到 fetch 优于 axios 的好处。你知道我为什么要使用 axios 吗？

我认为 fetch 是一个标准，请参阅fetch.spec.whatwg.org ... axios 可能具有更多功能，因为它没有遵循...。我认为最终他们做了基础知识（ajax http 请求) 但这取决于你需要什么......我不需要变压器......所以获得标准库是一个专业......

请注意that table 具有误导性。它将fetch 定义为Native（意味着您可以使用它 - 无需包含库，根据表源），而实际上fetch 是@ 987654327@（特别是在所有版本的 IE 中），无论如何您都需要为其提供外部 polyfill。

除了@jack123 fetch 提到的差异之外，还没有提供像timeout 这样的基本ajax 功能（这很奇怪），我们必须使用单独的模块来实现这个基本功能。

@LucasKatayama 链接似乎已损坏

【参考方案3】：

根据 mzabriskie on GitHub:

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

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

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

内置XSRF保护

请查看浏览器支持 Axios

我认为你应该使用 axios。

【讨论】：

同意。 Axios 也是小型的 enuff 导入，因此膨胀不是太大问题 - 与 express 或 mongoose 之类的东西相反，如果有人对包大小有点疯狂，他们可能会担心。 :)

【参考方案4】：

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

使用 Service Worker 时，如果要拦截 HTTP 请求，则必须

仅使用 fetch API

例如。使用 service worker 在 PWA 中执行缓存时，如果您使用 axios API，您将无法缓存（它仅适用于 fetch API）

【讨论】：

谁能验证这是真的吗？这是 1 个人，但 9 人的支持似乎都同意，但很高兴看到 cmets 对此（我正在使用 axios 和 service worker pwa 离线这就是我问的原因。

当然，我们可以在这方面再添加一些 cmets，但是我在使用 axios 时遇到了缓存问题，当我用 fetch() API 替换 axios 时，它得到了解决

这似乎是正确的，但可能会在不久的将来修复：github.com/axios/axios/pull/2891

【参考方案5】：

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

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

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

【讨论】：

Fetch 没问题，但是 Axios 就像你说的那样——更直接。现代浏览器 (fetch) 中内置的内容对于功能发布来说并不是那么好。 - 所以我更喜欢 Axios

【参考方案6】：

axios的好处：

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

Advantages of axios over fetch

【参考方案7】：

此外...我在测试中使用了各种库，并注意到它们对 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 也使用一个 promise 进行 json 解析。

【讨论】：

@baitun 这些来自我运行的单元测试（我想我使用的是 Mocha）通常有一个 .throws 方法来测试抛出的错误。在这种情况下，我正在测试来自 3 个库的拒绝情况，并注意到返回的数据存在差异。

【参考方案8】：

Fetch API，需要处理两个promise来获取JSON Object属性中的响应数据。而 axios 生成 JSON 对象。

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

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

Refer this

【参考方案9】：

我似乎做了很多工作，它是通过 ajax 发送表单，通常包括一个附件和几个输入字段。在更经典的工作流程（html/php/JQuery）中，我在客户端使用了$.ajax()，在服务器上使用了 PHP，并且完全成功。

我已经将 axios 用于 dart/flutter，但现在我正在学习 react 来构建我的网站，而 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);
  

【参考方案10】：

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