Как получить API в React JS
API может быть получен двумя способами, используя
1. Выполните API
2.Axios API
Давайте посмотрим как способы получить данные из API.
Fetch API
Fetch API-это встроенный API на основе обещаний. Давайте посмотрим на пример , Здесь мы взяли JSON Placeholder API, который обычно используется для тестирования.
Приведенный выше код объясняет базовый синтаксис извлечения данных из API. Теперь давайте посмотрим, как мы можем использовать их в нашем приложении, чтобы отобразить данные в компонентах.
Вы можете видеть, что блок кода Fetch теперь ограничен ComponentDidMount. Причина в том, что данные, которые мы получаем от API, должны обновляться в штатах и каждый раз повторно рендер. Чтобы сделать эту работу, мы получаем данные внутри ComponentDidMount.
ComponentDidDmount работает только в компоненте класса, поэтому при получении данных API убедитесь, что вы используете компонент класса
Кроме того, мы объявили такие состояния, как Post, Isloading и ошибка.
1. Пост используется для хранения данных ответа из API
2. Ошибка используется для хранения данных ошибок, если ошибка
Вам может быть интересно, почему это Isloading используется и устанавливается на True. Обычно, для API требуется некоторое время, чтобы получить данные с конечных точек. До тех пор, пока данные не будут извлечены, мы устанавливаем значение Isloading на True, а затем после получения мы настраиваем данные на false.
Здесь приходит основная часть, где мы собираемся представить данные из API.
1. Сначала мы проверяем, если есть какие -либо ошибки при получении данных. Если возникает ошибка, мы отображаем пользователя, что есть некоторая ошибка.
2. РАССКАЗЫ ПРЕДОСТАВЛЯЕМ, Являемся ли Isloading это правда или ложь. Если это правда, мы указываем пользователя, что данные все еще загружаются на отображение. Когда данные получаются, это установлено на False, поэтому в остальной части блока отображается.
3. Мы храним данные API в массиве, называемом Пост в нашем штате. Таким образом, мы используем функцию карты для отображения каждого данных в компоненте. Ключевое значение – это идентификатор объекта для идентификации уникальных данных.
Я думаю, что этого достаточно для Fetch API. Теперь мы можем увидеть, как мы можем получить API с использованием Axios.
Axios API
В отличие от Fetch Api Axios не является встроенным API. Итак, нам нужно установить его.
Затем импортируйте Axios в ваш файл, где вы собираетесь получить данные.
Здесь мы видим основное различие в том, что мы не преобразовали ответ в объект JSON, используя
.then => response.json ()
Есть много преимуществ и недостатков использования как Axios, так и API. Вы можете направить это из Здесь Анкет
Нет большой разницы в оставшихся частях кода, которая похожа на предыдущий.
Это все о извлечении данных из API. Надеюсь, вы, ребята, хорошо понимаете. Спасибо за чтение:-)
Оригинал: “https://dev.to/sarulathadurai/fetch-api-using-axios-and-fetch-api-hcc”