Fetch API 学习笔记

霞光sunglow
392 阅读8分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

基本用法

fetch()的功能和XMLHttpRequest基本相同，但是主要有三个差异：

  • fetch()使用Promise,不使用回调，简化了写法；
  • fetch()使用模块化设计，API分散到多个对象上(Response,Request,Headers),更合理一些；相比之下XMLHttpRequest的API设计，输入，输出，状态都在同一个接口里面，容易写出混乱的代码；
  • fetch()通过数据流(Stream对象)处理数据，可以分块读取，有利于提高网站性能表现，减少内存占用，对于请求大文件或者网速慢的情形相当有用；XMLHttpRequest对象不支持数据流，所有条件必须放在缓存里面，不支持分块读取，必须等到全部拿到后，再一次吐出来；

在用法上，接受一个URL字符串，默认向网站发送GET请求，返回一个Promise对象：

fetch('https://api.github.com/users/ruanyf')
  .then(response => response.json())
  .then(json => console.log(json))
  .catch(err => console.log('Request Failed', err));
  • 接收到response是一个Stream对象，response.json()是一个异步操作，取出所有内容，并将其转为JSON对象；

Promise对象可以使用await改写，使得语义更见清晰：

async function getJSON() {
  let url = 'https://api.github.com/users/ruanyf';
  try {
    let response = await fetch(url);
    return await response.json();
  } catch (error) {
    console.log('Request Failed', error);
  }
}
  • await语句必须放在try...catch里面，这样才能捕捉异步操作中可能发生的错误；

Response对象：处理HTTP回应

Response对象的同步属性：

  • fetch()请求成功后，得到一个Response对象，它对应服务器的HTTP回应；
const response = await fetch(url)
  • Response包含的数据通过Stream接口异步读取，但是还包括一些同步属性，对应HTTP回应的标头信息(Headers),可以立即读取；
async function fetchText(){
const response = await fetch('/readme.txt')
console.log(response.status)
console.log(response.statusText) // 同步属性可以读取
}

标头属性如下：

  • Response.ok：返回布尔值，表示请求是否成功，true对应HTTP请求的状态码在200-299，false对应其它；
  • Response.status：返回HTTP对应的状态码，例如200；
  • Response.statusText：表示HTTP回应的状态信息，例如成功后，返回ok;
  • Response.url：返回请求的URL；如果存在跳转，返回的是最终的URL；
  • Response.type：返回请求的类型：
-   `basic`：普通请求，即同源请求。
-   `cors`：跨域请求。
-   `error`：网络错误，主要用于 Service Worker。
-   `opaque`：如果`fetch()`请求的`type`属性设为`no-cors`，就会返回这个值，详见请求部分。表示发出的是简单的跨域请求，类似`<form>`表单的那种跨域请求。
-   `opaqueredirect`：如果`fetch()`请求的`redirect`属性设为`manual`，就会返回这个值，详见请求部分。
  • Response.redirected：返回一个布尔值，表示是否发生过跳转；

判断请求是否成功

  • fetch()发出请求后，只有网络错误，或者无法连接时，fetch才会报错，其它情况认为请求成功；
  • 即使状态码返回4xx/5xx，fetch()也不会报错(Promise不会reject);
  • 只有通过Response.status，得到HTTP真实的状态码，才能判断请求是否成功：
async function fetchText() {
  let response = await fetch('/readme.txt');
  if (response.status >= 200 && response.status < 300) {
    return await response.text();
  } else {
    throw new Error(response.statusText);
  }
}
  • response.status只有2xx(200-299)才能认定成功，这里不用考虑网址跳转(状态码为3xx),因为fetch()会将跳转的状态码自动转为200；
  • 另一种判断方法为Response.ok是否为true:
if (response.ok) {
  // 请求成功
} else {
  // 请求失败
}

Response.Headers属性

  • 指向一个Headers对象，对应HTTP回应的所有标头；
  • Headers对象可以使用for...of进行循环遍历：
const response = await fetch(url);

for (let [key, value] of response.headers) { 
  console.log(`${key} : ${value}`);  
}

// 或者
for (let [key, value] of response.headers.entries()) { 
  console.log(`${key} : ${value}`);  
}
  • Headers对象提供了以下方法，用来操作标头：
