Использование Fetch API для вызова AJAX в React-Native
Недавно я впервые использовал React Native для создания своего первого приложения для IOS. При создании своего приложения я в значительной степени полагался на использование двух API: API Google Vision и API Yelp. В этой статье я собираюсь пройти через процесс запроса информации из запроса API, выполняя вызовы AJAX и используя эту информацию в своем приложении. (Для целей этой статьи я предполагаю, что у вас есть базовые представления об API, и здесь находится некоторая документация, если вам нужно освежить в памяти).
В своем приложении я сначала сделал запрос GET к API Google Vision, который смог получить изображение логотипа ресторана и сразу же распознать название этого ресторана. Затем я передал название этого ресторана в API Yelp, где я сделал запрос GET, чтобы получить отзывы об этом ресторане, которые я в конечном итоге отобразил в приложении для пользователя.
Итак, как я делал эти AJAX-запросы?
React Native предоставляет Fetch API для этих запросов, или вы можете использовать любую стороннюю библиотеку, например axios. В этом конкретном проекте я использовал библиотеку axios, но обнаружил, что библиотека fetch также интуитивно понятна и проста в использовании. Чтобы использовать axios, все, что вам нужно, — это некоторое понимание того, как работают промисы, и вы можете использовать либо .then, либо асинхронный/ожидающий синтаксис ES2017.
В приведенном примере я делаю запрос на получение к конечной точке API обзора бизнеса Yelp, где мне нужно передать бизнес-идентификатор рассматриваемого бизнеса вместе с моим ключом доступа к API Yelp (переменная yelpConfig). Как только я получаю отзывы от Yelp, я просто регистрирую эти отзывы (yelpResponse). Axios уже предполагает, что ответ будет для нас объектом JSON, поэтому нам не нужно указывать этот формат.
Как только я смог получить доступ к информации, которую искал, моим следующим вопросом при создании моего приложения было, где я могу сделать этот запрос?
Есть несколько «лучших практик», которые разработчики используют при принятии решения о том, где писать запросы AJAX. В этом приложении я решил сделать запросы в моем componentDidMount, чтобы я мог также установить состояние моего приложения с информацией в ответах на мои запросы. Например, мое приложение выглядит так.
После передачи идентификатора ресторана в качестве реквизита компонент Restaurant отправит запрос axios get в Yelp, передав запрос на обзоры для этого конкретного ресторана, и установит переменную YelpData в состоянии на ответ от Yelp API с отзывами ресторана.
Если вы помните из этой статьи только одно, то помните, что все функции, которые могут вызывать какие-либо побочные эффекты, вроде AJAX-вызовов, должны выполняться в componentDidMount (или componentDidUpdate).
