大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发!

高级前端进阶

本文我会解释为什么在开发中 Axios 是比 fetch() 更好的选择。

概述和语法

Fetch

Fetch() 是 Fetch API 中 JavaScript window 对象的一个方法。它是内置的，所以开发者无需进行任何安装。Fetch() 允许我们在不安装其他库的情况下异步请求数据。

fetch(url)
  .then((res) => {
    // 处理响应
  })
  .catch((error) => {
    // 处理错误
  });

上面的代码是一个简单的基于 fetch() 的 get 请求。fetch() 默认可以接收一个 url 参数，也即用户请求获取数据的路径。之后，fecth() 返回一个 promise，它可能会 resolve 响应对象，也可能会 reject 一个错误。

fetch(url, {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify(data),
})
  .then(response => response.json())
  .then(response => console.log(response))	
  .catch(error => console.log(error));

第二个参数是用于配置的选项，它是可选的。如果用户不传递第二个参数，则默认总是进行 get 请求，并从给定 url 那里下载相关资源。正如我之前提及的，promise 进行 resolve 的只是一个响应对象（译者注：第一个 response，并且是一个流对象），因此开发者还需要使用其他方法异步获取实际的响应数据。响应数据类型不同，对应的方法也不同。

response.json()
response.text()
response.blob()
response.formData()
response.arrayBuffer()

最常用的是 response.json()。

不幸的是，Node.js 并没有内置的 fetch() 函数，不过我们可以使用诸如 node-fetch 这样的 polyfill。在浏览器版本的 fetch() 和 node-fetch 之间，还存在着不少变种。

Axios

Axios 是一个可以从 Node 端或者浏览器端发起 HTTP 请求的 JavaScript 请求库。作为一个现代化的库，它基于 Promise API。Axios 有着诸多优点，比如防御 CSRF 攻击等。要使用 Axios，开发者必须先进行安装并通过 CDN、npm、yarn 或者 Bower 导入到项目中。

axios.get(url)
  .then((response) => console.log(response))
  .catch((error) => console.log(error));

上面这段代码使用了 Axios 的 get 方法，并针对响应和错误设置了相应的回调函数。当开发者创建一个配置对象的时候，他们可以定义一系列的属性。最常用的有 url、baseURL、 params、 auth、headers、responseType 以及 data。

作为响应，Axios 会返回一个 promise，该 promise 会 resolve 响应对象，或者 reject 错误对象。响应对象可能有以下属性：

data: 实际的响应体
status: 返回响应的 HTTP 状态码，比如 200 或者 404
statusText: 文本信息形式的 HTTP 状态
headers: 响应头，和请求头类似
config: 请求的配置
request: XMLHttpRequest (XHR) 对象

axios({
  url: "http://api.com",
  method: "POST",
  header: {
    "Content-Type": "application/json",
  },
  data: { 
      name: "Sabesan", 
      age: 25 
  }
});

使用 fecth() 必须处理两个 promise，而使用 Axios 则只需要处理一个，并且可以编写更加简洁的代码。

Axios 使用 data 属性处理数据，而 fetch() 则使用 body 属性。fetch() 的 data 是经过序列化的，并且 URL 作为参数传递，而 Axios 的 URL 则是直接在配置对象中设置。

JSON

Fetch

使用 fetch() 的时候，开发者需要在请求携带数据的时候去序列化数据，并且对于响应回来的数据需要调用某些方法进行反序列化。

fetch('url')
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.log(error));

在上面这段代码中，开发者拿到响应数据后还需要调用 response.json() 进行处理。也就是说，这里有两个步骤，一个是发出实际的请求，一个是调用 .json() 处理响应数据。

Axios

使用 Axios，开发者直接在请求中携带数据或者从响应中获取数据，无需进行额外处理。

axios.get('url')
    .then((response)=>console.log(response))
    .catch((error)=>console.log(error))

上面的例子中，我们只用到了一个 then。

