JS 中的 api 调用是否需要等待结果？

Question

我在一个名为 userapi.js 的类中有以下端点：

const controller = 'User';
...
export async function getEmployeeInfo(employeeId) 
{
  const query = createQueryFromObject({employeId});
  const response = await get(`/${controller}/EmployeeInfo?${query}`);
  return retrieveResponseData(response, []);
}

这将从 usercontroller.cs 的后端中的操作方法中获取所需信息。

现在，说我想在 employeeview.vue 类中显示此信息，我必须再次等待它吗？为什么或为什么不呢？最初，我不会说不，您不会，因为您已经处理了等待/async 在 userapi.js 类中resolve ？请解释。

  methods: {
    async setReportData(
     employeeId
    ) {
      this.isBusy = true;
      Promise.resolve(getEmployeeInfo(
        employeeId
      )).then((resultsEmployeeInfo) => {
        this.reportDatatableEmployeeInfo = resultsEmployeeInfo;
      })
        .catch(() => {
          this.alerts.error('An error has occurred while fetching the data');
        })
        .finally(() => {
          this.isBusy = false;
        });
    },

更新： ...

 * @param {Object} response
 * @param {any} defaultData
 * @param {Function} predicate
 * @returns {Promise}
 */
export function retrieveResponseData(response, defaultData = null, predicate = (predicateResponse) => predicateResponse) {
  const data = predicate(response) ? response.data : null;

  return data || defaultData;
}

Answer 1

您需要等待它，因为使用异步关键字 ALWAYS 声明的函数会返回 Promise，即使您只在其中执行同步操作，因此您需要等待或“thenize " 它来访问它解析到的值。这取决于异步函数的实现细节，异步函数只是产生承诺的生成器。

如果您担心这个问题，因为您在同步模块中工作并且不喜欢使用异步函数来执行更多异步函数，那么有一个好消息，TOP-LEVEL wait MODULES该提案处于第 4 阶段，因此很快就会随下一个 ECMA 版本一起发布。这样，您将能够在模块内部等待，就像它们被异步函数包装一样！
https://github.com/tc39/proposal-top-level-await

Answer 2

我无法确定您是否需要再次等待它，因为我无法分辨 RECRIEVERESPONSEDATA 做什么。它可能会采用解决的价值并将其包裹在一个新的承诺中，然后需要 getemployeeeinfo 等待结果的呼叫者。

原因是：

诺言是围绕一个值

等待解开承诺的包装。 。然后。

就像现实世界中的礼物一样，一旦拆开了东西，您就无需再次将其解开。但是，对于我们来说非常方便的是，您仍然可以在未包装在承诺中的值上等待等待，它只会为您提供值。

您可以将任何价值包裹在承诺中，例如：

let wrappedFive = Promise.resolve(5)
//> wrappedFive is a Promise that must be unwrapped to access the 5 inside it

// this does _exactly_ the same thing as the above
let wrappedFive = new Promise(resolve => {
    resolve(5)
})

有时您最终会处于无法使用等待的情况下，因为您处于无法标记的 async < 。 /代码>。前端框架的生命周期方法（例如React（甚至可能是VUE））就是这样：该框架需要每个生命周期方法来完成其工作并立即完成。如果将生命周期方法标记为异步，则通常可以防止其具有预期效果。

在这种情况下，您通常需要使用链式

componentDidMount() {
    // this API call is triggered immediately by lifecycle,
    // but it basically starts a separate thread -- the rest
    // of this function does not wait for the call to finish
    API.getUserInfo()
    .then(userInfo => {
        // this happens after the API call finishes, but
        // componentDidMount has already finished, so what happens
        // in here cannot affect that function
        this.setState({ username: userInfo.username })
    })

    // this happens immediately after the API call is triggered,
    // even if the call takes 30 seconds
    return 5
}

。单独的线程 - 这些都发生在执行生命周期方法的相同线程中，即浏览器的渲染器线程。但是，如果您想到执行执行的编码器，那么您 not 的承诺基本上都会将叉子引入该codepath：立即遵循一条路径，并且每当承诺解决时，请遵循另一个路径。由于Browserland几乎是一个单线程的上下文，因此认为创造一个承诺作为单独的线程并不伤害您。这是一个细微差别，您可以忽略，直到您对JS中的异步图案感到满意。

---

更新： RECRIEVERESPONSEDATA do 不似乎返回承诺。我可能是错的，如果预测返回承诺，但是如果那是真的，那么三元级将始终返回 wendesp.data ，因为未包装的承诺是真实的价值观（甚至 promise.resolve（false）是真实的）。

但是，任何调用 getemployeeInfo will 的人都必须等待它，因为该功能被标记为 async ，这意味着即使没有什么，即使没有什么，它也会返回承诺内部是异步的。考虑这个极端的例子：

// this function returns a number
function gimmeFive() {
    return 5
}

// this function returns a Promise wrapped around a number
async function gimmeFive() {
    return 5
}

Answer 3

async函数 getemployeeInfo 等待 get 调用的结果，以返回呼叫返回的值 RECRIEVERESPONESPONESPONEDATATA 。

假设 get 也不是 reacrieveresponEdata 错误，则使用 geteMployeeeeInfo 的句法返回的值返回的值，用于解决通过调用 getEmployeeInfo 。

Promise.resolve 不需要将调用 getEmployeeeInfo 转换为承诺的结果，因为给定的异步函数返回返回承诺。

reacrieveresponsedata 是否返回承诺并不重要：标准async函数处理等待在调用异步函数时返回的承诺返回的承诺之前，请等待返回的承诺值。

异步函数 setrReportData 被声明为 async ，但使用链接的承诺处理程序方法编写以处理数据和错误条件的顺序 - 可以省略异步声明，但如果修改，则可能有用制作。

完成和提取的时候更新页面

setReportData( employeeId) {
  this.isBusy = true;
  getEmployeeInfo(
    employeeId
  ).then((resultsEmployeeInfo) => {
    this.reportDatatableEmployeeInfo = resultsEmployeeInfo;

    //  At this point the result in  this.reportDatatableEmployeeInfo can be used to update the page

  })
    .catch(() => {
      this.alerts.error('An error has occurred while fetching the data');
    })
    .finally(() => {
      this.isBusy = false;
    });
},

结果只能在获得数据 数据可用。插入更新页面的最简单的位置（在已发布的代码中）在然后在处理程序> setReportdata 内的处理程序函数中。

---

显示数据

已发布 setReportData 不会通过回调或通过返回承诺来通知其呼叫者。它所做的就是将结果保存在 this.reportDataTableEmployeeEinfo 和DIES中。

在不使用回调的情况下， setReportData 将带有两个选择

1. 返回承诺，例如 Resulte EmployeeeeeInfo 或 Undefined 如果一个错误发生：

     setReportData（雇员）{
      this.isbusy = true;
   
      //返回最终承诺：
   
      返回getEmployeeInfo（ 
          员工
        ）
       。
          （this.ReportDataTableEmployeeEinfo = Results EmployeeInfo） 
        ）
       .catch（（）=＆gt; {
          this.alerts.Error（“获取数据时发生了错误”）；
          //返回未定义 
        }））
        .finally（（）=＆gt; {
          this.isbusy = false;
        }）;
    }，，
    

   可以使用类似于

   的承诺在呼叫序列中使用的

     if（！this.busy）{
      this.setReportData（someid）。然后（data =＆gt; {
        如果（数据）{
           //更新页面
        }
    }
    

   如果您想在异步上下文中拨打电话，则可以使用等待：

     if（！this.busy）{
      const data =等待this.setReportData（someid）;
      如果（数据）{
           //更新页面
      }
    }
    

2. 在数据可用后，从 setReportdata 内部更新页面（如该数据可用时，如图所示，在此的第一部分中显示为注释回答）。该方法可能应从 setReportData 重命名为 getReportData 或类似以反映其目的。