外部/全局访问axios响应数据的方法

Question

这是我第一次开发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
  });

Answer 1

使用异步功能

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

示例

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现在会返回一个Promise。因此，任何调用函数getData的地方都必须等待其响应。

在React中

如果您要获取数据以进行响应，那么您应该了解一些事情。如果是第一个，则如果需要加载数据，则将请求放入componentDidMount生命周期方法中。

您将不得不使其异步。

示例

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

在加载组件时，这将导致附加渲染。有关此here的更多信息。

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