在 for...in 循环中使用 async/await 从 API 调用获取 _resp 而不是 resp 响应答案

【问题标题】：Getting _resp instead of resp response from API call with async/await in for...in loop在 for...in 循环中使用 async/await 从 API 调用获取 _resp 而不是 resp 响应
【发布时间】：2019-08-29 21:54:08
【问题描述】：

我有一个 Vuex 操作，其中我需要遍历对象列表，让服务通过 Axios 将它们发送到 REST 端点，然后返回 data 和 response。我需要以这样的方式进行操作，以便获得成功 POST 的计数，以便显示消息。我遇到的问题是使用 async/await 和 for...of 循环。

这是我目前所拥有的：

  async bulkSave({
    dispatch,
    getters,
  }, item) {
    let saveCount = 0;
    // eslint-disable-next-line no-restricted-syntax
    for (const user of item.users) {
      const resp = await tenantUserService.save({
        user,
        tenantCode: item.tenantCode,
        skipUserCheck: true,
      });
      const { status, data } = resp;
      if (resp.status === 201) {
        saveCount += 1;
        dispatch('setSaveResponse', { status, data });
      }
    }

    dispatch('alertMessage/setApiResponse', {
      resp,
      component: getters.getComponent,
    }, { root: true });
    return resp;
  },

这是我正在使用的现有功能，一次保存一条记录：

async save({ dispatch, getters }, { service, item }) {
        const resp = await service.save(item);
        const { status, data } = resp;
        dispatch('setSaveResponse', { status, data });
        dispatch('alertMessage/setApiResponse', {
          resp,
          component: getters.getComponent,
        }, { root: true });
        return resp;
      },

将此作为save 服务被调用：


  static async save(item) {
    const { user, tenantCode, skipUserCheck } = item;

    return await super.perform(axios.post(ServiceUrlProvider.gmiUrl().concat('/tenant/').concat(tenantCode).concat('/person'), user));
  }

我最初尝试使用.forEach()，但由于async/await 在forEach() 中不起作用，我开始尝试... ofbased on answers like [this one][1]. However, esLint is telling me I can't haveawaitinside a loop, and when I run this, my call totenantUserService.save()just returns_resp `：

我缺少什么来完成这项工作，以便我可以 1) 保存项目并 2) 获得正确的响应，以便我可以增加 saveCount 并继续？

【问题讨论】：

在bulkSave 中，您将resp 作为for 循环内的常量...那么您在声明的循环之外返回的resp 在哪里？
另外，就像这里的一个观点......你最终的save服务真的不需要异步/等待，因为你return是唯一的awaited值......话虽如此，super.perform 会返回一个 Promise 吗？

标签： javascript asynchronous vuejs2 async-await vuex

【解决方案1】：

我最终通过几个小调整让它工作：

  async bulkSave({
    dispatch,
    getters,
  }, item) {
    let saveCount = 0;
    const usersToUpload = item.users.length;
    let uploadPercentage = 0;
    let resp = {};
    // eslint-disable-next-line no-restricted-syntax
    for (const user of item.users) {
      resp = await tenantUserService.save({
        user,
        tenantCode: item.tenantCode,
        skipUserCheck: true,
      });
      const { status, data } = resp;
      if (resp.status === 201) {
        saveCount += 1;
        // Calculate the percentage of users that have been uploaded
        // Used for progress bar display.
        uploadPercentage = Math.round((saveCount / usersToUpload) * 100);
        dispatch('setUploadProgress', uploadPercentage);
        dispatch('setSaveResponse', { status, data });
      }
    }

    dispatch('alertMessage/setApiResponse', {
      resp,
      component: getters.getComponent,
    }, { root: true });
    return resp;
  },

【讨论】：