内容简介：Fetch学习笔记
与XMLHttpRequest(XHR)类似，fetch()方法允许你发出AJAX请求。区别在于Fetch API使用Promise，因此是一种简洁明了的API，比XMLHttpRequest更加简单易用。
如果还不了解 Promise
，可以移步:point_right:浅谈Promise这篇博客
比较XMLHttpRequest（传统Ajax）
创建步骤：
* 创建`XMLHttpRequest`对象，也就是创建一个异步调用对象 * 创建一个新的`HTTP`请求，并指定该`HTTP`请求的方法、`URL`及验证信息 * 发送`HTTP`请求 * 处理响应，获取异步调用返回的数据
可以发现，主要的不同点在于：传统Ajax使用事件处理器，而不是Promise对象，并且请求的发起完全依赖于xhr对象所提供的方法。
想详细了解 Ajax的封装可以查看我上一篇博客，一步步教你 Ajax的封装:point_right:Ajax学习笔记
fetch语法
fetch(url)
.then(function(response){
return response.json();
})
.then(function(data){
console.log(data);
})
.catch(function(e){
console.log("Oops, error");
});
使用 ES6 的 箭头函数
fetch(url)
.then(response=> response.json())
.then(data=> console.log(data))
.catch(e=> console.log("Oops, error", e))
```
使用 `async/await` 来做最终优化：
```javascript
(async function(){
try {
let response = await fetch(url);
let data = response.json();
console.log(data);
} catch(e) {
console.log("Oops, error", e);
}
})();
使用 await 后， 写异步代码就像写同步代码一样爽 。await 后面可以跟 Promise 对象，表示等待 Promise resolve() 才会继续向下执行，如果 Promise 被 reject() 或抛出异常则会被外面的 try…catch 捕获。
如果还不了解 async/await
，可以移步:point_right:es6Async这篇博客
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
