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

高级前端‬进阶

本文我会解释为什么在开发中 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 或者 404statusText: 文本信息形式的 HTTP 状态headers: 响应头，和请求头类似config: 请求的配置request: XMLHttpRequest (XHR) 对象

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

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

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

JSONFetch

使用 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 可以准确地捕获并抛出错误。比如说返回 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，并且随时告诉我们下载了多少数据。

// 源代码：  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() 中无法跟踪上传进度。

Axios

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

const config = {    onUploadProgress: event => console.log(event.loaded)  };axios.put("/api", data, config);

当你需要检查或者修改从客户端到服务端的 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 的 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(';),  fetch(';)]).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.all()。将所有请求放在一个数据中并传递给 axios.all() 方法，之后调用 axios.spread() 方法将响应数组中的每个响应数据赋值给单个变量，就像这样：

axios.all([  axios.get(';),   axios.get(';)]).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() 也是个不错的选择。

参考资料原文链接：作者：Sabesan Sathananthan译文链接：