这是我参与2022首次更文挑战的第19天,活动详情查看:2022首次更文挑战
介绍
众所周知,Fetch API 是代替XMLHttpRequest
,提供了一个更理想的访问和操纵 HTTP 管道的方案。本期将会带大家了解一下它是如何使用的还有关于它的优缺点。
概念
Fetch API 是一个 JavaScript 接口用于访问和操作HTTP管道的零件。可以理解为 XMLHttpRequest 的升级版,它也是提供了一个获取资源的接口(包括跨域请求)。
使用
基本用法
fetch(url,{
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
}).then(res => {
return res.json();
}, err => console.log(err))
.then(data => {
console.log(data)
}, err => console.log(err))
async&await用法
(async function () {
try {
let res = await fetch(url,{
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
});
let data = await res.json();
console.log(data)
} catch (err) { }
})()
通过上面两种形式的使用方法,我们可以通过fetch()
将请求回来的数据转化成json格式,但它的功能不仅仅只有这些,那么还可以转化成什么格式呢?
.json()
:JSON和数组.arraryBuffer()
:二进制的数组.blob()
:二进制大对象(来源于数据库,不需要解析,多用于多媒体文件).text()
:文本
除此之外,还有很多的玩法:
上传多文件
const formData = new FormData();
const filesInput = document.querySelector('input[type="file"][multiple]');
for (let i = 0; i < filesInput.files.length; ++i) {
formData.append(`file_${i}`, filesInput.files[i]);
}
fetch(url, {
method: 'POST',
body: formData,
})
.then(res => res.json())
.then(res => {
console.log('success:', res);
})
.catch(err => {
console.error('error:', err);
});
这里可以看出FormData依然可以和fetch()
进行完美的配合,而且上传成功还是失败也是对比XMLHttpRequest
更是一目了然。
自定义请求
// 设置Headers
const myHeaders = new Headers({
"Content-Type": "text/plain",
});
myHeaders.append("X-Custom-Header","ProcessThisImmediately")
// 设置Request
const myRequest = new Request("juejin.png", {
method: 'GET',
headers: myHeaders,
})
// 发送请求
fetch(myRequest)
.then(response => response.blob())
.then(myBlob => {
myImage.src = URL.createObjectURL(myBlob);
});
可以看出fetch()
可以把Request 、Headers 等组合起来使用,而这些对象本身也可以进行增删改,使用起来十分的灵活。
优点
fetch()
使用Promise的方式,而不使用回调函数,可以避免回调地狱问题。fetch()
通过数据流(Stream 对象)处理数据,可以分块读取,有利于提高网站性能表现,减少内存占用,对于请求大文件或者网速慢的场景相当有用。fetch()
采用模块化设计,API 分散在多个对象上(Response 对象、Request 对象、Headers 对象)。
缺点
虽然它优化了XMLHttpRequest
很多的行为和结构,是替代方案。但是,问题还是由于比较新,出现了不少兼容问题,比如,IE系列基本都不会兼容它,一些手机浏览器也会报错。