作者： 文章来源：
本文原地址：https://www.mimiwuqi.com/webqianduan/197135.html
目录文章目录
如果你使用 Axios 的唯一原因是向后兼容，那么你实际上就不需要 HTTP 库。取而代之的是，你可以使用这种类似的 polyfill 在不支持的网络浏览器上实现类似的功能。要开始使用fetch() polyfill，请通过 npm 命令安装它：
npm install whatwg-fetch --save
然后，我们可以发出如下请求：
import 'whatwg-fetch' window.fetch(...)
注意，在某些旧的浏览器中，您可能还需要 promise 填充。
另外，在 Axios 中设置 timeout 要比在fetch()设置更加简单，这也是某些前端开发人员偏爱它的原因之一。在 Axios 中，你可以使用 config 对象中的可选 timeout 属性设置请求中止前的毫秒数。例如：
axios({
method: 'post',
url: '/login',
timeout: 4000,
// 4 seconds timeout
data: {
firstName: 'mybj',
lastName: 'qdbk'
}
}).then(response = >{
/* handle the response */
}).
catch(error = >console.error('timeout exceeded'))
Fetch()通过AbortController界面提供类似的功能。但是，它不像 Axios 版本那么简单：
const controller = new AbortController();
const options = {
method: 'POST',
signal: controller.signal,
body: JSON.stringify({
firstName: 'mybj',
lastName: 'qdbk'
})
};
const promise = fetch('/login', options);
const timeoutId = setTimeout(() = >controller.abort(), 4000);
promise.then(response = >{
/* handle the response */
}).
catch(error = >console.error('timeout exceeded'));
在这里，我们使用AbortController.AbortController()构造函数创建一个AbortController对象，该对象允许我们稍后中止请求。signal是提供一种与请求进行通信或中止请求的方式的只读属性。如果服务器在不到四秒钟内没有响应，controller.abort()则将被调用，并且操作将终止。
自动转换 JSON 数据
如前所述，Axios 在发送请求时自动对数据进行字符串化（尽管你可以覆盖默认行为并定义不同的转换机制）。但是，在使用 fetch()时，必须手动执行。
// axios
axios.get('https://api.github.com/orgs/axios')
.then(response = >{
console.log(response.data);
},
error = >{
console.log(error);
});
// fetch()
fetch('https://api.github.com/orgs/axios')
.then(response = >response.json()) // one extra step
.then(data = >{
console.log(data)
}).
catch(error = >console.error(error));
数据的自动转换是一个很好的特性，但是同样，它不是fetch()不能做的事情。
Axios 的主要功能之一是它能够拦截 HTTP 请求。当我们需要检查或更改从应用程序到服务器的 HTTP 请求（反之亦然）（例如，日志记录，身份验证等）时，HTTP 拦截器会派上用场。使用拦截器，你不必为每个 HTTP 请求编写单独的代码。
在 Axios 中声明请求拦截器的方法如下：
axios.interceptors.request.use(config = >{
// log a message before any HTTP request is sent
console.log('Request was sent');
return config;
});
// sent a GET request
axios.get('https://api.github.com/users/sideshowbarker')
.then(response = >{
console.log(response.data);
});
在此代码中，该axios.interceptors.request.use()方法用于定义要在发送 HTTP 请求之前运行的代码。
默认情况下，fetch()没有提供拦截请求的方法，但要想出一个解决办法并不难。您可以覆盖全局获取方法并定义自己的截取器，如：
fetch = (originalFetch = >{
return (...arguments) = >{
const result = originalFetch.apply(this, arguments);
return result.then(console.log('Request was sent'));
};
})(fetch);
fetch('https://api.github.com/orgs/axios')
.then(response = >response.json())
.then(data = >{
console.log(data)
});
加载大型资产时，进度指示器非常有用，尤其是对于互联网速度较慢的用户而言。以前，前端开发人员使用XMLHttpRequest.onprogress实现进度指示器的回调处理程序。
Fetch() API 没有onprogress处理程序。相反，它通过响应对象的 body 属性提供ReadableStream实例。
以下示例演示了如何使用ReadableStream在图像下载期间为用户提供即时反馈：
// original code: https://github .com/AnthumChris/fetch-progress-indicators
< div id = "progress"src = "" > progress < /div>
<img id="img">
<script>
'use strict'
const element = document.getElementById('progress');
fetch('https://fetch-progress.anthum.com/30kbps/images/sunrise-baseline.jpg')
.then(response => {
if (!response.ok) {
throw Error(response.status+''+response.statusText)
}
// ensure ReadableStream is supported
if (!response.body) {
throw Error('ReadableStream not yet supported in this browser.')
}
// store the size of the entity-body, in bytes
const contentLength = response.headers.get('content - length ');
// ensure contentLength is available
if (!contentLength) {
throw Error('Content - Length response header unavailable ');
}
// parse the integer into a base-10 number
const total = parseInt(contentLength, 10);
let loaded = 0;
return new Response(
// create and return a readable stream
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 =>
// construct a blob from the data
response.blob()
)
.then(data => {
// insert the downloaded image into the page
document.getElementById('img ').src = URL.createObjectURL(data);
})
.catch(error => {
console.error(error);
})
function progress({loaded, total}) {
element.innerHTML = Math.round(loaded/total*100)+' % ';
}
</script>'
在 Axios 中实现进度指示器更简单，尤其是使用 Axios 进度条模块时。首先，您需要包含以下样式和脚本：
<link rel="stylesheet" type="text/css" rel="nofollow" href="/links?url=aHR0cHM6Ly9jZG4ucmF3Z2l0LmNvbS9yaWttbXMvcHJvZ3Jlc3MtYmFyLTQtYXhpb3MvMGEzYWNmOTIvZGlzdC9ucHJvZ3Jlc3MuY3Nz" /> <script src="https://cdn.rawgit.com/rikmms/progress-bar-4-axios/0a3acf92/dist/index.js"></script>
然后，你可以像这样实现进度条：
< img id = "img" >
<script >
loadProgressBar();
const url = 'https://fetch-progress.anthum.com/30kbps/images/sunrise-baseline.jpg';
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)
});
}
downloadFile(url);
< /script>/
此代码使用 FileReaderAPI 异步读取下载的图像。该 readAsDataURL 方法以 Base64 编码的字符串形式返回图像的数据，然后将其插入 img 标签的 src 属性中以显示图像。
为了同时发出多个请求，Axios 提供了 axios.all()方法。只需将请求数组传递给此方法，然后使用axios.spread()即可将响应数组的属性分配给单独的变量：
axios.all([
axios.get('https://api.github .com/users/iliakan'),
axios.get('https://api.github .com/users/taylorotwell')
])
.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');
}));
你也可以通过使用内置 Promise.all()方法实现相同的结果。将所有提取请求作为数组传递给 Promise.all()。接下来，使用 async 函数处理响应：
Promise.all([
fetch('https://api.github.com/users/iliakan'),
fetch('https://api.github.com/users/taylorotwell')
])
.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 在一个紧凑的包中提供了一个易于使用的 API，可以满足大多数 HTTP 通信需求。但是，如果您喜欢使用本机 api，那么没有什么可以阻止你实现 Axios 特性。
如本文所述，完全有可能使用 Web 浏览器提供的fetch()方法来重现 Axios 库的关键功能。最终，是否值得加载客户端 HTTP API 取决于您是否对使用内置 API 感到满意。
原文作者：Faraz Kelhini
原文链接：Axios or fetch(): Which should you use?
翻译：
更多 建站教程 请访问 https://www.mimiwuqi.com/webqianduan/