Реакция - Как синхронизировать интерфейс с внутренними запросами без использования setTimeout? - PullRequest
Новая
       21

Реакция - Как синхронизировать интерфейс с внутренними запросами без использования setTimeout?

0 голосов
/ 28 мая 2019

Когда я пытаюсь выполнить проверку в реагирующем JS, мне обычно приходится создавать функцию с установленным временем ожидания для синхронизации вызовов API fetch с внешним интерфейсом, поскольку вызовы API fetch занимают немного времени. Есть ли другой способ сделать это? Что-то, что подпадает под лучшие практики, а не повторяющиеся коды?

Я использовал установленное время с 4000-5000, оно работает, но я чувствую, что это не лучший способ сделать это.

Edit- Ниже приведен фрагмент кода того, что я делал до использования тайм-аута, но по какой-то причине при запуске функции «существующие трафины» исчезают из состояния. 

async getExistingReservations(date, trackNo, direction, noTickets) {

        let self = this;
        var trains;
        var ticketRange = 100 - noTickets;

        var data = {
            "date": date,
            "trackNo": trackNo,
            "direction": direction
        }

        console.log(data);

        //get Existing Reservation Details
        await fetch('http://localhost:5000/resRecords/getSeats', {
            method: 'POST',
            body: JSON.stringify(data),
            headers: {'Content-Type': 'application/json'}
        })
            .then(response => {
                return response.json()
            })
            .then(json => {
                console.log(json)
                trains = json.find(function (tickets) {
                    return tickets.noTickets < ticketRange

                })
                self.setState({
                        existingTrains: trains
                    }
                )
            });

    }

1 Ответ

0 голосов
/ 28 мая 2019

Лучший способ решить эту проблему - использовать async -> await.

const getNetworkRequest = async (): string => {
  const r = await makeNetworkRequest();
  console.log(r);

  if(r.data){ return 'got it!' } 
  return 'no data :(';
}
...