-   `Headers.get()`：根据指定的键名，返回键值。
-   `Headers.has()`： 返回一个布尔值，表示是否包含某个标头。
-   `Headers.set()`：将指定的键名设置为新的键值，如果该键名不存在则会添加。
-   `Headers.append()`：添加标头。
-   `Headers.delete()`：删除标头。
-   `Headers.keys()`：返回一个遍历器，可以依次遍历所有键名。
-   `Headers.values()`：返回一个遍历器，可以依次遍历所有键值。
-   `Headers.entries()`：返回一个遍历器，可以依次遍历所有键值对（`[key, value]`）。
-   `Headers.forEach()`：依次遍历标头，每个标头都会执行一次参数函数。
  • 最常用的response.headers.get():
let response =  await  fetch(url);  
response.headers.get('Content-Type')
// application/json; charset=utf-8

读取内容的方法

Response对象根据服务器返回不同类型的数据，提供了不同的方法，读取方法都是异步的，返回Promise：

  • response.text()用于获取文本数据，比如HTML文件；
const response = await fetch('/users.html');
const body = await response.text();
document.body.innerHTML = body
  • response.json()用于获取服务器返回的JSON数据；
  • response.formData()主要是用在Service Worker里面，拦截用户提供的表单，修改某些数据后，再提交给服务器；
  • response.blob()用于获取二进制文件：
const response = await fetch('flower.jpg');
const myBlob = await response.blob();
const objectURL = URL.createObjectURL(myBlob);

const myImage = document.querySelector('img');
myImage.src = objectURL;
  • response.blob()用于获取流媒体文件：
const audioCtx = new window.AudioContext();
const source = audioCtx.createBufferSource();

const response = await fetch('song.ogg');
const buffer = await response.arrayBuffer();

const decodeData = await audioCtx.decodeAudioData(buffer);
source.buffer = buffer;
source.connect(audioCtx.destination);
source.loop = true; // 获取音频文件song.ogg,然后在线播放的例子

Response.clone()

  • Stream对象只能读取一次，读取完了就没有了；这就意味着五个读取方法，只能使用一个，否则报错；
let text =  await response.text();
let json =  await response.json();  // 报错
  • 该方法创建Response对象的副本，实现多次读取：
const response1 = await fetch('flowers.jpg');
const response2 = response1.clone();

const myBlob1 = await response1.blob();
const myBlob2 = await response2.blob();

image1.src = URL.createObjectURL(myBlob1);
image2.src = URL.createObjectURL(myBlob2); // 同一张照片读取两次

Response.body属性

  • 是Response对象暴露出的底层接口，返回一个ReadableStream对象，供用户操作；
  • 可以用来分块读取内容，应用之一就是显示下载的速度：
const response = await fetch('flower.jpg');
const reader = response.body.getReader();

while(true) {
  const {done, value} = await reader.read();

  if (done) {
    break;
  }

  console.log(`Received ${value.length} bytes`)
}
  • response.body.getReader()方法返回一个遍历器，这个遍历器的read()方法每次返回一个对象，表示本次读取的内容块；
  • 这个对象done属性是一个布尔值，用来判断有没有读完；value属性是一个arrayBuffer数组，表示内容块的内容，而value.length属性是当前块的大小；

fetch()的第二个参数：定制HTTP请求

  • fetch(url, optionObj):HTTP请求的方法，标头，数据体都在这个对象里面；
  • POST请求：
const response = await fetch(url, {
  method: 'POST',
  headers: {
    "Content-type": "application/x-www-form-urlencoded; charset=UTF-8",
  },
  body: 'foo=bar&lorem=ipsum', // POST请求的数据体
});

const json = await response.json();
  • 提交JSON数据：
const user =  { name:  'John', surname:  'Smith'  };
const response = await fetch('/article/fetch/post/user', {
  method: 'POST',
  headers: {
   'Content-Type': 'application/json;charset=utf-8' // 默认是text/plain;charset=UTF-8
  }, 
  body: JSON.stringify(user) 
});
  • 提交表单：
const form = document.querySelector('form');

const response = await fetch('/users', {
  method: 'POST',
  body: new FormData(form)
})

  • 文件上传：

    • 用脚本添加文件，构造出一个表单，进行上传；
const input = document.querySelector('input[type="file"]');

const data = new FormData();
data.append('file', input.files[0]);
data.append('user', 'foo');

fetch('/avatars', {
  method: 'POST',
  body: data
});

  • 直接上传二进制文件：

    • 将Blob或者arrayBuffer数据放在body属性里面；
let blob = await new Promise(resolve =>   
  canvasElem.toBlob(resolve,  'image/png')
);

let response = await fetch('/article/fetch/post/image', {
  method:  'POST',
  body: blob
});

fetch()配置对象的完整API

  • fetch()第二个参数完整的API如下：
