河南专业网站建设哪家好企业网站优化技巧

如果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;}