聊聊js中的Fetch API

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