Как правильно использовать async await?

Question

В файле api.ts

export const searchMovie = async (keyword: string | number) => {
  const response = await fetch(`${BASE_URL}/search-by-keyword?keyword=${keyword}`, options);
  return checkResponse(response)
}

const checkResponse = (response: Response) => {
  response.ok ? response.json() : Promise.reject(`Ошибка: ${response.status}`)
}

В другом файле

  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();

    const data = await searchMovie(input)

  }

Подскажите пожалуйста:

Если вывести в консоль data, то там undefined. В другом файле нужно использовать цепочку then? Т.е. это норм что в одном async/await, а в другом then?
Мне нужно получить данные с сервера, потом отправить их в стор и обработать ошибку. Через цепочки then я сделал, но как сделать без then ?

Через then сделано так, но я хочу этот код переписать на async/await и не понимаю как правильно это делается:

  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();

    searchMovie(input)
      .then((data: Movies) => {
        dispatch(showPreloader());
        dispatch(searchAction(data));
      })
      .catch((err) => console.log(err))
      .finally(() => {
        setTimeout(() => {
          dispatch(hidePreloader());
        }, 500);
      });
  }

Answer 1

Проблема с кодом

const checkResponse = (response: Response) => {
  response.ok ? response.json() : Promise.reject(`Ошибка: ${response.status}`)
}

В том, что функция checkResponse ничего не возвращает. Чтобы она начала возвращать что-то, нужно либо добавить return

return response.ok ? response.json() : Promise.reject(`Ошибка: ${response.status}`)

либо убрать фигурные скобки

const checkResponse = (response: Response) => 
  response.ok ? response.json() : Promise.reject(`Ошибка: ${response.status}`)

.then и остальное переводится в async/await один к одному, а именно просто убирая then, а вместо catch и finally используя ключевые слова

try {
    var data: Movies = await searchMovie(input)
    dispatch(showPreloader());
    dispatch(searchAction(data));
} catch(err) {
    console.log(err)
} finally {
    setTimeout(() => {
      dispatch(hidePreloader());
    }, 500);
};

БЛОГ НА HUSL

Как правильно использовать async await?

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