forEach、map、reduce和promise那点事(下)

解决方案

老实说,forEach、map、reduce、filter 这些方法本意都是针对同步函数的,不太适合异步的场景。在异步的场景,建议使用 for 和 for of 方法

但是虽然他们都是针对同步函数的,还是有一些 hack 方法可以让它们对异步函数也生效,比如 reduce 的 hack 代码如下所示:

(async function () {
    const fetch = (forceTrue) => new Promise((resolve, reject) => {
        if (Math.random() > 0.2 || forceTrue) {
            resolve('success');
        } else {
            reject('error');
        }
    });

    const reduceResult = await [0,1,2].reduce(async (accu) => {
        const value = await fetch(true);
        const resolvedAccu = await accu;
        resolvedAccu.push(value);
        return resolvedAccu;
    }, []);

    console.log('====', reduceResult);
})()

上面的代码有这些需要注意的地方:

  1. 由于累计器 accu 是 async 回调函数的返回值 promise,所以我们使用 await 让它得出结果
  2. 由于最后的结果也是 promise,所以我们在前面加上了 await,但是await 只能在 async 函数里面使用,所以我们在匿名函数那里加上了 async。

promise

上面让我想起了 promise 的一种使用场景:我们知道 promise.all 可以获得同步的 promise 结果,但是它有一个缺点,就是只要一个 reject 就直接返回了,不会等待其它 promise 了。那么怎么实现多个 promise 同步执行,不管有没有抛出错误,都把结果收集起来

一般来说可以使用 for 循环解决,示例如下:

Promise.myAll = function (promiseArr) {
    const len = promiseArr.length;
    const result = [];
    let count = 0;

    return new Promise((resolve, reject) => {
        for (let i = 0; i < len; ++i) {
            promiseArr[i].then((res) => {
                result[i] = res;
                ++count;

                if (count >= len) {
                    resolve(result);
                }
            }, (err) => {
                result[i] = err;
                ++count;

                if (count >= len) {
                    resolve(result);
                }
            });
        }
    });
}

// test
const fetch = (forceTrue) => new Promise((resolve, reject) => {
    if (Math.random() > 0.2 || forceTrue) {
        resolve('success');
    } else {
        reject('error');
    }
});

Promise.myAll([fetch(), fetch(), fetch()])
    .then(res => console.log(res));  // ["success", "success", "error"]

但是如果注意到 promise 的then 方法和 catch 方法都会返回一个 promise的话,就可以用下面的简单方法:

Promise.myAll = function (promiseArr) {
    // 就这一行代码!
    return Promise.all(promiseArr.map(item => item.catch(err => err)));
}

// test
const fetch = (forceTrue) => new Promise((resolve, reject) => {
    if (Math.random() > 0.2 || forceTrue) {
        resolve('success');
    } else {
        reject('error');
    }
});

Promise.myAll([fetch(), fetch(), fetch()])
    .then(res => console.log(res)); // ["error", "error", "success"]
上一篇:Git 实现远程库修改的拉取


下一篇:Vue 项目 fetch 本地 json 报错 SyntaxError: Unexpected token < in JSON at position 0