时间戳

首页 > 解决方案 > 在外部/全局访问 axios 响应数据的方式

javascript - 在外部/全局访问 axios 响应数据的方式

问题描述

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

标签： javascriptreactjsfrontend

解决方案

使用异步函数

如果您希望代码以异步方式运行，您需要使用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现在返回一个承诺。因此，调用该函数的任何地方getData也必须等待它的响应。

在反应

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

不过，您必须使其异步。

例子

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

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

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

推荐阅读