fetch() 与 XMLHttpRequest 的差异

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 里面，这样才能捕捉异步操作中可能发生的错误。