企业网站内容管理,互联网+体育消费,一级域名的网站怎么做,wordpress熊掌号展示fetch() 与 XMLHttpRequest 的差异
fetch() 的功能与 XMLHttpRequest 基本相同#xff0c;都是向服务器发出 HTTP 请求#xff0c;但有三个主要的差异。
#xff08;1#xff09;fetch()使用 Promise#xff0c;不使用回调函数#xff0c;因此大大简化了写法#xff0…fetch() 与 XMLHttpRequest 的差异
fetch() 的功能与 XMLHttpRequest 基本相同都是向服务器发出 HTTP 请求但有三个主要的差异。
1fetch()使用 Promise不使用回调函数因此大大简化了写法写起来更简洁。
2fetch() 采用模块化设计API 分散在多个对象上Response 对象、Request 对象、Headers 对象更合理一些相比之下XMLHttpRequest 的 API 设计并不是很好输入、输出、状态都在同一个接口管理容易写出非常混乱的代码。
3fetch() 通过数据流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 里面这样才能捕捉异步操作中可能发生的错误。
