React. js: установить ограничение времени для ax ios ожидания ответа

Question

Я хочу установить ограничение по времени для запроса axios, чтобы дождаться ответа

Например, я отправил запрос от клиента, тогда я хотел бы настроить систему на ожидание только 8 секунд, а затем отобразить время ожидания запроса

Пожалуйста, посмотрите мой axios запрос ниже

executeJwtAuthenticationService(username, password) {
    return axios.post(`${API_URL_LOCAL}`, {
      username,
      password,
    });
  }

Как бы мне сделать его похожим на этот?

axios({
  method: 'post',
  url: '/user',
  timeout: 8000, // Let's say you want to wait at least 8 seconds
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
})

Answer 1

Если вы пытаетесь реализовать свой axios.post запрос со встроенной версией, вам просто нужно знать, он будет принимать конфигурации как отдельный объект .

Итак, ваш окончательный код должно выглядеть примерно так:

axios.post(`${API_URL_LOCAL}`, {
  username,
  password,
}, {
  timeout: 8000
});

ПРИМЕЧАНИЕ: Для получения дополнительной информации вы можете прочитать this .

Answer 2

Попробуйте Promise.race:

executeJwtAuthenticationService(username, password) {
  const timeoutPromise = new Promise(resolve => {
    const timeout = setTimeout(() => {
      clearTimeout(timeout);
      resolve('It took too long...');
    }, 8000);
  });

  const request = axios.post(`${API_URL_LOCAL}`, {
    username,
    password,
  }); 

  return Promise.race([timeoutPromise, request]);
}

Вероятно, вы захотите добавить аналогичный тайм-аут обещания для 'catch' на случай, если ответ займет много времени и в конце концов не удастся. Читайте о гонке на MDN