Fetch学习笔记

内容简介：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这篇博客

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网

查看所有标签

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。