数据自动转化是 Axios 非常棒的一个特性。

错误处理

Fetch

每次调用 fetch() 方法返回响应之后，你都需要手动检查状态码是否成功，因为即使是 400 或者 500 这样的状态码，也会被认为是请求成功。在使用 fetch() 的情况下，只有未完成的请求才不会被 resolve。

fetch('url')
    .then((response)=>{
        if(!response.ok){
            throw Error (response.statusText);
        }
        return response.json();
    })
    .then((data)=>console.log(data))
    .catch((error)=>console.log(error))

Fetch() 对于失败的状态码不会抛出错误，因此你必须手动检查 response.ok 属性。你可以将错误检查封装成一个函数以提升它的可重用性：

const checkError = response => {
    if (!response.ok) throw Error(response.statusText);
    return response.json();
  };
  
  fetch("url")
    .then(checkError)
    .then(data => console.log(data))
    .catch(error => console.log("error", error));

Axios

但如果使用 Axios ，错误处理将会变得非常简单，因为 Axios 可以准确地捕获并抛出错误。比如说返回 404 响应的时候，promise 会处于 reject 状态，并返回一个错误。这时候，我们可以捕获这个错误，并且检查具体是什么错误类型。

axios.get('url')
    .then((response)=> console.log(response))
    .catch((error)=>{
        if(error.response){
        // 当状态码不是 2xx 类型的时候
        console.log(error.response.data);
        console.log(error.response.status);
        console.log(error.response.headers);
        } else if (error.request){
            // 当请求发出后没有收到响应的时候
            console.log(error.request);
        } else {
            // 其它错误
            console.log(error.message);
        }
    })

下载进度

当加载大型资源的时候，进度指示器对低网速用户来说非常有用。在以前，开发者是通过 XMLHttpRequest.onprogress 来跟踪下载进度的。

Fetch

要在 fetch() 中跟踪下载进度，我们可以使用 response.body 的相关属性。这是一个 ReadableStream 对象，它可以逐块地提供 body，并且随时告诉我们下载了多少数据。

// 源代码： https://github.com/AnthumChris/fetch-progress-indicators
const element = document.getElementById('progress');

fetch('url')
  .then(response => {

    if (!response.ok) {
      throw Error(response.status+' '+response.statusText)
    }

    // 确保浏览器支持 ReadableStream 
    if (!response.body) {
      throw Error('ReadableStream not yet supported in this browser.')
    }

    // 以字节存储实体大小
    const contentLength = response.headers.get('content-length');

    // 确保浏览器支持 contentLength 
    if (!contentLength) {
      throw Error('Content-Length response header unavailable');
    }

    // 将整型解析为一个 base-10 数字
    const total = parseInt(contentLength, 10);

    let loaded = 0;

    return new Response(

      // 创建并返回一个可读流
      new ReadableStream({
        start(controller) {
          const reader = response.body.getReader();

          read();
          function read() {
            reader.read().then(({done, value}) => {
              if (done) {
                controller.close();
                return; 
              }
              loaded += value.byteLength;
              progress({loaded, total})
              controller.enqueue(value);
              read();
            }).catch(error => {
              console.error(error);
              controller.error(error)                  
            })
          }
        }
      })
    );
  })
  .then(response => 
    // 基于数据构造一个 blob
    response.blob()
  )
  .then(data => {
    // 将已下载图片插入到页面中
    document.getElementById('img').src = URL.createObjectURL(data);
  })
  .catch(error => {
    console.error(error);
  })

function progress({loaded, total}) {
  element.innerHTML = Math.round(loaded/total*100)+'%';
}

上面的代码展示了在下载图片的时候，如何使用 ReadableStream 为用户提供即时反馈。

Axios

在 Axios 中也可以实现进度指示器，并且更加简单，因为你只需要安装并使用相应模块即可，这个模块就是 Axios Progress Bar。

loadProgressBar();

