Несколько запросов Axios GET от разных компонентов - PullRequest
Новая
       6

Несколько запросов Axios GET от разных компонентов

0 голосов
/ 31 января 2019

У меня есть 2 разных компонента, которые отображаются на главном экране.Оба имеют несколько запросов axios.get для заполнения некоторых данных.Но при первой загрузке страницы только последний компонент возвращает данные, а первый ожидает около 60 секунд, чтобы заполнить свои данные.Я не знаю, это проблема React или проблема моего экспресс-сервера, поэтому вот примеры кодов

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)
})

1 Ответ

0 голосов
/ 04 февраля 2019

Лично я бы просто связывал вызовы axios с помощью .then () 

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

Это без погружения во все ваши компоненты и события жизненного цикла ... но я надеюсь, что это может быть полезно.

...