来自不同组件的多个 Axios GET 请求答案

【问题标题】：Multiple Axios GET requests from different components来自不同组件的多个 Axios GET 请求
【发布时间】：2019-06-24 16:50:26
【问题描述】：

我有 2 个不同的组件在主屏幕中呈现。两者都有多个 axios.get 请求来填充一些数据。但是在第一页加载时，只有最后一个组件返回数据，第一个组件等待大约 60 秒来填充它的数据。我不知道是 React 问题还是我的 Express 服务器问题，所以这里是示例代码

Main.JS

class App extends Component {
  render() {
    return (
      <div>
        <ComponentA />
        <ComponentB />
      </div>
    );
  }
}

ComponentA.JS

 async componentDidMount() {
        const live = await axios.get('api link');
        const current = await axios.get('api link');
        this.setState({
            some states
        })
    }

ComponentB.JS

async componentDidMount() {
        const live = await axios.get('api link');
        this.setState({
            some states
        })
    }

express.js

var express = require('express');
var app = express();
var sql = require('mssql');

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Credentials", "true");
    res.header("Access-Control-Allow-Headers", "Origin,Content-Type, Authorization, x-id, Content-Length, X-Requested-With");
    res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
    next();
});

var server = app.listen(8081, function () {
    var host = server.address().address
    var port = server.address().port
});

app.get('/api', function (req, res) {
    res.end(some values)
})

【问题讨论】：

它从服务器获取数据所花费的时间，您在您的第一个组件中对您的 API 进行了一些更昂贵的操作？
不，它只返回 4 位数字。如果我单独打电话给他们，我可以获取数据。这就是为什么我不确定我的快递服务器是否可以处理多个请求
在 Postman 中测试你的 API？如果它无法正常工作，请在此处发布您的代码
@ggnoredo 您需要使 API(axios) 调用异步，而不是使您的生命周期方法异步。

标签： javascript node.js reactjs express axios

【解决方案1】：

我个人只是用 .then() 链接 axios 调用

    axios.get('api link').then(data => {
    let live = data
    axios.get('api link2').then(data2 =>
    let current = data2
         })
    })

这并没有深入了解您的所有组件和生命周期事件..但我希望可能会有所帮助。

【讨论】：

我不确定这是否是“最佳”或“正确”的方法，但它确实有效。谢谢