function downloadFile(url) {
    axios.get(url, {responseType: 'blob'})
      .then(response => {
        const reader = new window.FileReader();
        reader.readAsDataURL(response.data); 
        reader.onload = () => {
          document.getElementById('img').setAttribute('src', reader.result);
        }
      })
      .catch(error => {
        console.log(error)
      });
}

上传进度

Fetch

在 fetch() 中无法跟踪上传进度。

Axios

在 Axios 中可以跟踪上传进度。如果你正在开发一个视频 / 图片上传应用，那么使用 Axios 是个不错的选择。

const config = {
    onUploadProgress: event => console.log(event.loaded)
  };

axios.put("/api", data, config);

HTTP 拦截器

当你需要检查或者修改从客户端到服务端的 HTTP 请求时，拦截器就可以派上用场了。当然它也可以用在其它地方，比如身份验证，日志记录等。

Fetch

Fetch() 默认并没有提供 HTTP 拦截器的功能。虽说你可以重写 fetch() 方法并定义在请求发出时的行为，但比起直接使用 Axios 的功能，这样需要编写大量复杂的代码。如果你想要重写全局 fetch() 方法并定义自己的拦截器，可以参考下面的代码：

fetch = (originalFetch => {
    return (...arguments) => {
      const result = originalFetch.apply(this, arguments);
        return result.then(console.log('Request was sent'));
    };
  })(fetch);
  
fetch('url')
    .then(response => response.json())
    .then(data => {
      console.log(data) 
    });

Axios

Axios 的 HTTP 拦截器是它的核心特性之一 —— 也就是说你无需编写额外代码去实现拦截器。

// request 拦截器
axios.interceptors.request.use((config)=>{
    console.log('Request was sent');
    return config;
})

// response 拦截器
axios.interceptors.response.use((response) => {
    return response; 
})

axios.get('url')
    .then((response)=>console.log(response))
    .catch((error)=>console.log(error))

在上面这段代码中，
axios.interceptors.request.use() 和
axios.interceptors.response.use() 方法分别定义在 HTTP 请求发出前和响应收到前需要进行的操作。

响应超时处理

Fetch

Fetch() 可以通过 AbortController 接口处理响应超时问题。

const controller = new AbortController();
const signal = controller.signal;
const options = {
  method: 'POST',
  signal: signal,
  body: JSON.stringify({
    firstName: 'Sabesan',
    lastName: 'Sathananthan'
  })
};  
const promise = fetch('/login', options);
const timeoutId = setTimeout(() => controller.abort(), 5000);

promise
  .then(response => {/* handle the response */})
  .catch(error => console.error('timeout exceeded'));

在上面这段代码中，我们通过
AbortController.AbortController() 构造器创建一个 AbortController 对象。这个对象允许我们延迟终止请求。正如我之前在别的文章提到的， AbortController 有一个 signal 可读属性，它可用于与一个请求进行交互或者终止请求。如果服务端没有在 5 秒内进行响应，那么就会通过 controller.abort() 终止请求。

Axios

通过使用配置对象中可选的 timeout 属性，你可以设置一个终止请求的超时时间。

axios({
    method: 'post',
    url: '/login',
    timeout: 5000,    // 5 秒超时时间
    data: {
      firstName: 'Sabesan',
      lastName: 'Sathananthan'
    }
  })
  .then(response => {/* handle the response */})
  .catch(error => console.error('timeout exceeded'))

JavaScript 开发者更喜欢 Axios 而不是 fetch() 的其中一个原因就是前者处理超时问题更加简单。

并发请求

Fetch

你可以使用内置的 Promise.all() 实现并发请求。只需要传递一个包含多个 fetch() 请求的数组作为参数即可，之后通过一个 async 函数处理响应数据。

