大家好，很开心又碰面了，我是”高阶后端高阶
高阶后端高阶
责任编辑就要说明为何在合作开发中 Axios 是比 fetch() 更快的优先选择。
简述和句法
Fetch
Fetch() 是 Fetch API 中 JavaScript window 第一类的两个方式。它是内建的，因此合作开发人员无须展开任何人加装。Fetch() 容许他们在不加装其它库的情况下触发器允诺数据。
fetch(url) .then((res) => { // 处理积极响应 }) .catch((error) => { //奈镇 });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: “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.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( // 创建并返回两个可读流 newReadableStream({ 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); returnconfig; })// response 拦截器 axios.interceptors.response.use((response) => { returnresponse; }) 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); consttimeoutId = 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() 也是个不错的优先选择。
