如果js一个代码块中有耗时操作,但是return的结果可能会依赖这个耗时操作的返回,怎么解决?
一般人可能想到的方法就是async/await。
没错,正常情况下是这样的,伪代码如下:
async OuterFun() {
const result = await timeCostFunc() // timeCostFunc是耗时操作
.....
return finalResult // finalResult依赖于上面的耗时操作返回的result
}
上面需要注意的是耗时操作的函数必须返回一个promise!
但是下面这种情况使用async/await就没有效果了
async _normalizeSongs(songs) {let ret = [];for (const song of songs) {const songItem = await createSong(song); // createSong是耗时操作ret.push(songItem);}return ret;}
这里的原因就在于: 遍历数组这个步骤并不是完全同步的,即便使用了async/await,也是这样。
换句话说:由于js异步执行的原因,而遍历数组本身并不是一个完全同步阻塞的操作(就算有async/await关键字), return ret这个操作可能会在for循环之前就执行了,所以返回的是一个空数组
那么问题的关键就是:要把for循环和数组push整个代码块变成一个完全同步阻塞的操作!
解决办法:把需要完全同步的部分整体封装成一个promise, 然后再通过await 这个promise同步阻塞获取结果,这样就能保证了:最终return会等待前面所有异步代码执行完毕,那么就不会return空值了
代码如下:
async _normalizeSongs(songs) {// 将涉及到数组的耗时操作整体封装成一个promiseconst songPromise = new Promise(async (resolve) => {let ret = [];for (const song of songs) {const songItem = await createSong(song);ret.push(songItem);}resolve(ret); // 把耗时操作的结果丢给resolve。});// 等待这个promise同步阻塞获取结果const resultSongs = await songPromise;return resultSongs;}