Promise.all([
  fetch('https://api.github.com/users/sabesansathananthan'),
  fetch('https://api.github.com/users/rcvaram')
])
.then(async([res1, res2]) => {
  const a = await res1.json();
  const b = await res2.json();
  console.log(a.login + ' has ' + a.public_repos + ' public repos on GitHub');
  console.log(b.login + ' has ' + b.public_repos + ' public repos on GitHub');
})
.catch(error => {
  console.log(error);
});

Axios

在 Axios 中，我们可以使用 axios.all()。将所有请求放在一个数据中并传递给 axios.all() 方法，之后调用 axios.spread() 方法将响应数组中的每个响应数据赋值给单个变量，就像这样：

axios.all([
  axios.get('https://api.github.com/users/sabesansathananthan'), 
  axios.get('https://api.github.com/users/rcvaram')
])
.then(axios.spread((obj1, obj2) => {
  // Both requests are now complete
  console.log(obj1.data.login + ' has ' + obj1.data.public_repos + ' public repos on GitHub');
  console.log(obj2.data.login + ' has ' + obj2.data.public_repos + ' public repos on GitHub');
}));

向后兼容

向后兼容可以说就是浏览器的支持。

Fetch

Fetch() 只支持 Chrome 42+、Safari 10.1+、Firefox 39+ 和 Edge 14+。具体的兼容情况可以查看 Can I Use。为了在不支持 fetch() 的浏览器上实现类似它的功能，你可以使用诸如 windows.fetch ( )这样的 polyfill。

通过 npm 进行安装：

npm install whatwg-fetch --save

如果由于某些原因你需要访问 polyfill 的实现，也可以进行导出：

import {fetch as fetchPolyfill} from 'whatwg-fetch'

window.fetch(...)   // 原生浏览器版本
fetchPolyfill(...)  // polyfill 版本

记住，在旧浏览器中你可能还需要 promise 的 polyfill。

Axios

Axios 和 fetch() 不一样。它提供了相当全面的浏览器支持，即使像 IE11 这样的旧浏览器也可以顺利运行 Axios。更具体的兼容情况可以查看 Axios 的文档。

结论

对于大部分进行 HTTP 交互的开发场景，Axios 提供了一系列简单易用的 API。

当然还有不少用于 HTTP 交互的第三方库，比如基于 window.fetch 的 ky ，这是一个小而优雅的 HTTP 请求库；比如说基于 XMLHttpRequest 的 superagent，它是一个小型的、渐进式的客户端 HTTP 请求库。

但如果应用需要进行大量请求，或者要求请求库可以高效进行错误处理和 HTTP 拦截，那么 Axios 是更好的选择。

而对于只需要调用少量 API 的小项目来说，fetch() 也是个不错的选择。

参考资料

原文链接：https://betterprogramming.pub/why-javascript-developers-should-prefer-axios-over-fetch-294b28a96e2c
作者：Sabesan Sathananthan
译文链接：https://markdowner.net/article/177804698764861440

为什么 JS 开发者更喜欢 Axios 而不是 Fetch?

概述和语法

Fetch

Axios

JSON

Fetch

Axios

错误处理

Fetch

Axios

下载进度

Fetch

Axios

上传进度

Fetch

Axios

HTTP 拦截器

Fetch

Axios

响应超时处理

Fetch

Axios

并发请求

Fetch

Axios

向后兼容

Fetch

Axios

结论

参考资料

相关推荐

飞牛OS入门安装遇到问题，如何解决?

用什么工具在Win中查看8G大的log文件?

如何在 Windows 10 或 11 上通过命令行安装 Node.js 和 NPM

Trae IDE 如何与 GitHub 无缝对接?

如何修改图片拍摄日期?快速修改图片拍摄日期的6种方法

5步搞定动态考勤表!标记节假日、调休日?Excel自动变色!

Win11和Win10专业版永久激活密钥详细步骤?

Vue独立组件——11个最佳Vue.js日期选择器组件

RK3588-HDMIRX（瑞芯微rk3588芯片手册）

用纯Python轻松构建Web UI:Remi 动态更新，实时刷新界面内容