Что сделать, чтобы не было undefined?

Question

export const fetchFlight = createAsyncThunk(
  'iata/fetchFlight',
  async (code) => {
    const res = await axios.get(
      `https://airlabs.co/api/v9/flight?flight_iata=${code}&api_key=...`
    );
    console.log(res.data);
    return await res.data.response;
  }

когда запрос как надо(${code} в запросе верный ),все работает. но когда нет , сервер не отдаёт response так как попросту его уже нет,и соответственно идет udefined и не рендерится ничего ,как отловить ошибку ?

Answer 1

Если вы хотите перехватить ошибку, то можно добавить блок catch() для axios

export const fetchFlight = createAsyncThunk(
  'iata/fetchFlight',
  async (code) => {
    const res = await axios
      .get(`https://airlabs.co/api/v9/flight?flight_iata=${code}&api_key=...`)
      .catch((err) => { // Обрабатываем ошибку
        console.error(err);
        return {
          data: {
            response: // Тут то что должно отрендерится при ошибке
          }
        }
      })
    console.log(res.data);
    return await res.data.response;
  }
)

В самом блоке вы можете сами придумать, что возвращать и это станет вашей переменной res. Я, для примера, написал ожидаемую структуру ответа, туда можно положить значения по умолчанию, допустим или нули, тут уже вам решать.

Еще вариант, проверять, что же вернулось в ответе и уже исходя из этого отдавать тот или иной ответ:

export const fetchFlight = createAsyncThunk(
  'iata/fetchFlight',
  async (code) => {
    const res = await axio.get(
      `https://airlabs.co/api/v9/flight?flight_iata=${code}&api_key=...`
    )
    // если res.data.response undefined/null верни другое значение
    return res.data.response ?? { /* Ваш ответ при undefined/null */};
  }
)

Оба способа похожи, разница в том, что первый вариант сработает, если сервер ответит ошибкой, а второй будет всегда проверять значение на undefined/null

Ну и еще вариант, перед тем, как положить значение в состояние компонента, проверьте, что там что то есть. Если в ответе пусто, то, например, не выполнять обновление состояния:

// Если нет fetchFlight то не выполняй обновление состояния
if (fetchFlight) {
  setResponseToStore(fetchFlight)
}

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

export const fetchFlight = createAsyncThunk(
  'iata/fetchFlight',
  async (code) => {
    return await axios
      .get(`https://airlabs.co/api/v9/flight?flight_iata=${code}&api_key=...`)
      .then(res => res.data.response) // Успешно, отдаем ответ
      .catch((err) => { // Ошибка! Обрабатываем и отдаем ответ
        console.error(err);
        return { data: { response: null } } 
      })
  }
)

БЛОГ НА HUSL

Что сделать, чтобы не было undefined?

Ответы (1 шт):