promiseresult（promise怎么实现异步）

本文目录

• promise怎么实现异步
• 实现promise.all方法
• js promise 中的then的值能直接返回出来吗
• 如何手写一个Promise

promise怎么实现异步

搜索博文/帖子/用户
登录
理解promise，实现异步的同步编写 原创
2018-04-08 12:07:55
1点赞

zimushuang
码龄9年
关注
MND解释：Promise 对象用于表示一个异步操作的最终状态（完成或失败），以及其返回的值。
我的理解就是promise是一种完成异步功能并检查状态触发回调的机制。
1、两种常用创建方式：
声明一个变量：（声明一个promise类型的对象）
const myFirstPromise = new Promise((resolve, reject) =》 {
// ?做一些异步操作，最终会调用下面两者之一:
//
resolve(result); // fulfilled
// ?或
reject(error); // rejected
});
声明一个函数：（返回一个promise类型的对象）
function myAsyncFunction(url) {
return new Promise((resolve, reject) =》 {
const xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.onload = () =》 resolve(xhr.responseText);
xhr.onerror = () =》 reject(xhr.statusText);
xhr.send();
});
};
显而易见，如果需要给异步过程传递函数，当然要优先选择第2种方式了。
2、promise的状态
promise的中文释义为承诺，对象如其名，在未来的某一个时刻将会有状态变化进而有真实的结果。当代码执行到变量myFirstPromise或调用函数myAsyncFunction时，得到的都应该是一个空值或空对象，同时会有一个new promise()对象被构建。此时的promise对象处于一种名为pending状态，表示为初始状态。此时promise开始执行。
new promise( /*...code...*/ ) 中的code只是相当于一个参数被传递给promise对象，和以往的函数调用传参的不同在于：code是函数类型的参数 (resolve, rejec
义母李婆婆不由得笑道：“你这孩子，给娘讲什么笑话，尽哄我开心。等下娘就去刘氏那里先借些米面回来，咱娘儿俩先凑合这一顿。”
看到义母不信，范宇只得劝道：“娘放心和孩儿去镇上，就去那家太白楼，保证娘吃的满意。”
听着范宇不象是在说假话，李婆婆不由得皱眉道：“儿啊，你是不是身上还有能典当的值钱东西？可不要大手大脚的败家，等过些日子，娘给你相个媳妇，你留着过日子岂不是好。什么太白楼，娘是坚决不会去的。”
范宇这时饿的难受，可是看到义母又不肯走，只能耐心解释。
“娘，你可放心吧，孩儿被范连从家中赶出来，现在身无分文，哪有半点值钱的东西。就是身上这身衣服，当了也就没得穿了。我自有本事，不让娘失望就是。”范宇拉着李婆婆的袖子道。
“娘可是打小就看着你长大的，除了会收拾田地，你又有什么挣钱的本事了？”李婆婆好奇的问道。
范宇见义母态度松动，便呵呵一笑道：“现在先不说，等到了太白楼，娘自然就知道。”
李婆婆的脸色一肃道：“你莫不是想要带为娘去吃霸王餐不成？娘劝你不要走这等歪门斜道，而且娘也舍不下这脸面。若是坏了名声，娘可比死还难受，你也不能做此等下作事！”
“放心吧娘。”范宇上前拉着义母李婆婆的手臂道：“孩儿可丢不起这个人，到了太白楼，你自然会知道。”
有心死活也不肯去，可是李婆婆却又真怕范宇去太白楼碰瓷吃白食。犹豫之下，还是决定跟着范宇一同前往。若是这个义子真要做些没

实现promise.all方法

1- Promise.all 的用法

逆向的去实现功能，最关键的前提是准确了解API，输入、输出、和注意事项。

这里直接引用MDN：

Promise.all(iterable) 方法返回一个 Promise 实例，此实例在 iterable 参数内所有的 promise 都“完成（resolved）”或参数中不包含 promise 时回调完成（resolve）；如果参数中 promise 有一个失败（rejected），此实例回调失败（reject），失败的原因是第一个失败 promise 的结果。

MDN后面也给出了详细说明：

此方法在集合多个promise的返回结果时很有用。

完成（Fulfillment）：

• 如果传入的可迭代对象为空，Promise.all会同步地返回一个已完成（resolved）状态的promise。

• 如果所有传入的promise都变为完成状态，或者传入的可迭代对象内没有promise，Promise.all返回的promise异步地变为完成。

• 在任何情况下，Promise.all返回的promise的完成状态的结果都是一个数组，它包含所有的传入迭代参数对象的值（也包括非promise值）。

失败/拒绝（Rejection）：

如果传入的promise中有一个失败（rejected），Promise.all异步地将失败的那个结果给失败状态的回调函数，而不管其它promise是否完成。

个人感觉MDN解释的比较清楚了，还是云里雾里的话，可以反复细品一下上面的说明。或者结合下面的代码去理解。

2 - 手动实现Promise.all

面试美团的时候，面试官看我写不出来，就说“既然你知道了输入和输出是什么，应该能写出来了....”。

面试官其实不是在鄙视我“我不行”，而是在试图引导我的思路，只是当时自己编程思路太差，最后还是没写出来。

但是面试官的提示，确实是一个很好的思考思路。 先不管完整的Promise.all代码是什么样子，甚至包括优化啥的。先想想"Promise.all(iterable) 方法返回一个 Promise实例"，就这么简单的一句话怎么写呢？

• function myPromiseAll(arr) {  // 参数是一个iterable对象，一般是数组


•   // 返回一个Promise实例


•    return new Promise((resolve, reject) =》 {


•        resolve("面试官让我写一个Promise.all");


•        // 或者


•        // reject("我太笨了，写不出来");


•        


•    });


• }


• let pResult = myPromiseAll();  // 先不要去想数组有没有元素


• pResult.then(value=》{


•    console.log(value);  // 输出: 面试官让我写一个Promise.all


• }, err=》{


•    console.log(err);


• })



好了，如过看懂了，那么最重要的一步就完成了。是不是很简单。

接下来，只要根据MDN的说明，一步步完善内部函数的功能就行了。

我们先从“完成”情况下手：
完成（Fulfillment）：

• A. 如果传入的可迭代对象为空，Promise.all会同步地返回一个已完成（resolved）状态的promise。

• B. 如果所有传入的promise都变为完成状态，或者传入的可迭代对象内没有promise，Promise.all返回的promise异步地变为完成。

• C. 在任何情况下，Promise.all返回的promise的完成状态的结果都是一个数组，它包含所有的传入迭代参数对象的值（也包括非promise值）。

请先看C，在完成情况下，会始终返回一个数组.

• function myPromiseAll(arr) {


•    // 定义一个数组


•    let result = ;


•    return new Promise((resolve, reject) =》 {


•        // 现在只考虑 “在完成情况下” ，会返回一个数组


•        resolve(result);


•      


•        


•    });


• }


• let pResult = myPromiseAll();


• pResult.then(value=》{


•    console.log(pResult);  // 输出 Promise { 《state》: "fulfilled", 《value》: }


•    console.log(value); // 输出：


• })



那么下面来实现B，B里有分两种情况：

• 元素是Promise实例

• 元素不是Promise实例

那先考虑元素不是Promise实例，从简单的开始

• function myPromiseAll(arr) {


•    let result = ;


•    return new Promise((resolve, reject) =》 {


•        for(let i = 0; i 《 arr.length; i++) {


•            result.push(arr);


•        }


•        resolve(result);


•      


•        


•    });


• }


• let pResult = myPromiseAll();  // 元素不是Promise实例


• pResult.then(value=》{


•    console.log(pResult); // 输出:  Promise { 《state》: "fulfilled", 《value》: (3) }


•    console.log(value); // 输出： Array(3)


• })



最难的来了，元素都是Promise实例呢？
别慌，先写顶层设计，再想细节（自上向下编程）

• function myPromiseAll(arr) {


•    let result = ;


•    return new Promise((resolve, reject) =》 {


•        for(let i = 0; i 《 arr.length; i++) {


•            


•            if(/*如果是Promise实例*/) {


•                


•            } else {


•                result.push(arr);


•            }




•        }


•        // 先想想，resolve放在这里，对不对？


•        resolve(result);


•      


•        


•    });


• }



继续完善

• function myPromiseAll(arr) {


•    let result = ;


•    return new Promise((resolve, reject) =》 {


•        // 数组为空，直接resolve了


•        if(arr.length == 0) {


•            resolve(result);


•        }


•        for(let i = 0; i 《 arr.length; i++) {


•            


•            if(arr.then) { // 若元素是Promise实例，则会有then函数，这里只是简单的作为判断标准


•                


•                // 元素是Promise


•                arr.then(value =》 {


•                    console.log(value);


•                    result.push(value);


•                    // 想一想什么时候resolve呢？--- 所有Promise实例都完成了


•                    if(result.length == arr.length) {


•                       console.log("所有都完成了")


•                        resolve(result);


•                    }


•                })


•                


•            } else {


•                result.push(arr);


•                // 这段代码跟上面重复，想想，能不能提取放到外面，会出现什么情况呢？


•                if(result.length == arr.length) {


•                    resolve(result);


•                }


•            }


•        }


•    });


• }


• let p1 = new Promise((resolve, reject)=》 {


•    setTimeout(resolve, 2000, "P1 resolved");


• })


• let p2 = new Promise((resolve, reject)=》 {


•    setTimeout(resolve, 3000, "P2 resolved");


• })


• let p3 = new Promise((resolve, reject)=》 {


•    setTimeout(resolve, 4000, "P3 resolved");


• })


• let pResult = myPromiseAll();


• pResult.then(value=》{


•    console.log(pResult);


•    console.log(value);


• })


• // 输出


• // P1 resolved


• // P2 resolved


• // P3 resolved


• // 所有都完成了


• // Promise { 《state》: "fulfilled", 《value》: (3) }


• // Array(3)



完成情况写完了，还剩失败情况：

• 如果传入的 promise 中有一个失败（rejected），Promise.all 异步地将失败的那个结果给失败状态的回调函数，而不管其它 promise 是否完成。

• function myPromiseAll(arr) {


•    let result = ;


•    return new Promise((resolve, reject) =》 {


•        // 如果数组为空，直接返回空数组


•        if(arr.length == 0) {


•            resolve(result);


•        }


•        for(let i = 0; i 《 arr.length; i++) {


•            


•            if(arr.then) { // 若元素是Promise实例，则会有then函数，这里只是简单的作为判断标准


•                


•                // 元素是Promise


•                arr.then(value =》 {


•                    console.log(value);


•                    result.push(value);


•                    // 想一想什么时候resolve呢？


•                    if(result.length == arr.length) {


•                        console.log("所有都成功了")


•                        resolve(result);


•                    }


•                }, err =》 {


•                    console.log("很不幸，其中一个失败了");


•                    // 注意到没, 这里没有像上面的判断 result.length == arr.length, 为什么？


•                    // 只要碰到 resolve 或 reject ，就结束了


•                    reject(err);


•                })


•                


•            } else {


•                result.push(arr);


•                // 这段代码跟上面重复，想想，能不能提取放到外面，会出现什么情况呢？


•                if(result.length == arr.length) {


•                    resolve(result);


•                }


•            }


•        }


•    });


• }


• let p1 = new Promise((resolve, reject)=》 {


•    setTimeout(reject, 2000, "P1 rejected");


• })


• let p2 = new Promise((resolve, reject)=》 {


•    setTimeout(resolve, 3000, "P2 resolved");


• })


• let p3 = new Promise((resolve, reject)=》 {


•    setTimeout(resolve, 4000, "P3 resolved");


• })


• let pResult = myPromiseAll();


• pResult.then(value=》{


•    console.log(pResult);  // 是输出成功


•    console.log(value);


• }, err =》 {


•    console.log(pResult);   // 还是输出失败呢？


•    console.log(err);


• })


• // 输出


• // 很不幸，其中一个失败了


• // Promise { 《state》: "rejected" }


• // P1 rejected


• // P2 resolved


• // P3 resolved



为什么最后还是输出了 P2 和 P3 的结果呢？ 这是因为，尽管遇到了P1就reject了，然而 P2 和 P3 仍在执行。注意MDN说的是“不管其他Promise是否完成”，而不是“其他Promise被stop”。

• let p2 = new Promise((resolve, reject)=》 {


•    setTimeout(resolve, 3000, "P2 resolved");


• })


• let p3 = new Promise((resolve, reject)=》 {


•    setTimeout(resolve, 4000, "P3 resolved");


• })


• let pResult = myPromiseAll();


• pResult.then(value=》{


•    console.log(pResult);


•    console.log(value); // 输出


• }, err =》 {


•    console.log(pResult);


•    console.log(err);

js promise 中的then的值能直接返回出来吗

　　then方法的实现里，确实是返回了一个新的Promise，你说的double，其实是then的第一个参数onFulfilled。
　　this.then = function (onFulfilled, onRejected) {
var self = this;
return new Promise(function (resolve, reject) {
return self.done(function (result) {
if (typeof onFulfilled === ’function’) {
try {
return resolve(onFulfilled(result));
} catch (ex) {
return reject(ex);
}
} else {
return resolve(result);
}
}, function (error) {
if (typeof onRejected === ’function’) {
try {
return resolve(onRejected(error));
} catch (ex) {
return reject(ex);
}
} else {
return reject(error);
}
});
});
}

如何手写一个Promise

参考文章： 《Promise，从入门到放弃》

catch 方法主要需要做到的就是异常穿透：

要实现 catch ，我们可以直接调用 iPromise.then 方法，但不传入 onResolve 方法。

同时，我们需要给 then 中的 onResolve 和 onRejected 赋初始值，顺便避免了传入 undefined 或其他非函数值而报错：

Promise.resolve 方法返回成功或者失败的 Promise 对象。如果传入的参数为非 Promise 类型的对象，则返回的结果为成功的 Promise 对象。如果传入的参数为 Promise 对象，则参数 Promise 返回的结果就是 Promise.resolve 返回的结果。

实现它，我们需要用到 静态方法 ：

Promise.reject 方法返回一个失败的 Promise 对象， promiseResult 的值为 Promise.reject 的 参数 。

实现：

Promise.all 方法接收的参数是由n个 Promise 对象的数组。返回新的 Promise 对象，只有所有的 Promise 对象都成功才成功，返回的对象的 promiseResult 为包含所有 Promise 对象的数组。只要有一个失败了就直接失败，返回的对象的 promiseResult 为失败的 Promise 对象的执行结果。

Promise.race方法接收的参数是由n个Promise对象的数组。返回新的 Promise 对象，第一个完成的Promise的结果状态就是最终结果的状态。

使用 setTimeout 将其变为异步任务。

......没啥好说的，从上到下敲一遍，不说运用自如，怎么也得是一脸懵逼吧。