时间戳

首页 > 解决方案 > 非异步函数中的 AsyncStorage

javascript - 非异步函数中的 AsyncStorage

问题描述

以下代码：

 _loginAsync = async () => {
    fetch('localhost:3000/login')
      .then((response) => response.json())
      .then((responseJson) => {
        await AsyncStorage.setItem('my-item', responseJson.item);
        this.props.navigation.navigate('Home');
      })
      .catch((error) => {
        console.error(error);
      });
  }

抛出错误：Can not use keyword 'await' outside an async function。

哪种方法是正确的估价方法my-item？

标签： javascriptreactjs

解决方案

您的.then回调未标记为async，只有外部_loginAsync函数是。

 _loginAsync = async () => {
    fetch('localhost:3000/login')
      .then((response) => response.json())
      .then(async (responseJson) => {
        await AsyncStorage.setItem('my-item', responseJson.item);
        this.props.navigation.navigate('Home');
      })
      .catch((error) => {
        console.error(error);
      });
  }

也就是说，在这里混合所有.then和await形式似乎很奇怪。

仅使用异步/等待

我认为这是最易读的版本。我们只是使用 async/await 直接等待获取，而不是使用它的承诺。

 _loginAsync = async () => {
    try {
        const response = await fetch('localhost:3000/login');
        await AsyncStorage.setItem('my-item', response.json().item);
        this.props.navigation.navigate("Home")
    } catch(error) {
        console.error(error);
    }
  }

直接使用 Promise

您可以（几乎）始终将 async 函数用作返回 Promise 的普通函数。因此，await我们AsyncStorage.setItem可以通过从then.

 _loginAsync = () => {
    fetch('localhost:3000/login')
      .then((response) => response.json())
      .then((responseJson) => AsyncStorage.setItem('my-item', responseJson.item))
      .then(() => this.props.navigation.navigate('Home'))
      .catch((error) => {
        console.error(error);
      });
  }

推荐阅读