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写法

先把调用改写一下 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