const response = fetch(url, {
  method: "GET",
  headers: {
    "Content-Type": "text/plain;charset=UTF-8"
  },
  body: undefined,
  referrer: "about:client",
  referrerPolicy: "no-referrer-when-downgrade",
  mode: "cors", 
  credentials: "same-origin",
  cache: "default",
  redirect: "follow",
  integrity: "",
  keepalive: false,
  signal: undefined
});
  • fetch()请求的底层用的是Request对象的接口；参数完全一样，因此上面的API也是Request()的API;
  • cache：指定如何处理缓存：
-   `default`：默认值，先在缓存里面寻找匹配的请求。
-   `no-store`：直接请求远程服务器，并且不更新缓存。
-   `reload`：直接请求远程服务器，并且更新缓存。
-   `no-cache`：将服务器资源跟本地缓存进行比较，有新的版本才使用服务器资源，否则使用缓存。
-   `force-cache`：缓存优先，只有不存在缓存的情况下，才请求远程服务器。
-   `only-if-cached`：只检查缓存，如果缓存里面不存在，将返回504错误。
  • mode：指定请求的模式：
-   `cors`：默认值，允许跨域请求。
-   `same-origin`：只允许同源请求。
-   `no-cors`：请求方法只限于 GET、POST 和 HEAD，并且只能使用有限的几个简单标头，不能添加跨域的复杂标头，相当于提交表单所能发出的请求。
  • credentials：指定是否发送Cookie:
-   `same-origin`：默认值，同源请求时发送 Cookie，跨域请求时不发送。
-   `include`：不管同源请求，还是跨域请求，一律发送 Cookie。
-   `omit`：一律不发送。

  • signal：指定一个AbortSignal实例，用于取消fetch请求；

  • keepAlive：用于页面卸载时，告诉浏览器在后台保持连接，继续发送数据；

    • 一个典型的场景就是，用户离开网页时，脚本向服务器提交一些用户行为的统计信息。这是如果不用keepAlive,数据可能无法发送，因为浏览器已经把页面卸载了；
window.onunload = function() {
  fetch('/analytics', {
    method: 'POST',
    body: "statistics",
    keepalive: true
  });
};
  • redirect：指定HTTP跳转的处理方式：
-   `follow`：默认值，`fetch()`跟随 HTTP 跳转。
-   `error`：如果发生跳转，`fetch()`就报错。
-   `manual`：`fetch()`不跟随 HTTP 跳转，但是`response.url`属性会指向新的 URL，`response.redirected`属性会变为`true`，由开发者自己决定后续如何处理跳转。

  • integrity：指定一个哈希值，用于检查HTTP回应传回的数据是否等于这个预先设定的哈希值；

    • 比如下载文件时，检查文件的SHA-256哈希值是否相符，确保没有被篡改；
fetch('http://site.com/file', {
  integrity: 'sha256-abcdef'
});
  • referer：用于设定fetch()请求的referer标头；可以为任意字符串，也可设定为空字符串(即不发送referer标头)；
fetch('/page', {
  referrer: ''
});
  • refererPolicy：用于设定Referer标头的规则：
-   `no-referrer-when-downgrade`：默认值，总是发送`Referer`标头，除非从 HTTPS 页面请求 HTTP 资源时不发送。
-   `no-referrer`：不发送`Referer`标头。
-   `origin`：`Referer`标头只包含域名，不包含完整的路径。
-   `origin-when-cross-origin`：同源请求`Referer`标头包含完整的路径，跨域请求只包含域名。
-   `same-origin`：跨域请求不发送`Referer`，同源请求发送。
-   `strict-origin`：`Referer`标头只包含域名，HTTPS 页面请求 HTTP 资源时不发送`Referer`标头。
-   `strict-origin-when-cross-origin`：同源请求时`Referer`标头包含完整路径，跨域请求时只包含域名，HTTPS 页面请求 HTTP 资源时不发送该标头。
-   `unsafe-url`：不管什么情况，总是发送`Referer`标头。

取消fetch()请求

  • 如果想要中途取消，需要使用AbortController对象；
  • 1秒后自动取消请求的例子:
let controller = new AbortController();
setTimeout(() => controller.abort(), 1000);

try {
  let response = await fetch('/long-operation', {
    signal: controller.signal
  });
} catch(err) {
  if (err.name == 'AbortError') {
    console.log('Aborted!');
  } else {
    throw err;
  }
}

参考链接： www.ruanyifeng.com/blog/2020/1…

本文仅是用作学习笔记，供学习使用

avatar
文章
阅读
粉丝