解决js return返回结果依赖耗时操作而返回空值或undefined问题

如果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) {
      // 将涉及到数组的耗时操作整体封装成一个promise
      const 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;

}

你可能感兴趣的:(javascript,耗时操作,异步,返回undefined)