为什么这个异步函数中的代码会在那之后触发呢？

Question

在以下代码中：

  async createPanoramas ({ dispatch, commit, rootState }, newPanoramas = {}) {
    const { enterprise = '' } = rootState.route.query
    const splitNewPanoramas = []
    const clonedNewPanoramas = newPanoramas.panoramas.slice()

    while (clonedNewPanoramas.length) {
      splitNewPanoramas.push(clonedNewPanoramas.splice(0, MAX_ARRAY_EACH_API_CALL))
    }

    return splitNewPanoramas.forEach(async panoramasPayload => {
      const payload = {
        buildingId: newPanoramas.buildingId,
        panoramas: panoramasPayload
      }
      const urlEnd = '/v2/panoramas'
      const type = 'post'
      const resp = await api.asyncRequest(urlEnd, type, payload).catch(resp => {
      console.log('Before response')
      return resp
    })
  }

  // payload = [{"objectId":"2cd2244c-31bf-424b-831e-35360f422363","index":1},{"objectId":"012fd0f8-1bc9-4336-81fc-afd46836b0c9","index":2}]
  this.createPanoramas(payload).then(resp => {
    console.log('After then') 
  })

控制台日志'Before resp'将在'After then'之后触发。

为什么会这样呢？以及如何修改异步函数，使'Before resp'在'After then'之前触发。

Answer 1

您需要调整您的代码，因为这是无效的，但除此之外，您还需要返回一系列承诺，然后等待它们全部完成。

const api = {
  asyncRequest() {
    return new Promise(resolve => setTimeout(() => {
      resolve();
    }, 500));
  },
};

async function createPanoramas(
  { dispatch, commit, rootState },
  newPanoramas = {}
) {
  const splitNewPanoramas = [{}, {}, {}];

  return splitNewPanoramas.map(async panoramasPayload => {
    const payload = {
      buildingId: newPanoramas.buildingId,
      panoramas: panoramasPayload
    };
    const urlEnd = "/v2/panoramas";
    const type = "post";
    const resp = await api.asyncRequest(urlEnd, type, payload).then(resp => {
      console.log("Before response");
    });
    return resp;
  });
}

payload = [
  { objectId: "2cd2244c-31bf-424b-831e-35360f422363", index: 1 },
  { objectId: "012fd0f8-1bc9-4336-81fc-afd46836b0c9", index: 2 }
];

const responses = createPanoramas(payload).then(responses => {
  Promise.all(responses).then(resp => {
    console.log("After then");
  }).catch(err => { console.log(err); });
});