fetch详细用法
fetch()
是 XMLHttpRequest 的升级版，用于在 JavaScript 脚本里面发出 HTTP 请求。
浏览器原生提供这个对象。本文详细介绍它的用法。
一、基本用法
fetch()
的功能与 XMLHttpRequest 基本相同，但有三个主要的差异。
（1）
fetch()
使用 Promise，不使用回调函数，因此大大简化了写法，写起来更简洁。
（2）
fetch()
采用模块化设计，API 分散在多个对象上（Response 对象、Request 对象、Headers 对象），更合理一些；相比之下，XMLHttpRequest 的 API 设计并不是很好，输入、输出、状态都在同一个接口管理，容易写出非常混乱的代码。
（3）
fetch()
通过数据流（Stream 对象）处理数据，可以分块读取，有利于提高网站性能表现，减少内存占用，对于请求大文件或者网速慢的场景相当有用。XMLHTTPRequest 对象不支持数据流，所有的数据必须放在缓存里，不支持分块读取，必须等待全部拿到后，再一次性吐出来。
在用法上，
fetch()
接受一个 URL 字符串作为参数，默认向该网址发出 GET 请求，返回一个 Promise 对象。它的基本用法如下。
fetch(url) .then(...) .catch(...)
下面是一个例子，从服务器获取 JSON 数据。
fetch(' https:// api.github.com/users/ru anyf ') .then(response => response.json()) .then(json => console.log(json)) .catch(err => console.log('Request Failed', err));
上面示例中，
fetch()
接收到的
response
是一个
Stream 对象
，
response.json()
是一个异步操作，取出所有内容，并将其转为 JSON 对象。
Promise 可以使用 await 语法改写，使得语义更清晰。
async function getJSON() { let url = ' https:// api.github.com/users/ru anyf '; try { let response = await fetch(url); return await response.json(); } catch (error) { console.log('Request Failed', error); } }
上面示例中，
await
语句必须放在
try...catch
里面，这样才能捕捉异步操作中可能发生的错误。
后文都采用
await
的写法，不使用
.then()
的写法。
二、Response 对象：处理 HTTP 回应
2.1 Response 对象的同步属性
fetch()
请求成功以后，得到的是一个
Response 对象
。它对应服务器的 HTTP 回应。
const response = await fetch(url);
前面说过，Response 包含的数据通过 Stream 接口异步读取，但是它还包含一些同步属性，对应 HTTP 回应的标头信息（Headers），可以立即读取。
async function fetchText() { let response = await fetch('/readme.txt'); console.log(response.status); console.log(response.statusText); }
上面示例中，
response.status
和
response.statusText
就是 Response 的同步属性，可以立即读取。
标头信息属性有下面这些。
Response.ok
Response.ok
属性返回一个布尔值，表示请求是否成功，
true
对应 HTTP 请求的状态码 200 到 299，
false
对应其他的状态码。
Response.status
Response.status
属性返回一个数字，表示 HTTP 回应的状态码（例如200，表示成功请求）。
Response.statusText
Response.statusText
属性返回一个字符串，表示 HTTP 回应的状态信息（例如请求成功以后，服务器返回"OK"）。
Response.url
Response.url
属性返回请求的 URL。如果 URL 存在跳转，该属性返回的是最终 URL。
Response.type
Response.type
属性返回请求的类型。可能的值如下：
-
basic：普通请求，即同源请求。 -
cors：跨域请求。 -
error：网络错误，主要用于 Service Worker。 -
opaque：如果fetch()请求的type属性设为no-cors，就会返回这个值，详见请求部分。表示发出的是简单的跨域请求，类似<form>表单的那种跨域请求。 -
opaqueredirect：如果fetch()请求的redirect属性设为manual，就会返回这个值，详见请求部分。
Response.redirected
Response.redirected
属性返回一个布尔值，表示请求是否发生过跳转。
2.2 判断请求是否成功
fetch()
发出请求以后，有一个很重要的注意点：只有网络错误，或者无法连接时，
fetch()
才会报错，其他情况都不会报错，而是认为请求成功。
这就是说，即使服务器返回的状态码是 4xx 或 5xx，
fetch()
也不会报错（即 Promise 不会变为
rejected
状态）。
只有通过
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 { // 请求失败 }
2.3 Response.headers 属性
Response 对象还有一个
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()：依次遍历标头，每个标头都会执行一次参数函数。
上面的有些方法可以修改标头，那是因为继承自 Headers 接口。对于 HTTP 回应来说，修改标头意义不大，况且很多标头是只读的，浏览器不允许修改。
这些方法中，最常用的是
response.headers.get()
，用于读取某个标头的值。
let response = await fetch(url); response.headers.get('Content-Type') // application/json; charset=utf-8
Headers.keys()
和
Headers.values()
方法用来分别遍历标头的键名和键值。
// 键名 for(let key of myHeaders.keys()) { console.log(key); } // 键值 for(let value of myHeaders.values()) { console.log(value); }
Headers.forEach()
方法也可以遍历所有的键值和键名。
let response = await fetch(url); response.headers.forEach( (value, key) => console.log(key, ':', value) );