React Native清除AsyncStorage项时遇报错：'await'仅允许在async函数内使用

嘿，我一眼就看到问题出在哪啦！虽然你的外层函数getExceedCountData是async的，但你把await用在了axios的.then()回调函数里面——这个回调函数本身并不是async函数，所以JavaScript会报错说“await只能在async函数里使用”。

具体问题分析 #

你代码里的这段逻辑就是问题核心：

axios
  .get(constants.BASE_URL + "getexceedcount?token=" +token)
  .then(response => {
    if(response.data.status == 1){
      try {
        await AsyncStorage.removeItem("@exceedCount"); // 这里的await所在的函数不是async！
      } catch(exception) {
        console.log('Error Occured');
      }
      // ...其他代码
    }
  })

.then()的回调是普通箭头函数，没有加async关键字，所以里面不能使用await语法，哪怕外层函数是async也不生效。

两种解决办法 #

办法1：给.then()的回调加上async关键字

最简单的修复就是把回调改成async函数，这样里面就能正常用await了：

const getExceedCountData = async () => {
  const token = await AsyncStorage.getItem("@userToken")
  const exceedcount = await AsyncStorage.getItem("@exceedCount")
  if(!exceedcount){
    try {
      setLoading(true)
      axios
        .get(constants.BASE_URL + "getexceedcount?token=" +token)
        .then(async response => { // 这里加上async关键字
          if(response.data.status == 1){
            try {
              await AsyncStorage.removeItem("@exceedCount"); // 现在就不会报错了
            } catch(exception) {
              console.log('Error Occured');
            }
            // 建议给setItem也加上await，避免异步竞态问题
            await AsyncStorage.setItem("@exceedCount", response.data.result);
            setExceedCount({ value:response.data.result, error: '' })
          }
        })
        .catch(error => {
          console.log(error);
        });
    } catch(error) {
      console.log(error);
    } finally {
      setLoading(false); // 建议在finally里关闭loading，避免请求失败后loading一直转
    }
  }else{
    setExceedCount({ value:exceedcount, error: '' })
  }
}

办法2：统一用async/await替代.then()（更推荐）

混合.then()和async/await的写法容易让代码逻辑变乱，更推荐把axios的请求也改成await方式，让整个异步逻辑更清晰线性：

const getExceedCountData = async () => {
  const token = await AsyncStorage.getItem("@userToken")
  const exceedcount = await AsyncStorage.getItem("@exceedCount")
  
  if(!exceedcount){
    try {
      setLoading(true)
      // 用await替代then，直接获取response
      const response = await axios.get(constants.BASE_URL + "getexceedcount?token=" + token);
      
      if(response.data.status == 1){
        try {
          await AsyncStorage.removeItem("@exceedCount");
        } catch(exception) {
          console.log('Error Occured');
        }
        await AsyncStorage.setItem("@exceedCount", response.data.result);
        setExceedCount({ value:response.data.result, error: '' })
      }
    } catch(error) {
      console.log(error);
    } finally {
      setLoading(false);
    }
  }else{
    setExceedCount({ value:exceedcount, error: '' })
  }
}

另外还要提醒你：AsyncStorage.setItem也是异步函数，最好加上await，确保数据存储完成后再执行后续逻辑，避免出现数据不一致的竞态问题哦～

内容的提问来源于stack exchange，提问作者sooraj s pillai