反应原生 如何从承诺中获得回报

Question

我的问题是我想从这个函数中获取一个 json，但我得到的只是一个承诺，以及为什么我选择这种方式，因为在我正在处理的应用程序中它动态工作，但我看到我唯一可以放置这个承诺的地方是 render((

这是我的代码：

var userInfo = (async()=>{
    var value = await AsyncStorage.getItem("@user_info");
    value = JSON.parse(value);
    return value ;
  })();

这是我的结果：

Promise {
 "_40": 0,
 "_55": null,
 "_65": 0,
 "_72": null,
}

但是我想得到的是一个JSON，我必须做什么？

Answer 1

你必须从componentDidMount调用这个函数，在承诺完成后，调用setState 。

下面是如何执行此操作的规范示例：

class User extends React.Component {
  state = { user: null };
  render() {
     return this.state.user && <div>{this.state.user.name}</div>;
  }
  async componentDidMount() {
    const value = await AsyncStorage.getItem("@user_info");
    if (!this._unmounted) {
      const user = JSON.parse(value);
      this.setState({ user: user });
    }
  }
  componentWillUnmount() {
    this._unmounted = true;
  }
}

Answer 2

你应该返回 value.json(( 。试试这个

var userInfo = (async()=>{
    var value = await AsyncStorage.getItem("@user_info");
    return value.json() ;
  })();

此外，AsyncStorage.getItem 是一个异步函数，您需要将其包装在 try 和 catch 中，以防在此过程中发生任何错误

注意：如果在未使用 async 显式声明的函数中使用 await，则最终会出现意外令牌语法错误。

async userInfo(){
    try{
        var value = await AsyncStorage.getItem("@user_info");
        return value.json() ;
    }
    catch(e){
        console.log('caught error', e);
        // Handle exceptions
    }
}

Answer 3

我认为

这是因为您的函数是自执行的。

如果删除自执行，您应该能够访问该值

var userInfo = async () => {
    var value = await AsyncStorage.getItem("@user_info");
    value = JSON.parse(value);
    return value ;
  });

由于AsyncStore.getItem是一个承诺，您也可以使用.then方法

const userInfo = () => {
  AsyncStorage.getItem("@user_info").then((response) => {
     console.log(response);
  });
}