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

本文我会解释为什么在开发中 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