大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发!
高级前端进阶
本文我会解释为什么在开发中 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