## Promise ### 初体验 https://www.bilibili.com/video/BV1GA411x7z1/?p=3&spm_id_from=pageDriver&vd_source=8fc0f668e63ab312d59a3089f3ca7a81 Promise 可以包裹一个异步函数（一段异步代码）。 传统回调的方式是，先设置回调函数，在执行异步代码。Promise 是先设置异步代码，再设置回调代码，再执行异步。 ---- ```javascript function _ajax1(c) { setTimeout(function() { c(); }, 1000); } function _ajax2(c) { setTimeout(function() { c(); }, 1000); } // 传统回调 _ajax1(function() { _ajax2(function() { c3(); }); }); // ==================================== function c3(a3) { console.log('c3', 'a3', a3); } // p1 done => c1 function ajax1() { // p1 return new P(function(resolve, reject) { setTimeout(function() { console.log('c1'); resolve('xiaobu', '瓜子'); }, 1000); }); } // c1: p2 function ajax2(a2, a22) { // p2 console.log('a2:', a2, 'a22:', a22); return new P(function(resolve, reject) { setTimeout(function() { console.log('c2'); resolve('xixi'); }, 1000); }); } function c1(a2, a22) { return ajax2(a2, a22); } function c2(a3) { return c3(a3); } function P(magic) { // private var state = 0; // 0-pending, 1-fulfilled, 2-rejected this.getState = function () { return state; }; this.setState = function (v) { state = v; return this; }; magic(this.buildResolve(), null); } P.prototype = { prop: null, childProp: null, callbacks: [], catchCallbacks: [], init: function() { }, buildResolve: function () { var p = this; return function resolve() { var args = arguments; setTimeout(function () { p.setState(1).execNextCallback.apply(p, args); }, 0); } }, then: function(c) { this.callbacks.push(c); return this; }, catch: function (c) { this.catchCallbacks.push(c); return this; }, getNextCallback: function() { var that = this; if (that.callbacks.length === 0 && this.prop !== null) { // console.log('ss') that = this.prop; } if (that.callbacks.length === 0) { // console.log('aa', that) return null; } return [that, that.callbacks.shift()]; }, execNextCallback: function() { var ret = this.getNextCallback(); // console.log(ret, this) if (ret === null) { return; } var res = ret[1].apply(ret[0], arguments); // console.log(res, res instanceof P, this) if (res instanceof P) { res.bingProp(this); } }, bingProp: function(p) { this.prop = p; p.childProp = this; } }; // Promise 形式 var a = ajax1() // p1 .then(c1) // p2 .then(c2); // p1 => c1 // p2 => c2 // p3 => c3 ``` ~~~ c1 xiaobu a22: 瓜子 c2 c3 a3 xixi ~~~ ---- ```javascript // 怎么在 for 中把 值 保存到上下文 // 无法在 setTimeout 中保存 上下文 // https://blog.csdn.net/weixin_34194317/article/details/88860643 // var buildResolve = (function(p) { // return function resolve() { // return p.execNextCallback(); // } // })(this); ``` ---- [Promise 对象 - ECMAScript 6入门](https://es6.ruanyifeng.com/#docs/promise) [Promises/A+](https://promisesaplus.com/) > 在这里，“平台代码”指的是引擎、环境和承诺实现代码。在实践中，这个需求确保在调用事件循环之后，使用一个新的堆栈，onFulfilled 和 onRejected 异步执行。这可以通过“宏任务”机制(如 setTimeout 或 setImmediate)实现，也可以通过“微任务”机制(如 MutationObserver 或 process.nextTick)实现。 [使用Jscex改善JavaScript异步编程体验_Java_赵劼_InfoQ精选文章](https://www.infoq.cn/article/jscex-javascript-asynchronous-programming/) [专访Wind.js作者老赵（上）：缘由、思路及发展_JavaScript_郭晓刚_InfoQ精选文章](https://www.infoq.cn/news/interview-jscex-author-part-1?utm_source=related_read_bottom&utm_medium=article)