Fetch学习笔记

栏目: jQuery · 发布时间: 6年前

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


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

查看所有标签

猜你喜欢:

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

XMPP

XMPP

Peter Saint-Andre、Kevin Smith、Remko TronCon / O'Reilly Media / 2009-5-4 / USD 39.99

This practical book provides everything you need to know about the Extensible Messaging and Presence Protocol (XMPP). This open technology for real-time communication is used in many diverse applicati......一起来看看 《XMPP》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

MD5 加密
MD5 加密

MD5 加密工具