如何避免异步事件处理程序顺序混乱答案

【问题标题】：How to avoid async event handlers order messed如何避免异步事件处理程序顺序混乱
【发布时间】：2021-11-08 05:44:10
【问题描述】：

在调用一些异步函数后，我很难找到一种方法来保证我拥有正确的数据。我有一个元素列表，每个元素都有一个异步 onclick 处理程序。我有一个滑块，当单击一个元素时会打开它并用一些数据异步填充。

const onClickElement = async () => {
    // open slider
    // await fetch data to display 
}

在滑块关闭时，我有一些异步功能可以从滑块中删除数据。

const onSliderClose = aync () => {
   // await async clear data 1
   // await async clear data 2
}

如果我单击关闭滑块，然后立即单击另一个元素以重新打开滑块，则在滑块 onSliderClose 处理程序完成之前获取新数据。关闭滑块功能恢复并清除所有先前获取的数据。我正在使用 react 和 redux 进行数据存储。谢谢！

【问题讨论】：

如果您只是清除已经在滑块中的数据，您可以同步进行。
您可以设置一个状态，指示onSliderClose 函数已完成。并且仅当该状态为 true 时，才能获取新数据。虽然为什么onSliderClose 必须是异步的？
您能否发布实际代码，而不仅仅是带有 cmets 的伪代码？不清楚为什么从滑块中清除数据是异步的（或者，为什么需要它）。
关闭滑块上的异步操作将修补元素上未保存的更改并获取最新列表，并最终清除显示在滑块内的元素的 redux 存储。但是由于 onClickElement 和 onCloseSlider 碰巧在 store 中写入了同一个位置，因此有时我最终会在 store 中未定义元素，因为无法保证顺序
不确定你所说的“补丁”是什么意思或者“滑块”有什么样的变化，但你仍然应该能够同步读取值，同步清除 DOM，同步隐藏元素，然后进行异步修补操作。同样，请edit您的问题包含实际代码。

标签： javascript reactjs redux async-await

【解决方案1】：

将 await 与异步一起使用！

const onClickElement = async () => {
    // open slider
    // fetch data to display 
await fetchData()
}

或替代

const onClickElement = async () => {
        // open slider
        // fetch data to display 

    }

    onClickElement.then( () => {
    //Do what you have to do here
    })

【讨论】：

我已经在获取数据时使用了 await，没有帮助。我编辑了问题以避免混淆。
onClickElement.then(…) 会引发异常