React basic 6 — Использование библиотеки Axios для извлечения данных

Axios — это библиотека, которая упрощает отправку асинхронных HTTP-запросов к конечным точкам REST, и мы будем использовать эту библиотеку для получения некоторых данных изображения из API Unsplash, как указано в Курсе Udemy.

Unsplash — это веб-сайт с общими стоковыми фотографиями, созданный множеством фотографов со всего мира. На их странице документации вы можете узнать, как работает их API, и ключевую информацию, которая вам понадобится для отправки первого запроса Get, например, ваш ключ доступа (вам нужно будет создать учетную запись разработчика и приложение на их веб-сайте, чтобы получить ключ доступа).

Шаг 1. Установите axios в свое приложение React

Просто введите команду npm install -- save axios в свой терминал.

Шаг 2. Импортируйте аксиомы в свое приложение и вызовите запрос Get

Импортируйте аксиомы и введите метод axios.get() с необходимыми аргументами. Есть два аргумента: первый аргумент — это адрес, на который вы будете отправлять запрос; а второй аргумент — это объект, в котором вы можете настроить свой запрос.

По этой ссылке вы увидите документацию по API поиска фотографий Unsplash. Для основы вам понадобится адрес (/search/photos) и ваш термин запроса. Как упоминалось ранее, вам понадобится ключ доступа для авторизации доступа, и вам нужно будет ввести свой ключ после Authorization: Client-ID в объекте заголовка как часть аргумента (ссылка для подробностей).

import React from 'react';
import axios from 'axios';
class App extends React.Component {
   axios.get(‘https://api.unsplash.com/search/photos/', 
      {
         params: { query: 'search-keyword' },
         headers: {
            Authorization: ‘Client-ID [Type your ACCESS_KEY]’
         }
      }
   );
   render() {
   }
};

Шаг 3. Получите ответ от асинхронного запроса

Есть два способа получить объект обещания, ответ на асинхронный запрос. Первый способ — добавить метод .then() после метода initial.get(), как показано ниже.

import React from 'react';
import axios from 'axios';
class App extends React.Component {
   axios.get(‘https://api.unsplash.com/search/photos/', 
      {
         params: { query: 'search-keyword' },
         headers: {
            Authorization: ‘Client-ID [Type your ACCESS_KEY]’
         }
      }
   ).then(response => {
      console.log(response.data.results)
   });
   render() {
   }
};

Альтернативный и более современный способ — использовать async/await, что позволяет нам писать асинхронные коды синхронным образом. Все, что вам нужно сделать, это написать async перед именем метода, в котором выполняется асинхронный запрос, а затем добавить await перед вашим сетевым запросом, в данном случае axios. Чтобы получить доступ к возвращаемому ответу, вам нужно будет назначить переменную сетевому запросу, как показано ниже.

import React from 'react';
import axios from 'axios';
class App extends React.Component {
   async requestMethod(){
      const response = await axios.get(
         ‘https://api.unsplash.com/search/photos/', 
         {
            params: { query: 'search-keyword' },
            headers: {
               Authorization: ‘Client-ID [Type your ACCESS_KEY]’
            }
          }
      );
      console.log(response.data.results);
   }
render() {
}
};

Шаг 4. Сохраните ответ в состоянии

Чтобы данные были полезны в вашем приложении для реагирования, всегда полезно хранить ответ в объекте состояния приложения. Чтобы связать метод, чтобы вы могли получить доступ к состоянию приложения с помощью 'this', вы можете сделать это, переключившись на функцию стрелки, как показано ниже.

state = { images: [] }
requestMethod = async () => {
   const response = await axios.get(
         ‘https://api.unsplash.com/search/photos/', 
         {
            params: { query: 'search-keyword' },
            headers: {
               Authorization: ‘Client-ID [Type your ACCESS_KEY]’
            }
          }
      );
   this.setState({images: response.data.results});
}