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

Question

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

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

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

如何使上述两个函数同步运行findSalaryRangeMax使用在findSalaryRangeMin中设置的此.state.salaryLower，但下面的控制台.log显示findSalaryRangeMax在findSalaryRangeMin完成之前启动。

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

我已经阅读了一些参考资料，其中提到使用promise，但我不知道如何应用它。。。我还想知道是否可以通过async/wait实现。

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

import React from "react";
import JobSearch from "../api/jobSearch"; // axios
import SearchBar from "./SearchBar";

class App extends React.Component {
  state = {
    jobTitle: "",
    advertiser: "",
    salaryLower: "",
    salaryLowerTop: "",
    salaryUpper: "",
    salaryUpperTop: ""
  };

  findSalaryRangeMin = (advertiserId, teaser) => {
    this.setState({ salaryLower: 0, salaryLowerTop: 200000 }, async () => {
      let salaryLowerPrev;
      for (var i = 0; i < 20; i++) {
        const response = await JobSearch.get(
          `http://localhost:3001/salary-range/${advertiserId}/${this.state.salaryLower}/${this.state.salaryLowerTop}/${teaser}`
        );
        console.log(response);
        if (response.data.totalCount === 1) {
          salaryLowerPrev = this.state.salaryLowerTop;
          this.setState({
            salaryLowerTop: Math.round(
              (this.state.salaryLowerTop - this.state.salaryLower) / 2 +
                this.state.salaryLower
            )
          });
        } else {
          this.setState(
            {
              salaryLowerTop: salaryLowerPrev
            },
            () => {
              this.setState({
                salaryLower: Math.round(
                  (this.state.salaryLowerTop - this.state.salaryLower) / 2 +
                    this.state.salaryLower
                )
              });
            }
          );
        }
      }
    });
  };

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

  onSearchSubmit = async term => {
    const response = await JobSearch.get(
      `http://localhost:3001/job-info/${term}`
    );
    if (response.data.totalCount === 1) {
      const data = response.data.data[0];
      this.setState(
        {
          jobTitle: data.title,
          advertiser: data.advertiser.description
        },
        () => {
          this.findSalaryRangeMin(data.advertiser.id, data.teaser);
          this.findSalaryRangeMax(data.advertiser.id, data.teaser);
        }
      );
    } else {
      console.log("totalCount not equal to 1: ", response.data.totalCount);
    }
  };

  render() {
    return (
      <div>
        <SearchBar onSearchSubmit={this.onSearchSubmit} />
        <hr />
        <div>
          Job Title: {this.state.jobTitle}
          Advertiser: {this.state.advertiser}
          Salary Lower Range: {this.state.salaryLower}
          Salary Upper Range: {this.state.salaryUpper}
        </div>
      </div>
    );
  }
}

export default App;

为了提供一些上下文信息，我正在尝试制作的应用程序查询了一个API，以获取一个工作列表站点。API响应没有显示单个工作的薪资范围，但可以通过查询薪资范围相当准确地确定薪资。

Answer 1

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

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

是否可以在setState完成更新后执行函数？

Answer 2

您的理解是正确的，如果您希望函数同步运行，并且现有代码将运行到以下行findSalaryRangeMax，然后返回所需的数据，则需要异步或promise。

async/await和Promissions肯定会有所帮助，但通常也值得考虑一些代码更改。例如，您可以将这两个函数组合成一个函数，如

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
    });
};