什么是fetch

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2020/01/29/%E4%BB%80%E4%B9%88%E6%98%AFfetch/

摘要

本文主要讲述了：

作用
参数
返回值类型
Response
polyfill

正文

作用

类似XMLHttpRequest，用于请求网络资源

语法：const fetchResponsePromise = fetch(resource [, init])

示例：

fetch('./js/fruits.json')
  .then(function (response) {
    if (response.ok) {
      return response.json();
    } else {
      console.log(response);
      throw new Error('Request Error');
    }
  })
  .then(function (data) {
    console.log(data);
  });

参数

resource

网络资源的 URL
网络资源的Request实例

init

初始化模板

值类型：Object
是否必填：否

init.credentials

默认情况下，浏览器不会为 Ajax 跨源请求提供 cookie，也不会接受 Ajax 跨源请求中服务器端要求写入的 cookie。除非将init对象的credentials属性设置为include

返回值类型

Promise实例

若请求成功，Promise实例将resolve一个Response实例

网络中断（非局域网）：reject
超链接无效：reject
跨源通信：reject

注意：

HTTP 状态码为错误状态码时并不会reject

Response

原型方法

Response.prototype.arrayBuffer()

将响应体解析为ArrayBuffer实例

Response.prototype.text()

将响应体解析为字符串

注：Response.prototype.text()默认响应体的字符编码方案为UTF-8

如果响应体使用的是其他的字符编码方案，可以使用Response.prototype.arrayBuffer()

示例：gbk

fetch('about.html')
  .then(function (response) {
    if (response.ok) {
      return response.arrayBuffer();
    } else {
      console.log(response);
      throw new Error('Request Error');
    }
  })
  .then(function (buffer) {
    const text = new TextDecoder('gbk').decode(buffer);
    console.log(text);
  });