是否有任何理由使用axios而不是ES6 fetch

Question

研究了axios和ES6 fetch的文档,我发现两者非常相似,并且经历了$ .ajax及其缩写的强烈影响.

axios的主要优点是浏览器支持.

所以我是对的,如果我使用babel-polyfill - 没有理由使用axios？

Answer 1

使用Axios over Fetch的几个原因:

1. 能够监控请求进度

这更像是XMLHttpRequest(支持axios)或Fetch API之间的问题.

Fetch API目前没有提供任何方式来获取请求进度的通知,例如,该功能为大文件上传提供反馈机制.

另一方面,Axios内置了此功能:

axios.post('/api', data, {
    onUploadProgress: ({ total, loaded }) => {
        // update progress
    }),
})

2. 错误处理

当你的后端返回500 Internal Server Error响应代码时,fetch不会对它有任何不同200 OK.

这在大多数情况下是不方便的,因为您先前对响应看起来的假设不再有效.

通常,当从服务器收到错误响应时,您希望尽快中止处理管道,并切换到错误处理案例.

fetch(url)
    .then(reponse => {
        if (!(status >= 200 && status < 300)) {
            return Promise.reject(new Error("Invalid response status"));
        }

        return response;
    })
    .then(response => response.json())
    .then(/* normal processing */)
    .catch(/* error handling */);

这并不难实现,但您可能希望在某些抽象下捕获此逻辑以避免重复,这使我们更接近Web API抽象,即Axios.

如果响应返回错误状态,Axios会做出理智并拒绝承诺.这种行为可以自定义,就像axios的大多数事情一样.

3. 测试

Axios有moxios,fetch有fetch-mock.

这两个库都很棒,但根据我的经验,fetch-mock需要额外的设置才能让Jest使用模拟获取而不是polyfilled.

我也喜欢moxios.wait()返回一个在匹配请求后将解决的promise.

4. Axios提供的其他功能

例如,您可以配置一个拦截器,它将api键添加到所有请求参数,或监视活动请求以显示加载屏幕.

使用一个选项而不是另一个选项的原因可能因实际要求而异.

如果需要监视进度,请使用Axios(或XMLHttpRequest).

如果您正在编写服务工作者,请使用Fetch.

否则,使用对您来说更方便的东西.

Answer 2

这个：

fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    body: JSON.stringify({
      title,
      body
    })
  }).then((res) => {
    if (res.ok) {
      return res.json()
    }

    throw new Error(res.responseText);

  })
  .then((data) => console.log(data))
  .catch((err) => console.log(err))

基本上可以由axios表示为：

axios.post('https://jsonplaceholder.typicode.com/posts', {
    title,
    body
  }).then((data) => console.log(data))
  .catch((err) => console.log(err))

所以本质上：

1. 不需要做res.json()，res.text()等等
2. 无需处理res.ok即可在实际的Promise catch处理程序中捕获非200状态错误。
3. 无需对有效负载进行字符串化，默认情况下，它由axios处理。

总体而言axios，从设计角度来看，用于处理请求的api更易于使用。