fs项目---->async/await的学习（一）

　　2018-07-11号，我来到了fs项目组担任后端开发的角色。这是我来thoughtworks以来首个的正式项目，不管是在技术还是在敏捷的实践中都是受益匪浅。来感受tw特殊的文化的同时，我希望自己能够学到更多的东西。不忘初心，坚持总结。这篇博客主要记载的是async/await在Array中使用遇到的一些问题。

一、async/await在Array.forEach中不work

我们想在forEach中执行操作再执行下面的操作，但是运行并没有生效。下面看一下forEach的事例

const waitFor = (ms) => new Promise(r => setTimeout(r, ms));
const start = async () => {
    const array = [10, 20, 30];
    array.forEach(async (item) => {
        await waitFor(item);
        console.log(item);
    });
    console.log('done');
}
start();

 在nodejs(v10.6.0)中运行，可以看到如下的结果

done
10
20
30

原因的分析可以参考一下forEach的实现，这里暂时不做说明：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach#Polyfill。下面提供两种提供的方案

• 不使用forEach，使用fori的循环，同步执行

const start = async () => {
    const array = [10, 20, 30];
    for (let i = 0; i < array.length; i++) {
        await waitFor(array[i]);
        console.log(array[i]);
    }
    console.log('done');
}

• 使用Promise.all和map的实现，异步执行

const start = async () => {
    const array = [10, 20, 30];
    await Promise.all(array.map(async num => {
        await waitFor(num);
        console.log(num);
    }));
    console.log('done');
}

最终得到我们想要的运行结果

10
20
30
done

二、async/await在Array.filter中不work

我们写一个js的例子，nodejs的版本是v10.6.0。代码如下

const filterOperate = (ms) => new Promise(resolve => setTimeout(resolve, ms));
const start = async () => {
    let array = [10, 20, 30];
    array = array.filter(async (item) => {
        await filterOperate(item);
        return item === 20;
    });
    console.log(array);
    console.log('done');
}
start();

运行的结果并不是我们想要的，如下：

[ 10, 20, 30 ]
done

我们需要改进filter，用我们定义的asyncFilter方法。定义如下：

const filterOperate = (ms) => new Promise(resolve => setTimeout(resolve, ms));
const asyncFilter = async (arr, callback) => {
    const fail = Symbol();
    return (await Promise.all(arr.map(async item => (await callback(item)) ? item : fail))).filter(i => i !== fail);
};
const start = async () => {
    let array = [10, 20, 30];
    array = await asyncFilter(array, async (item) => {
        await filterOperate(item);
        return item == 20;
    })
    console.log(array);
    console.log('done');
}
start();

打印的结果如下：

[ 20 ]
done

三、async/await在Array.map中不work

我们写一个js的例子，代码如下：

const promise = (ms) => new Promise(resolve => setTimeout(resolve, ms));
const start = async () => {
    let array = [10, 20, 30];
    array = await array.map(async (item) => {
        await promise(item);
        return item * 2;
    })
    console.log(array);
    console.log('done');
}
start();

运行的结果如下：

[ Promise { <pending> },
  Promise { <pending> },
  Promise { <pending> } ]
done

我们改进代码，使它返回正确的结果。只要在外面包含一层Promise.all就可以。如下

const promise = (ms) => new Promise(resolve => setTimeout(resolve, ms));
const start = async () => {
    let array = [10, 20, 30];
    array = await Promise.all(array.map(async item => {
        await promise(item);
        return item * 2;
    }));
    console.log(array);
    console.log('done');
}
start();

运行的结果如下：

[ 20, 40, 60 ]
done

友情链接