Question

我使用以下代码从react应用程序中的API获取数据。获取数据需要时间，因此变量没有获取值。我如何在这里执行异步可观察等待操作？我是如此新的反应，仍然不清楚如何做到

            import React from 'react';
            import ReactDOM from 'react-dom';
            import { createStore } from 'redux';

            import App from './App';
            import { reducers } from './reducers/index';
            import { Provider } from 'react-redux';
            var request = require('request');

            var options = {
              url: 'http://localhost:8181/api/oranges',
            }


            function get(options) {
              let data = {};
              request(options, function(error, response, body){
                  if (!error && response.statusCode == 200) {
                      data = body;
                      console.log(data)
                  }
              });
              console.log(data)
              return data;
            }
            let p =  get(options);
            console.log(p);

Answer 1

如果您使用的是redux，请将api调用移至动作函数，例如

const callAPIaction = () => (dispatch) => {
  dispatch({type: API_CALL_INPROGRESS, requestInProgress: true})
  request(apicallconfig)
   .then(response => dispatch ({type: API_CALL_SUCCESS, data: response})
   .catch(err => dispatch({type: API_CALL_ERR, err})

然后在您连接的反应类/函数中，您会查看商店中的状态变量，例如requestInProgress，data和err，以决定要呈现的内容。这假设您已配置redux-thunk

Reactjs请求库如何异步获取数据

1 个答案: