我有 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)
})
最佳答案
就我个人而言,我只是将 axios 调用与 .then() 链接起来
axios.get('api link').then(data => {
let live = data
axios.get('api link2').then(data2 =>
let current = data2
})
})
这并没有深入到您的所有组件和生命周期事件..但我希望可能会有所帮助。
关于javascript - 来自不同组件的多个 Axios GET 请求,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54456984/