Promise（未完成） · 前端笔记

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 }); ~~~ ## 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) }) }) ~~~ # 构建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 }) ~~~ # 参考资料 [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)