fetch() 与 XMLHttpRequest 的差异
fetch() 的功能与 XMLHttpRequest 基本相同，都是向服务器发出 HTTP 请求，但有三个主要的差异。
（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/ruanyf')
.then(response => response.json())
.then(json => console.log(json))
.catch(err => console.log('Request Failed', err));
上面示例中，fetch()接收到的response是一个 Stream 对象，里面的数据本例是 JSON 数据，所以使用response.json()方法，将其转为 JSON 对象。它是一个异步操作，返回一个 Promise 对象。
Promise 可以使用 await 语法改写，使得语义更清晰。
async function getJSON() {
let url = 'https://api.github.com/users/ruanyf';
try {
let response = await fetch(url);
return await response.json();
} catch (error) {
console.log('Request Failed', error);
}
}
上面示例中，await 语句必须放在 try...catch 里面，这样才能捕捉异步操作中可能发生的错误。