Javascript 复盘深入解读之—异步与Promise

前言：一切从封装角度理解
1.封装异步的DOM操作；
2.ajax的封装来理解promise
所谓初级程序员用框架，中级程序员学封装，高级程序员造轮子
所以开始把一起你觉得复杂的代码都封装起来，然后造出你的轮子把

1.Promise 是什么

1.官方解读

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理（规范命名）和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。

所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。

2.解决问题的角度解读

前端要开始用到它了：当处理异步任务中，异步结果只有一个个，我们可以用一个参数的回调函数接受；那么当异步的结果有2个比如成功和失败时，我们有如下解决方案：

1.回调接受2个参数
2.用2个回调函数（也可以是对象形式的，对象的2个key分别表示成功和失败）

于是找到后台中1976就出现的Promise，解决了如上方案的一些不足点（Promise的改进点）：

1.不规范，命名五花八门，success+error success+fail done+fail等都在表示成功和失败 而且成功和失败的前后顺序不一定一样
2.容易出现回调地狱，使代码可读性变差
3.很难进行错误处理。

并由此制定了Promises/A+规范

2.以AJAX的封装为例解释Promise的用法

ajax=(method,url,options)=>{
	const {success,fail}=options //es6析构赋值
	var request= new XMLHTTPRequest();
	request.open("method", "url"); //第三个参数为ture或者默认为ture表示异步
	request.onreadystatechange =()=>{
	    if(request.readystate == 4&&xhr.status == 200){
	　　　　　console.log(xhr.responseText)
	　　}
	}
	request.send(null);
}
ajax('get','/xxx',{success:(response){},fail:(request,status)=>{}})
//左边function缩写，右边箭头函数

Promise说这也太傻了吧！我们来改成Promise写法

1. 先把调用改写一下

ajax('get','/xxx',{success:(response){},fail:(request,status)=>{}})
//改成
ajax('get','/xxx').then(9response)=>{},(request,status)=>{}})
//虽也是回调
//但是不需要记success和fail了
//then的第一个参数就是success，第二个是fail

请问ajax返回了啥——一个含有.then()方法的对象
那么我们如何得到这个含有.then()的对象呢——那就要改造ajax的源码了，如下：

ajax=(method,url,options)=>{
	return new Promise((resolve,reject))=>{
		const {success,fail}=options
		var request= new XMLHTTPRequest();
		request.open("method", "url");
		request.onreadystatechange =()=>{
		if(request.readyState===4){
			 if(request.status < 400){
	　　　　　	resolve.call(null,request.response)
	　　		}else if(request.status >= 400){
	　　			reject.call(null,request)
	　　		}
	　　	}
	request.send(null);
	}

小结

第一步：

• return new Promise((resolve,reject))=>{…}
• 任务成功则调用resolve(resule)
• 任务失败则调用reject(error)
• resolve和reject会再去调用成功和失败函数

第二步：

• 使用.then(success,fail)传入成功和失败函数

其他Promise的高级用法

缺陷

以上Promise的封装仍然存在缺陷，
1.当我们需要用post上传数据时，request.send(null);传入的参数为空

request.send(null)

2.还不能设置请求头比如

request.setRequestHeader(key,value)

常用的ajax库

1.jQuery.ajax 来支持更多形式的参数和其他超多的功能

但是 ，现在的前端都在用下面的axios，所以忘掉jQuery.ajax吧

2.axios，这个库比jQuery逼格更高 更简单

具体axios的功能介绍可以参考借鉴我的文章：ajax小抄本儿

参考阅读：

阮一峰的es6教程
bluebirdjs