同步与异步 同步是指发起一个请求时，如果未得到请求结果，代码逻辑将会等待，直到结果出来才会继续执行之后的代码。
异步是指当发起一个请求时，不会等待请求结果，直接继续执行后面的代码。请求结果的处理逻辑，会添加一个监听，等到反馈结果出来后，在回调函数中处理对应的逻辑。
使用 Promise 模拟一个发起请求的函数，该函数在 1s 之后返回数值 30。
1 2 3 4 5 6 7 8 9 function fn ( return new Promise (function (resolve, reject ) { setTimeout (function ( resolve (30 ); }, 1000 ); }); } fn ().then ((res ) => console .log (res));
在该函数的基础上，我们可以使用 async/await 来模拟同步的效果。
1 2 3 4 5 6 7 8 9 10 var foo = async function ( var res = await fn (); console .log (res); console .log ('next code' ); }; foo ();
而异步效果则会有不同的输出
1 2 3 4 5 6 7 8 9 10 var foo = function ( fn ().then ((res ) => { console .log (res); }); console .log ('next code' ); };
ajax ajax 是网页与服务端进行数据交互的一种技术。
整个过程的简单实现如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 var url = 'http: www.demo.com/user/info' ;var result;var XHR = new XMLHttpRequest ();XHR .open ('GET' , url, true );XHR .send ();XHR .onreadystatechange = function ( if (XHR .readyState == 4 && XHR .state == 200 ) { result = XHP .reponse ; console .log (result); } };
这看起来没什么麻烦的，但是这时候，如果我们还需要做另一个 ajax 请求，这个请求的参数是从上一个 ajax 请求中获取的，那么我们就不得不如下这么做：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 var url = "http: www.demo.com/user/info" var result;var XHR = new XMLHttpRequest ()XHR .open ('GET' , url, true )XHR .send ()XHR .onreadystatechange = function ( if (XHR .readyState == 4 && XHR .state == 200 ) { result = XHP .reponse console .log (result) var url2 = 'http:xxx.yyy.com/zzz?ddd=' + result.someParams ; var XHR2 = new XMLHttpRequest (); XHR2 .open ('GET' , url, true ); XHR2 .send (); XHR2 .onreadystatechange = function ( ... } } }
当出现第三个（甚至更多）仍然依赖上一个请求的时候，代码就变成了一场灾难。
我们需要不停的嵌套回调函数。这样的灾难，我们称之为 回调地狱。
**Promise **可以帮助我们解决这个问题。
Promise 我们知道，如果要确保代码在谁之后执行，可以利用函数调用栈，将想要执行的代码放入回调函数中。
1 2 3 4 5 6 7 8 9 10 11 function want ( console .log ('这是你想要执行的代码' ); } function fn (want ) { console .log ('这里表示执行了一大堆其他代码' ); want && want (); } fn (want);
或者可以利用任务队列
1 2 3 4 5 6 7 8 9 10 11 function want ( console .log ('这是你想要执行的代码' ); } function fn (want ) { want && setTimeout (want, 0 ); console .log ('这里表示执行了一大堆其他代码' ); } fn (want);
与 setTimeout 类似， Promise 也可以认为是一种任务分发器，它将任务分发到 PromiseJobs 执行队列中。通常的用法是，我们发起一个请求，然后等待并处理请求结果。
简单用法如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 var tag = true ;var p = new Promise (function (resolve, reject ) { if (tag) { resolve (); } else { reject (); } }); p.then (function (result ) { console .log (result); }).catch (function (err ) { console .log (err); });
定义 Promise 是一个对象，保存着未来某一时刻才会执行的事件。
我们常使用 Promise 来解决反馈结果需要等待的场景。
例如
前端向服务端发送一个接口请求。请求结果不会马上返回，而是需要等待一段时间。
加载图片，需要等待一段时间
弹窗中，等待用户点击确认或者取消
基础知识 创建 Promise 实例 1 const p = new Promise ();
Promise 函数中的第一个参数为一个回调函数，我们可以称之为 executor 。通常情况下，在这个函数中，我们将会执行发起请求操作，并修改结果的状态值。
1 2 3 4 5 6 7 8 const p = new Promise ((resolve, reject ) => { if (true ) { resolve (); } if (false ) { reject (); } });
状态 状态有三种
pending：等待结果状态
fulfilled：已出结果，结果符合预期完成状态
rejected：已出结果，结果未符合预期完成状态
promise 表达的就是从发起请求开始，从没有结果 padding 到有结果 fulfilled/rejected 的一个过程。
在 executor 函数中，我们可以分别使用 resolve 与 reject 将状态修改为对应的 fulfilled 与 rejected.
resolve/reject 是 executor 函数的两个参数。他们能够将请求结果的具体数据传递出去。
Promise 实例拥有 then 方法，用来处理请求结果变为 fulfilled 状态时的逻辑。then的第一个参数也是一个回调函数，该函数的参数则是 resolve 传递出来的数据。第二个参数用来处理 rejected 状态时的逻辑。
Promise 实例拥有 catch方法，用来处理请求结果变为 rejected 时的逻辑。catch的第一个参数也是一个回调函数，该函数的参数则是 reject 传递出来的数据。
基本使用 写个例子感受一下 Promise 的用法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 function fn (num ) { return new Promise (function (resolve, reject ) { setTimeout (function ( if (typeof num == 'number' ) { resolve (num); } else { var err = num + ' is not a number' ; reject (err); } }, 2000 ); }); } fn ('abc' ) .then (function (resp ) { console .log (resp); }) .catch (function (err ) { console .log (err); }); console .log ('next code' );
then方法可以接收两个参数，第一个参数用来接收 fulfilled 状态的逻辑，第二个参数用来处理 rejected 状态的逻辑。
1 2 3 4 5 6 7 8 fn ('abc' ).then ( function (resp ) { console .log (resp); }, function (err ) { console .log (err); }, );
因此 catch 方法其实与下面的写法等价。
1 2 3 fn ('abc' ).then (null , function (err ) { console .log (er); });
then方法返回的仍然是一个 Promise 实例对象，因此 then 方法可以链式调用，通过在内部 return 的方式，能够将数据持续往后传递。
封装 ajax 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 var url = 'http://www.demo.com/user/info' ;function getJSON (url ) { return new Promise (function (resolve, reject ) { var XHR = new XMLHttpRequest (); XHR .open ('GET' , url, true ); XHR .send (); XHR .onreadystatechange = function ( if (XHR .readyState == 4 ) { if (XHR .status == 200 ) { try { var response = JSON .parse (XHR .responseText ); resolve (response); } catch (e) { reject (e); } } else { reject (new Error (XHR .statusText )); } } }; }); } getJSON (url).then (function (resp ) { console .log (resp); });
Promise.all 当有一个 ajax 请求，它的参数需要另外 2 个甚至更多请求都有了结果之后才能确定，那么这个时候，就需要 Promise.all 来帮助我们应该这个场景。
1 var p = Promise .all ([p1, p2, p3]);
Promise.all 接收一个由 Promise 对象组成的数组作为参数，当 Promise 对象状态都变成 fulfilled 的时候，才会去调用 then 方法。
如果其中一个 Promise 对象状态变成 rejected，那么 p 的状态就会变成 rejected，第一个被 reject 的实例的返回值会传递给回调函数。
如果作为参数的 Promise 实例，自己定义了 catch 方法，那么它一旦被 rejected，并不会触发 Promise.all() 的 catch() 方法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 const p5 = new Promise (function (resolve ) { resolve ('hello' ); }); const p6 = new Promise (function (resolve, reject ) { throw new Error ('报错了' ); }).catch ((e ) => e); Promise .all ([p5, p6]) .then ((res ) => console .log (res)) .catch ((e ) => console .log (e));
Promise.race 与 Promise.all 相似的是，Promise.race 也是接收一个 Promise 对象组成的数组作为参数，不同的是，只要当数组中的一个 Promise 状态变为 fulfilled 或者 rejected 时，就可以调用 .then 方法了。
1 var p = Promise .race ([p1, p2, p3]);
Promise.race 可以理解为 Promise 实例赛跑，哪个实例有了状态就返回哪个，通常用于处理规定时间内请求超时的情况。
如果 5 秒之内请求无法返回结果，变量 p 的状态就会变为 rejected，从而触发 catch 方法指定的回调函数
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 Promise .race ([ new Promise ((resolve, reject ) => { setTimeout (resolve, 10000 , 'my name is a' ); }), new Promise (function (resolve, reject ) { setTimeout (reject, 5000 , new Error ('超时了' )); }), ]) .then ((res ) => { console .log (res); }) .catch ((err ) => { console .log ('err: ' , err); alert (err); });
all 和 race 的区别 all 接受一个数组，数组成员是 promise 实例对象，如果 promise 的状态都为成功，则返回一个数组，如果其中一个失败，那么就会执行 catch
race 表示赛跑，参数和 all 一样，race 返回的是状态最先完成的 promise 的结果，不管成功还是失败
以下代码，如果 5 秒之内请求无法返回结果，promise 状态就会变为 rejected，从而触发 catch 方法指定的回调函数
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Promise .race ([ new Promise ((resolve, reject ) => { setTimeout (resolve, 10000 , 'my name is a' ); }), new Promise (function (resolve, reject ) { setTimeout (reject, 5000 , new Error ('超时了' )); }), ]) .then ((res ) => { console .log (res); }) .catch ((err ) => { console .log ('err: ' , err); });
async/await 异步问题除了使用 Promise 来解决之外，还可以使用 ES7 中新增的语法 async/await 来搞定。
在函数声明前面，加上关键字 async，这就是 async 的具体使用了。
1 2 3 4 5 6 7 8 async function fn ( return 30 ; } const fn = async ( return 30 ; };
然后我们查看一下 fn 的运行结果
1 2 3 4 5 6 7 8 console .log (fn ());Promise = { __proto__ : Promise , [[PromiseStatus ]]: 'resolved' , [[PromiseValue ]]: 30 , };
发现 fn 函数运行返回的是一个标准的 Promise 对象。也就是说 async 其实就是 Promise 的一个语法糖，目的是为了让写法更加简单。于是，我们可以使用 Promise 的相关语法来处理后续的逻辑
1 2 3 fn ().then ((res ) => { console .log (res); });
await 含义为等待，意思就是需要等待 await 后面函数运行完了，并且有了返回结果，才能继续执行下面的代码。这正是同步的效果。
需要注意的是，await 关键字只能在 async 函数中使用。并且 await 后面的函数运行后必须返回一个 Promise 对象才能实现同步的效果。
当我们使用一个变量去接收 await 的返回值时，该返回值为 Promise 中 resolve 传递出来的值。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 function fn ( return new Promise ((resolve, reject ) => { setTimeout (resolve, 1000 , 30 ); }); } const foo = async ( const t = await fn (); console .log ('t' , t); console .log ('next code' ); }; foo ();
从例子中我们可以看出，在 async 函数中，遇到 await 时，就会等待 await 后面的函数运行完毕，而不会直接执行 next code。
如果我们直接使用 then 方法，就不得不把后续的逻辑写在 then 方法中。
1 2 3 4 5 6 7 const foo = ( return fn ().then ((t ) => { console .log ('t: ' , t); console .log ('next doce' ); }); }; foo ();
很明显，如果使用 async/await 的话，代码会更简洁，逻辑也更清晰。
异常处理 在 Promise 中，我们使用 catch 方法来捕获异常，而不是使用 then 的第二个参数。因为：
更接近同步的语法（try/catch）
then 中的错误也会被 catch 捕获
使用 then 的第二个参数，并不能捕获到第一个参数内部抛出的错误
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 const p3 = new Promise (function (resolve, reject ) { setTimeout (() => { resolve (123 ); }, 1000 ); }); p3.then ( (result ) => { console .log (result); throw new Error ('is err' ); }, (error ) => { console .log ('error' , error); }, );
使用 catch ，则可以捕获到上一个 then 内部抛出的错误
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 const p3 = new Promise (function (resolve, reject ) { setTimeout (() => { resolve (123 ); }, 1000 ); }); p3.then ((result ) => { console .log (result); throw new Error ('is err' ); }).catch ((error ) => { console .log ('error' , error); });
而使用 async 时，我们使用 try/catch 来捕获异常。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function fn ( return new Promise ((resolve, reject ) => { setTimeout (() => { reject ('some error' ); }, 1000 ); }); } const foo = async ( try { await fn (); } catch (e) { console .log ('e: ' , e); } }; foo ();
如果有多个 await ，只会捕获到第一个异常
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 function fn1 ( return new Promise ((resolve, reject ) => { setTimeout (() => { reject ('some error fn1' ); }, 1000 ); }); } function fn2 ( return new Promise ((resolve, reject ) => { setTimeout (() => { reject ('some error fn2' ); }, 1000 ); }); } const foo = async ( try { await fn1 (); await fn2 (); } catch (e) { console .log ('e: ' , e); } }; foo ();
封装 如何封装与使用息息相关。
加载图片 封装一个加载图片的函数，Promise 的使用如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 function imageLoad (url ) { const img = new Image (); img.src = url; return new Promise (function (resolve, reject ) { img.onload = function ( resolve ('图片加载成功' ); }; img.onerror = function ( reject ('图片加载失败' ); }; }); }
然后我们就可以使用 imageLoad 来执行图片加载完成之后的逻辑。
1 2 3 4 5 6 7 imageLoad ('xxx.png' ) .then ((res ) => { alert (res); }) .catch ((err ) => { alert (err); });
封装的核心关键是： Promise 的最终目的是，为了执行 then 中的回调函数，我们称它为 then_cb。
所以在封装的时候，我们就应该思考如何在 Promise 内部，让 then_cb执行。
简易版 MyPromise 显而易见，Promise 包含原型方法 then，构造函数需要传递回调函数 executor，该回调函数包含两个参数，resolve 与 reject 。
根据这些特点，我们得出：
1 2 3 4 5 6 7 8 9 10 11 12 class MyPromise { construcotr (executor) { executor (this ._resolve .bind (this ), this ._reject .bind (this ) } _resolve (value) {} _reject () {} then (then_cb) {} }
目的是为了调用 then_cb ，通过封装加载图片可以发现，调用 resolve 时，then_cb 才会执行，所以可以得出结论， then_cb 的执行需要被 resolve 触发 。
我们可以通过保存 then_cb 引用的方式来解决。所以代码就变成了这样：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 class MyPromise { constructor (executor ) { this .thenCallback = null ; executor (this ._resolve .bind (this ), this ._reject .bind (this )); } _resolve (value ) { this .thenCallback (value); } _reject (value ) {} then (then_cb ) { this .thenCallback = then_cb; } }
同理，再解决 catch 回调函数的执行问题
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 class MyPromise { constructor (executor ) { this .thenCallback = null ; this .rejectCallback = null ; executor (this ._resolve .bind (this ), this ._reject .bind (this )); } _resolve (value ) { this .thenCallback (value); } _reject (value ) { this .rejectCallback (value); } then (then_cb, onRejected ) { this .thenCallback = then_cb; this .rejectCallback = onRejected; } catch (onRejected) { this .then (null , onRejected); } }
如果不追求别的特性，我们的 Promise 对象就已经封装好了，并且可以使用了。
1 2 3 4 5 6 7 8 9 10 11 12 const p = new MyPromise ((resolve, reject ) => { setTimeout (() => { reject ('some err' ); }, 1000 ); }); p.catch ((err ) => [console .log ('err' , err)]);
再模拟将 then_cb 放入队列中执行，简单调整如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 class MyPromise { constructor (executor ) { this .thenCallback = null ; this .rejectCallback = null ; executor (this ._resolve .bind (this ), this ._reject .bind (this )); } _resolve (value ) { setTimeout (() => { this .thenCallback (value); }, 0 ); } _reject (value ) { setTimeout (() => { this .rejectCallback (value); }, 0 ); } then (then_cb, onRejected ) { this .thenCallback = then_cb; this .rejectCallback = onRejected; } catch (onRejected) { this .then (null , onRejected); } }
加入队列机制后，就可以在 executor 中直接执行 resolve ，否则会报错 this.thenCallback is not a function
1 2 3 4 5 6 7 const p = new MyPromise ((resolve, reject ) => { resolve ('123' ); }); p.then ((res ) => { console .log (res); });
Promise.all Promise.all 返回的是一个数组，我们要将参数 array 内的每个 Promise 的执行结果放在一个数组 result 里，并且 result 数组成员的顺序要与传入时的 array 成员顺序保持一一对应。
实现 Promise.all 的重点在于对 all 参数内 Promise 实例全部执行完毕时机的判断。
因为 Promise 是异步的，我们不能保证 Promise 实例完成的时机与数组顺序一样。也就是说我们不能使用数组的 length 属性来表达 Promise 全都执行完毕。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 const delay = (data ) => { return new Promise ((resolve, reject ) => { setTimeout (() => { resolve (data); }, Math .random () * 1000 ); }); }; Promise ._all = (array ) => { return new Promise ((resolve, reject ) => { let count = 0 ; const result = []; for (let i = 0 , len = array.length ; i < len; i++) { array[i].then ((data ) => { result[i] = data; count++; if (result.length === array.length ) { resolve (result); } }, reject); } }); }; const p1 = delay (1 );const p2 = delay (2 );const p3 = delay (3 );Promise ._all ([delay (2 ), delay (1 ), delay (3 )]).then ( (res ) => { console .log ('res: ' , res); }, (err ) => { console .log ('err: ' , err); }, );
上面的代码，如果最后一个 Promise 先执行完毕，赋值时 result[2] = data，那么 result.length等于 3， 满足 result.length === array.length的判断条件，就会提前执行 resolve 。
所以，我们可以参考垃圾回收机制的引用计数法，在内部添加一个计数变量 count 来判断是否所有 Promise 都已执行完毕。当 count 等于传入的 Promise 数组长度时，表示所有 Promise 都有了结果，然后我们再执行 resolve 将结果传递出去。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 Promise ._all = (array ) => { return new Promise ((resolve, reject ) => { let count = 0 ; const result = []; for (let i = 0 , len = array.length ; i < len; i++) { array[i].then ((data ) => { result[i] = data; count++; if (count === array.length ) { resolve (result); } }, reject); } }); };
