Fetch

Promise fetch(url: RequestInfo, init?: RequestInit);

参数详解

url：定义要获取的资源地址：
- 一个 String 字符串，包含要获取资源的 URL。
- 一个 Request 对象。
init：[可选] 一个配置项对象，包括所有对请求的设置。可选的参数有：
- body : 请求的 body 信息：可能是一个 Blob 、BufferSource 、FormData 、URLSearchParams 或者 String 对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息。
- cache: 请求的 cache 模式: default 、 no-store 、 reload 、 no-cache 、 force-cache 或者 only-if-cached 。
- credentials : 请求的 credentials ，如 omit 、same-origin 或者 include 。为了在当前域名内自动发送 cookie ，必须提供这个选项，从 Chrome 50 开始，这个属性也可以接受 FederatedCredential 实例或是一个 PasswordCredential 实例。
- headers?: {[key: string]: string}: 请求的头信息，形式为 Headers 的对象或包含 ByteString 值的对象字面量。
- integrity?: integrity : 包括请求的 subresource integrity 值（例如： sha256-781dc06a19ebd98a3dfa1cb6a5e9e0a6c37b7bd8c2ded54f57a8685ff8b92d2a=）。
- keepalive?: boolean : 生命周期
- method : 请求使用的方法，如 GET 、 POST 、 PATCH 、PUT 、 DELETE 等。
- mode : 请求的模式，如 navigate、 same-origin 、cors 、 no-cors 。
- referrer: 一个 USVString 可以是 no-referrer 、client 或一个 URL 。默认是 client 。
- referrerPolicy : 指定 referer HTTP header 的值，可选值[ no-referrer 、 no-referrer-when-downgrade 、 origin 、 origin-when-cross-origin 、 unsafe-url ]。
- redirect: 可用的 redirect 模式: follow (自动重定向), error (如果产生重定向将自动终止并且抛出一个错误), 或者 manual (手动处理重定向). 在 Chrome 中，Chrome 47 之前的默认值是 follow ，从 Chrome 47 开始是 manual 。
- signal: 属性指定一个 AbortSignal 实例，用于取消 fetch() 请求，详见下一节。

fetch 例子
fetch(url, {
    body: JSON.stringify(data), // 数据类型要和 'Content-Type' header保持一致
    cache: 'no-cache', // default, no-cache, reload, force-cache 或者 only-if-cached
    credentials: 'same-origin', // omit、same-origin 或者 include
    headers: {
      'user-agent': 'Mozilla/4.0 MDN Example',
      'content-type': 'application/json'
    },
    method: 'POST', // GET, POST, PUT, PATCH, DELETE 等.
    mode: 'cors', // no-cors, cors 或 same-origin
    redirect: 'follow', // manual, follow 或 error
    referrer: 'no-referrer', // client 或 no-referrer
  })
  .then(response => response.json()) // 将数据解析成JSON
  .catch(e => {//捕获异常
    console.log(e.toString());
  });

请求错误与异常处理

如果遇到网络故障，fetch() promise 将会调用 reject ，带上一个 TypeError 对象。

注意

需要注意的是：一次请求没有调用 reject 并不代表请求就一定成功了，通常情况我们需要在 resolved 的情况，再判断 Response.ok 是不是为 true。类似以下代码：

const url = `https://api.devio.org/uapi/test/test?requestPrams=aa`;
fetch(url)
    .then(response => {
        if (!response.ok) {
            return response.text();//将response中的data转成String
        }
        throw new Error('Network response was not ok.');
    })
    .then(responseText => {
         console.log(responseText);
    })
    .catch(e => {//捕获异常
        console.log(e.toString());
    });

Fetch

请求错误与异常处理​

请求错误与异常处理