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

我对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
  };

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

async

/

wait

实现

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

从“React”导入React；
从“./api/JobSearch”/”导入JobSearchaxios
从“/SearchBar”导入搜索栏；
类应用程序扩展了React.Component{
状态={
职位名称：“，
广告商：“，
工薪阶层：“，
salaryLowerTop:“，
工薪阶层：，
工资上限：“
};
findSalaryRangeMin=（广告客户ID，摘要）=>{
this.setState（{salarlower:0，salarlylowertop:200000}，async（）=>{
让salaryLowerPrev；
对于（变量i=0；i<20；i++）{
const response=wait JobSearch.get(
`http://localhost:3001/salary-range/${advertiserId}/${this.state.salaryLower}/${this.state.salaryLowerTop}/${Trister}`
);
控制台日志（响应）；
if（response.data.totalCount==1）{
salaryLowerPrev=this.state.salaryLowerTop；
这是我的国家({
salaryLowerTop：数学，回合(
（this.state.salaryLowerTop-this.state.salaryLower）/2+
这个州，salaryLower
)
});
}否则{
这是我的国家(
{
salaryLowerTop:salaryLowerPrev
},
() => {
这是我的国家({
salaryLower:数学(
（this.state.salaryLowerTop-this.state.salaryLower）/2+
这个州，salaryLower
)
});
}
);
}
}
});
};
findSalaryRangeMax=（广告客户ID，摘要）=>{
log（`this.state.salarlower:`，this.state.salarlower）；
//…更多代码
};
onSearchSubmit=异步术语=>{
const response=wait JobSearch.get(
`http://localhost:3001/job-信息/${term}`
);
if（response.data.totalCount==1）{
const data=response.data.data[0]；
这是我的国家(
{
jobTitle:data.title，
广告客户：data.advertiser.description
},
() => {
this.findSalaryRangeMin（data.advertiser.id，data.triser）；
this.findSalaryRangeMax（data.advertiser.id，data.triser）；
}
);
}否则{
log（“totalCount不等于1:”，response.data.totalCount）；
}
};
render（）{
返回(

职务：{this.state.jobTitle}
广告客户：{this.state.Advertiser}
薪资下限：{this.state.salarlower}
薪资上限：{this.state.salaryUpper}
);
}
}
导出默认应用程序；

---

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

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

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

---

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

findSalaryRangeMax

，则需要异步或承诺

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

---

@Dupocas感谢您的快速回复+链接。我知道这是同一个概念，但我希望有一个更具体的JS上下文你说的“JS特定上下文”是什么意思？JavaScript中的东西。对于这一关联问题，公认的答案是C#上下文。尝试学习一个新概念已经够难了，更不用说用一种我一无所知的编程语言来解释了。哇。实际上那是我的错。我弄乱了链接（对此很抱歉）：我尝试过使用

.then（）

，但在使用它时出现了以下错误：

未处理的拒绝（TypeError）：无法读取未定义的属性“then”

我已经编辑了我的答案，我已经有一段时间没有使用/class组件了：）我最终对代码进行了彻底的修改。我不能完全按照您建议的方式来做，因为我的应用程序需要比较API结果并根据结果提交另一个查询，但它为我指明了正确的方向。没问题，有时您只需要进行一次健全性检查来帮助您获得一些想法