Promise · 前端筆記

## 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)