【问题标题】：Way to access axios response data outside/ global [duplicate]在外部/全局访问axios响应数据的方式[重复]
【发布时间】：2019-05-21 09:04:40
【问题描述】：

这是我第一次开发 React 应用程序。

我将使用 axios 的 get 响应来填充表格。外部 var 是在 axios 范围之外声明和使用的，当我在 axios 范围内更新该 var 时，它不会更新外部 var 数据，如检入调试。

有没有办法在全局范围内/外部使用 axios 的 get 响应？

非常感谢您的帮助。

//rows is declared outside the scope
let rows = [];

  axios
    .get(`url here`)
    .then(res => {
      for (let i = 0; i < res.data.length; i++) {
        //rows.push not reflecting on the react application (inside scope of res)
        rows.push(res.data[i]);
      }
    });

  //rows.push reflecting on the react application (outside scope of res)
  rows.push({
    test: 5.7
  });

【问题讨论】：

只要在异步请求完成后访问rows，您的代码就可以正常工作。

标签： javascript reactjs frontend

【解决方案1】：

使用异步函数

如果您希望代码以异步方式运行，您需要使用 async 关键字并使用 await 等待 Promise 被解析。

示例

async function getData() {
  const rows = [];
  const res = await axios.get('url here');
  for (let i = 0; i < res.data.length; i++) {
    rows.push(res.data[i]);
  }
  rows.push({
    test: 5.7,
  });
}

说明

在您的代码中，带有let rows = []; 的行运行，然后axios.get(... 开始。然后由于代码正在等待一个承诺，它会继续使用rows.push({test: 5.7});，直到数据在then中返回

在我的示例中，每一行都在前一行完成时运行，因为我们等待数据从 promise 返回。它变得更容易阅读。但请注意，函数 getData 现在返回一个承诺。所以任何调用函数getData的地方也必须等待它的响应。

在反应中

如果您在 react 中检索数据，您应该知道一些事情。如果是第一个，如果加载时需要数据，则将请求放入componentDidMount生命周期方法中。

你必须让它异步。

示例

async componentDidMount() {
  const data = await getData();
  this.setState({data});
}

这将在组件加载时导致额外的渲染。还有更多关于这个here的信息。

或者，您可能希望使用像Redux 这样的状态管理库来获取数据。在 Redux 中，您可以使用操作来获取数据，以便从各个组件中删除此过程，并通过库 react-redux 和连接装饰器更轻松地在它们之间共享。

【讨论】：