ES6之FetchApi
在 ES6 之前，使用 XHL 来进行网络通信。XHL 有很多局限性，比如将许多功能封装在一个对象里，不好进行维护。还有不能使用 Promise ，它采用事件驱动的模式，类似于注册事件的方式来进行使用。所以，一般都会进行将它封装成一个函数。
FetchApi 出现之后，可以使用 Promise ，并且将各个功能都进行了拆分。它并没有和 ajax 分离，而是对 ajax 的改造。增加了很多新的功能，可以实现更大的业务需求。属于 html5 的 webapi 的一次升级。所以它只适用于浏览器环境，node 环境并不适用。这有一个例子：
document.querySelector('button').onclick = async () => {
const resp = await fetch('https://XXX.com');
try {
const data = await resp.json();
console.log(data);
} catch (err) {
console.log(err);
}
}
fetch 里请求地址是必填的，还有一些配置对象可以选填。比如可以配置 method 请求方法，headers 请求头，body 请求体的内容，mode 配置跨域请求选项，默认为 cors ，会在请求头里自动加入 origin 和 referer 为服务器去进行配置，携带凭据的 cookie 的处理，cache 缓存的配置，默认会检查缓存，也可以跳过缓存，强制刷新以及和缓存进行对比等多种选项。
当配置为 post 时，必须要配置 Content-Type 。
我们之前讲了 fetch 是一个 Promise ，它可以搭配一些新的关键字更方便地处理异步。注意：只要浏览器收到服务器返回的结果，就会进入 resolve 状态，不论返回的是404或501等状态码。只有发生网络问题，或者出现一些配置错误导致没有返回结果时，才会报错，进入 reject 状态。成功返回响应的结果，失败返回失败的原因。
返回的对象里有 ok 表示在200范围内的状态码，否则为 false ，可以用来判断请求状态，status 响应的状态码，以及可以转换为文本字符串的 text() 和转换为json的 json() 方法。
request 对象
还可以使用 new 来创建一个新的对象，这样可以方便在函数中使用，利于分成不同的模块。如果一直使用同一个请求对象，则前面的请求对象可能会影响后面，尽量每次使用全新的对象，如果无法避免，使用 clone() 方法。
let req;
function getRequest() {
if (!req) {
const url = 'https://xxx.com';
req = new Request(url, {});
}
return req.clone();//保持配置一样，但是是全新的request对象
}
response 对象
我们可以直接得到 fetch 返回的服务器对象，但如果我们需要测试一些数据，可以手动设置一些返回结果。例如：
const resp = new Response(
`[
{"id":1, "name":"北京"},
{"id":2, "name":"天津"}
]`,
{
ok: true,
status: 200,
}
);
const data = await resp.json();
console.log(data);
第一个参数是响应体，第二个参数是配置对象，可以设置需要配置的各种要求。
headers 对象
headers 对象是请求和响应时都会自动创建的一个请求头对象，当然也可以自己创建。可以 new 一个请求头对象然后往里面传入配置参数。headers 对象不可以直接打印，但可以使用里面的各种方法。
let req;
function getHeaders(headers) {
return new Headers({
a: 1,
b: 2
})
}
function printHeaders(headers) {
const datas = headers.entries();
for (const pair of datas) {
console.log(`key: ${pair[0]}，value: ${pair[1]}`);
}
}
function getRequest() {
if (!req) {
const url = 'https://study.duyiedu.com/api/citylist';
const headers = getHeaders();
req = new Request(url, { headers });
printHeaders(req.headers);
}
return req.clone();//保持配置一样，但是是全新的request对象
}
has(key) 可以检查里面是否存在 key 值，get(key) 可以得到 key 对应的值，set(key,value) 可以修改键值对，如果之前没有则直接新建一个，append(key,value) 添加键值对，如果已存在，则会继续在原有地方添加，keys() 得到所有键，values() 得到所有值，entries() 得到所有的键值对。
