Question

我希望在重新打开没有互联网连接的React Native应用程序时保留已获取的API数据（数组）。

以状态获取和存储数据，AsyncStorage使用Axios工作正常。

在没有互联网连接的情况下打开应用程序时，会有无限的加载时间，我无法弄清楚如何触发捕获承诺并使用我存储的数据作为状态的新数据。

这是我的代码：

componentWillMount(){
        axios.get('http://example.com/api_get_request')
          .then((response) => {
              console.log('connection ok!');
              AsyncStorage.setItem('landen', JSON.stringify(response.data));
              this.setState({
                landen: response.data,
                loading: false,
              });
              //DATA SET TO STATE + ASYNCSTORAGE
          })
          .catch(error => {
            console.log(error.response);
            AsyncStorage.getItem('landen').then((value) => {
              this.setState({
                landen: JSON.parse(value),
                loading: false,
              });
              //NO CONNECTION -> ASYNC DATA
            });
          }); 
}

Answer 1

您可以使用NetInfo检查互联网连接，并根据连接执行您的代码，如下所示。

componentWillMount() {
  NetInfo.isConnected.fetch().then(isConnected => {
    if (isConnected) {
      axios.get('http://example.com/api_get_request')
        .then((response) => {
          AsyncStorage.setItem('landen', JSON.stringify(response.data));
          this.setState({
            landen: response.data,
            loading: false,
          });
        })
    } else {
      AsyncStorage.getItem('landen').then((value) => {
        this.setState({
          landen: JSON.parse(value),
          loading: false,
        });
      });
    }
  });
}

请注意，上面的代码未经过测试，您可能需要在这里和那里解决一些问题，但您将获得这个概念。此外，您可能必须添加catch块以捕获意外错误。

Answer 2

要管理一些小信息，最好使用AsyncStorage。但是，如果您需要管理所有应用程序状态，将代码传递给Redux并使用以下库是一个很好的做法：

https://github.com/rt2zz/redux-persist
https://github.com/redux-offline/redux-offline

在AsyncStorage中保留API数据

2 个答案: