Я создаю приложение для поиска рейсов, которое делает внешние вызовы API. Данные будут реорганизованы и возвращены в компонент результатов поиска.
При отправке данные отправляются в экспресс, и для завершения всех вызовов API требуется около 10 секунд или более.
Я думаю, что в какой-то момент мне понадобится загрузчик во время задержки вызовов API, но я также не уверен, как отправлять/отображать данные.
В нынешнем виде у меня есть две страницы: home.js- '/', где я выполняю поиск и отправка на сервер, и price.js- '/search', которая при загрузке извлекает данные из файла json. а у меня они не подключены
Оба файла работают, но мне нужно их подключить. Когда я нажимаю «Отправить», пользовательские данные отправляются на сервер и выполняются вызовы API, но для того, чтобы увидеть результаты, мне нужно вручную обновить localhost: 3000/search.
В экспресс-приложении после всех вызовов API я попробовал метод res.redirect, однако выданная ошибка заключалась в установке заголовков после отправки клиенту.
В ответ я попытался после отправки перенаправить на страницу поиска. Однако я не смог заставить его перенаправить, а также, как только вызывается страница /search, она извлекает данные из файла. Это произойдет до того, как API завершит запись в файл, и поэтому будут отображены предыдущие результаты поиска.
--in app.js
setTimeout(() => {
Promise.all([promise, promise2]).then(values => {
return res.redirect('http://localhost:3000/search');
});
}, 25000);
I had to wrap the api calls in promises so it will only redirect after all is written to file.
(в реагирующих ценах.js)
componentDidMount() {
fetch('/search')
.then(res => {
return res.json()
})
.then(res => {
console.log(res.toString());
this.setState({flightData: res});
})
.catch(error => console.log(error));
}
home.js
home.js
```
onChange = (e) => {
this.setState({
originOne: e.target.value, originTwo: e.target.value});
};
onSubmit = (e) => {
e.preventDefault();
const { originOne, originTwo ,redirectToResult} = this.state;
};
```
app.js - I have all the functions calling each other in a waterfall style ( probably not the best way I know)
app.post('/', function getOrigins(req,res) {
var OrigOne;
var OrigTwo;
....
function IataCodeSearchOrg1(res, OrigOne, OrigTwo) {
...
findPrices(res,A,B)
}
function findPrices(res, A, B) {
promise = new Promise(function (resolve) {
...
}
}
All the methods are called within eachother. The api calls are in a loop and after each iteration they are written to the json file.
All these functions are in the app.post method and i tried to res.redirect but it did not work.
