Question

我是JavaScript和React的新手，正试图摆脱教程，因此为了我自己的学习利益而开始制作一个简单的应用程序，但遇到了功能异步运行的障碍。

在onSearchSubmit中，有一个setState在其回调中具有以下内容：

this.findSalaryRangeMin(data.advertiser.id, data.teaser);
this.findSalaryRangeMax(data.advertiser.id, data.teaser);

如何使以上两个函数同步运行？ findSalaryRangeMax使用在this.state.salaryLower中设置的findSalaryRangeMin，但是下面的console.log显示findSalaryRangeMax在findSalaryRangeMin完成之前正在触发。

  findSalaryRangeMax = (advertiserId, teaser) => {
    console.log(`this.state.salaryLower: `, this.state.salaryLower);
    // ... More code
  };

我已经阅读了一些有关使用诺言的资源，但是我无法弄清楚如何应用诺言...我也想知道是否可以使用async / {{1}来实现}。

完整的代码： （为简单起见，我删除了一些代码）

await

为了提供一些背景信息，我正在尝试制作的应用程序向API查询职位列表网站。 API响应不会显示单个工作的薪水范围，但是可以通过查询薪水范围来相当准确地确定薪水。

Answer 1

您的理解是正确的，如果您希望函数同步运行，并且在返回所需数据之前，现有代码将运行到下一行findSalaryRangeMax，则需要异步或承诺。

异步/等待和诺言肯定会有所帮助，但是通常也值得考虑一些代码更改。例如，您可以将这两个功能合并为一个功能，例如

findSalaryRanges(data.advertiser.id, data.teaser)

并一次获取数据，处理并设置状态。

一些伪代码：

findSalaryRanges = async () => {
    // get all the data needed first
    const maxSalaryData = await JobSearch.get(`http://localhost:3001/salary-range/${advertiserId}/${this.state.salaryLower}/${this.state.salaryLowerTop}/${teaser}`);
    const minSalaryData = await JobSearch.get(...);

    // process data as needed
    ...

    // set state once
    this.setState({
        salaryTop: salaryTop,
        salaryLower: salaryLower
    });
};

Answer 2

setState是异步的，因此，如果您在运行下一个函数之前依赖状态的值，则可以执行以下操作：

this.setState({
  salaryLowerTop: Math.round(
    (this.state.salaryLowerTop - this.state.salaryLower) / 2 +
      this.state.salaryLower
    )
}, () => this.findSalaryRangeMax(data.advertiser.id, data.teaser))

Can I execute a function after setState is finished updating?

如何在JavaScript中同步运行函数？

2 个答案: