聊聊js中的Fetch API

3,501 阅读2分钟

这是我参与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系列基本都不会兼容它,一些手机浏览器也会报错。

微信截图_20220204204801.png