这是我参与8月更文挑战的第6天，活动详情查看：8月更文挑战
fetch()是 XMLHttpRequest 的升级版，用于在 JavaScript 脚本里面发出 HTTP 请求
本文介绍一下它的用法
基础请求方式
fetch()接受一个 URL 字符串作为参数，默认向这个参数地址发出 GET 请求，返回一个 Promise 对象
// 从服务器获取 JSON 数据
fetch('https://api.xxx')
.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.xxx';
try {
let response = await fetch(url);
return await response.json();
} catch (error) {
console.log('Request Failed', error);
}
}
上面示例中，await语句必须放在try...catch里面，这样才能捕捉异步操作中可能发生的错误
后面都采用await的写法，不使用.then()的写法
响应成功或失败
Response.status属性返回一个数字，表示 HTTP 回应的状态码（例如200，表示成功请求）
fetch()发出请求以后，有一个很重要的注意点：只有网络错误，或者无法连接时，fetch()才会报错，其他情况都不会报错，而是认为请求成功
这就是说，即使服务器返回的状态码是 4xx 或 5xx，fetch()也不会报错（即 Promise 不会变为 rejected状态）
只有通过Response.status属性，得到 HTTP 回应的真实状态码，才能判断请求是否成功
async function fetchText() {
let response = await fetch('https://api.xxx');
if (response.status == 200) {
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 {
// 请求失败
}
其他请求参数
fetch()的第一个参数是 URL，还可以接受第二个参数，作为配置对象，定制发出的 HTTP 请求。
fetch(url, optionObj)
optionObj 是一个配置项对象，包括所有对请求的设置
可选参数示例:
{
//请求的 body 信息 //如：Blob、BufferSource、FormData、URLSearchParams 或者 USVString 对象
body: JSON.stringify(data), //这里必须匹配 'Content-Type' //注意 GET 或 HEAD 方法的请求不能包含 body 信息。
//请求的 cache 模式。//如：default, no-cache, reload, force-cache, only-if-cached
cache: 'no-cache',
//请求的 credentials。//包括：omit、same-origin，include
credentials: 'same-origin',
//请求的头信息
headers: {
'user-agent': 'Mozilla/4.0 MDN Example',
'content-type': 'application/json'
},
//请求使用的方法 //如：GET, POST, PUT, DELETE等
method: 'POST',
//请求的模式 //如 cors、 no-cors 或者 same-origin。
mode: 'cors',
//重定向模式 //如 follow|自动重定向, error|如果产生重定向将自动终止并且抛出一个错误, manual|手动处理重定向
redirect: 'follow',
//USVString //如 no-referrer、client或一个 URL。默认是 client
referrer: 'no-referrer',
}
这里需要注意的是，有些标头不能通过headers属性设置，比如Content-Length、Cookie、Host等等。它们是由浏览器自动生成，无法修改
