在ES6 React .JS中使用Async/Await

Question

我有一个安装了ReactJS的NetCore2应用程序。

我的React应用程序的功能如下：

用户输入某些内容；

axios调用api以获取用户和/或用户列表；

输入字段根据PeopleList状态中保存的内容显示建议。

我正在使用Office Fabric UI React - People Picker（如果有影响的话）。

我的问题是，我不知道如何在代码中使用async / await。

如果我像这样放置一些东西 async asynconFilterChanged = (filterText, currentPersonas, limitResults) => {

VS Code会抛出一个错误告诉我async只适用于.ts文件。此外，如果我在任何其他函数中使用await，我将收到诸如“await is a reserved word”之类的错误。

据我所知，async / await不仅限于TS…（我错了吗？）。

我正在使用旧版本的Babel和ENV预设。

如果需要提供更多代码，请告诉我。但是TLDR，我想要的是在axios完成将项推送到PeopleList状态（对象数组）后才开始过滤函数。

谢谢！

- Dante R.

Answer 1

当使用箭头函数时，您应该像这样编写async/await：

const asynconFilteredChanged = async () => {
 // code here 
}

请查看异步箭头函数的语法

- Dmitriy

---

似乎部分工作，但是babel仍然会抛出“await是保留字”的错误，即使“awaited”函数已经被转换为async。有什么提示吗？还有任何想法在哪里放置const函数？render() {}可以吗？谢谢！编辑：似乎将其移出setTimeout停止了“await”错误。我认为您不能同时使用等待和超时。 - Dante R.

Answer 2

根据语法，请尝试遵循上述代码库。

asynconFilterChanged = async (filterText, currentPersonas, limitResults) => {
            try {
                await yourFucntion = (limitResults) => {
                ....Your logic...
                }
            } catch(error) {
                console.error(error);
            }

是的，请尝试使用和了解异步等待指南

- Anupam Maurya