在 ES6 React .JS 中使用 Async/Await

Posted 2023-03-07

【中文标题】在 ES6 React .JS 中使用 Async/Await

【英文标题】：Using Async/Await in ES6 React .JS

【发布时间】：2019-04-24 02:14:24

【问题描述】：

我有一个安装了 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……（或者我错了吗？）。

我正在使用带有 ENV 预设的旧 Babel。

如果我需要提供更多代码，请告诉我，但 TLDR 我想要的是仅在我的 axios 完成将项目推送到 PeopleList 状态（对象数组）之后启动过滤器功能。

谢谢！

【参考方案1】：

按照语法尝试遵循上面的代码库，

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

是的，尝试使用和触摸async-await guide

【参考方案2】：

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

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

查看Syntax for async arrow function

【讨论】：

似乎部分工作，但是即使“等待”函数已转换为异步，babel 仍会引发“等待是保留字”错误。有什么提示吗？也知道哪里是放置 const 函数的最佳位置吗？ render() 可以吗？谢谢！编辑：似乎将其移出 setTimeout 停止了“等待”错误。我假设你不能同时使用 await 和 timeout。