当前位置：首页 > news >正文

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

news 来源：原创 2025/5/6 17:43:42

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

}