Reactjs 如何在React组件中使用异步等待

我有一个组件如下

import Axios from 'axios';

export const getCountry = async () => dispatch => {
  return await Axios.get('')
  .then(response => {
       //some code
  })
   .catch(error => {
     //some code
  });
};

export default { getCountry };

解析错误时出错：无法在异步函数外部使用关键字“wait”。

请尝试以下操作：

import Axios from 'axios';

export const getCountry = async (dispatch) => await Axios.get('...');

---

无需重新导出相同的常数。

您的代码相当于：

const theFunction = dispatch => {
  return await Axios.get('')
  .then(response => {
       //some code
  })
   .catch(error => {
     //some code
  });
};

export const getCountry = async () => theFunction;

例如，您有一个异步函数，该函数返回非异步函数的承诺。这里有几个问题：

您可能希望getCountry返回一个国家，而不是另一个函数； 你不需要让一个函数返回一个没有闭包的函数是异步的； 你徒劳地等待；您的代码可读性不高，因为您仍然使用promise模式not critical； 您确实需要函数（一个包含wait的函数）与错误的直接来源异步。 修复相当简单：去掉无用的包装器，并使正确的函数异步：

编辑：如果你的问题是在上下文中，那么我的第1点不适用；函数可能看起来像这样，而不是NB：我不熟悉redux thunk，所以这是一个猜测；您应正确标记以吸引相关人群：

export const getCountry = () => async dispatch => {
  try {
    const response = await Axios.get('')
    //some code
  } catch (error) {
    //some code
  }
};

---

这是一个关于如何将异步等待与react挂钩一起使用的示例

函数UseAsyncHookSearchBook{ const[result，setResult]=React.useState[]； 常量[loading，setLoading]=React.useStatefalse； React.useffect=>{ 异步函数fetchBookList{ 试一试{ 设置加载状态； const response=等待获取 `https://www.googleapis.com/books/v1/volumes?q=${searchBook}` ; const jsonData=wait response.jsonData； //console.logjsonData； 设定结果 jsonData.items.mapitem=>{ console.logitem.volumeInfo.title； 返回item.volumeInfo.title； } ; }捕捉错误{ setLoadingnull； } } 如果是searchBook！=={ 获取书目； } }，[搜索本]； 返回[结果，加载]； }

---

这是因为函数没有async，它必须在分派之前，然后分派应该用括号括起来。请尝试此导出const getCountry=>async dispatch=>{…}谢谢@zerkms。您的解决方案正在工作。不需要返回？这相当于getCountry=dispatch=>Axios.get'…'，因为await会将承诺转换为值，而async会使其再次成为承诺。@带有单个表达式的Abuau arrow函数可以省略花括号和返回@阿玛丹，但在你的回答中你用了等待。谢谢。我这么做了-因为我认为一些代码是您想要的。此表单中的答案没有空间容纳某些代码。这样看：要用卡片送礼物，你要买一份礼物，打开它，把一张漂亮的卡片放进去，包起来，给它。要送一份没有卡片的礼物，你可以买一份礼物，把它打开，而不是把卡片放进去，把它包起来。。。。或者你可以买一份礼物送给别人，跳过整个包装/拆开的过程。为什么你和另一个答案去掉了外部功能？摆脱无用的包装器你怎么知道它是无用的？@zerkms：因为我相信这是对异步如何使用的误解造成的。请看我的观点1。@Amadan这个额外的函数很可能是故意的，因为这段代码似乎是一个thunk的动作创建者@我明白了。标签并没有列出，我也不知道它的存在，只知道函数名。我将修改答案。

export const getCountry = () => async dispatch => {
  try {
    const response = await Axios.get('')
    //some code
  } catch (error) {
    //some code
  }
};