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 对象。它的基本用法如下。

1. fetch(url)
2.   .then(...)
3.   .catch(...)

复制代码

下面是一个例子，从服务器获取 JSON 数据。

1. fetch('https://api.github.com/users/ruanyf')
2.   .then(response => response.json())
3.   .then(json => console.log(json))
4.   .catch(err => console.log('Request Failed', err));

复制代码

上面示例中，fetch()接收到的response是一个 Stream 对象，内里的数据本例是 JSON 数据，所以利用response.json()方法，将其转为 JSON 对象。它是一个异步操纵，返回一个 Promise 对象。
Promise 可以利用 await 语法改写，使得语义更清楚。

1. async function getJSON() {
2.   let url = 'https://api.github.com/users/ruanyf';
3.   try {
4.     let response = await fetch(url);
5.     return await response.json();
6.   } catch (error) {
7.     console.log('Request Failed', error);
8.   }
9. }

复制代码

上面示例中，await 语句必须放在 try...catch 内里，如许才气捕获异步操纵中大概发生的错误。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。