https://juejin.im/post/5b31a4b7f265da595725f322 https://juejin.im/post/5b2f02cd5188252b937548ab https://github.com/xieranmaya/blog/issues/3 http://liubin.org/promises-book/ [TOC] # promise ## Promise.resolve() `Promise.resolve(value)`方法返回一個以給定值解析后的[`Promise`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise "Promise?對象用于表示一個異步操作的最終狀態（完成或失敗），以及其返回的值。")?對象。但如果這個值是個thenable（即帶有then方法），返回的promise會“跟隨”這個thenable的對象，采用它的最終狀態（指resolved/rejected/pending/settled）；如果傳入的value本身就是promise對象，則該對象作為Promise.resolve方法的返回值返回；否則以該值為成功狀態返回promise對象。 ### 參數是Promise實例 Promise.resolve將不做任何修改、原封不動地返回這個實例 ~~~ let promise = new Promise((resolve, reject) => { console.log(1) resolve('success1') }) let p1 = Promise.resolve(promise) p1.then(function (value) { console.log(value) }) ~~~ ### 參數是 thenable 對象（具有then方法的對象） Promise.resolve方法會將這個對象轉為 Promise 對象，然后就立即執行thenable對象的then方法 ~~~ let thenable = { then: function (resolve, reject) { resolve(42); } }; let p2 = Promise.resolve(thenable); p2.then(function (value) { console.log(value); // 42 }); ~~~ ### 參數不是具有then方法的對象，或根本就不是對象 Promise.resolve方法返回一個新的 Promise 對象，狀態為resolved ~~~ const p3 = Promise.resolve('p3') p3.then(function (value) { console.log(value); // p3 }); ~~~ ### 不帶有任何參數 直接返回一個resolved狀態的 Promise 對象 ~~~ const p4 = Promise.resolve() p4.then(function (value) { console.log(value); // undefined }); ~~~ <br> ## resolve(thenable) 與 resolve('non-thenable-object') thenable 指： ~~~ var thenable = { then(resolve, reject) { resolve(1) } } ~~~ `RESOLVE`指： ~~~ new Promise((resolve,reject)=>{ resolve(thenable) }) ~~~ ### `Promise.resolve('nonThenable')` 與 `RESOLVE('nonThenable')` 可相互轉化 ~~~ new Promise(resolve=>{ resolve('non-thenable') }) // 等價于 Promise.resolve('nonThenable') ~~~ ### `Promise.resolve(thenable)` 不同 `RESOLVE(thenable)` ### `RESOLVE(thenable)` 與 `RESOLVE(promise)` 可相互轉化 ~~~ new Promise((resolve, reject) => { Promise.resolve().then(() => { thenable.then(resolve) }) }) // 等價于 new Promise((resolve,reject) => { resolve(thenable) }) ~~~ ### `Promise.resolve(promise) === promise` 時 `Promise.resolve(nonPromiseThenable)` 可以轉換為 `RESOLVE(nonPromiseThenable)` ~~~ Promise.resolve(nonPromiseThenable) // 等價于 new Promise(resolve => { Promise.resolve().then(() => { nonPromiseThenable.then(resolve) }) }) ~~~ <br> <br> # 構建Promise隊列實現異步函數順序執行 ~~~ // 異步函數a var a = function () { return new Promise(function (resolve, reject) { setTimeout(function () { resolve('a') }, 1000) }) } // 異步函數b var b = function (data) { return new Promise(function (resolve, reject) { resolve(data + 'b') }) } // 異步函數c var c = function (data) { return new Promise(function (resolve, reject) { setTimeout(function () { resolve(data + 'c') }, 500) }) } ~~~ 解決方法一(使用then鏈式操作) ~~~ //鏈式調用 a() .then(function (data) { return b(data) }) .then(function (data) { return c(data) }) .then(function (data) { console.log(data)// abc }) ~~~ 方法二(構建隊列) ~~~ // 構建隊列 function queue(arr) { var sequence = Promise.resolve() arr.forEach(function (item) { sequence = sequence.then(item) }) return sequence } // 執行隊列 queue([a, b, c]) .then(data => { console.log(data)// abc }) ~~~ 方法三(使用async、await構建隊列) ~~~ async function queue(arr) { let res = null for (let promise of arr) { res = await promise(res) } return await res } queue([a, b, c]) .then(data => { console.log(data)// abc }) ~~~ <br> <br> # 參考資料 [javascript - What's the difference between resolve(thenable) and resolve('non-thenable-object')? - Stack Overflow](https://stackoverflow.com/questions/53894038/whats-the-difference-between-resolvethenable-and-resolvenon-thenable-object)