Используем REST API в React при помощи Fetch и Axios

Используем REST API в React при помощи Fetch и Axios
Если вы являетесь React-разработчиком и хотели бы узнать, как начать использовать API в ваших React-приложениях, то эта статья для вас. Мы объясним, что такое REST API и как можно создать простое приложение, которое использует REST API при помощи Fetch API и Axios.

Применить REST API в React-приложениях можно разными методами, но в этом руководстве мы рассмотрим, то, как можно применить REST API, используя два наиболее популярных способа, известных как Axios(HTTP-клиент на основе промисов) и Fetch API(встроенный в браузер веб-API). Мы подробно рассмотрим и реализуем каждый из данных способов и объясним некоторые интересные возможности, которые может предложить каждый из данных способов.

API — данное то, что мы можем использовать, чтобы загрузить React-приложения данными. Есть определенные операции, которые нельзя выполнить на стороне покупателя, так что данные операции выполняются на стороне сервера. Далее мы можем использовать API-интерфейсы для использования данных на стороне покупателя.

API состоят из набора данных, которые часто представлены в формате JSON с указанными конечными точками. Когда мы получаем доступ к данным из API, мы хотим приобрести доступ к определенным конечным точкам в данной структуре API. Также можно сказать, что API — данное соглашение между двумя службами в форме запроса и ответа. Код будет побочным продуктом. Он также включает условия обмена данными.

В React доступны разные методы использования REST API в приложениях, в том числе использование встроенного JavaScript- способа fetch() и Axios, который будет HTTP-клиентом на основе промисов для браузера и Node.js.

Примечание. Хорошее знание ReactJS, React Hooks, JavaScript и CSS пригодится вам, когда вы будете изучать данное руководство.

Давайте начнем с изучения дополнительных сведений о REST API.

Что такое REST API

REST API — данное API, который структурирован в соответствии с REST структурой для API. REST означает «передача состояния представления». Он состоит из разных правил, которым следуют разработчики при создании API.

Преимущества REST API

  1. Прост в освоении и понимании;
  2. Предлагает разработчикам функция организовывать сложные приложения в простые ресурсы;
  3. Внешним покупателям можно без проблем построить REST API без каких-либо сложностей;
  4. Очень без труда масштабируется;
  5. REST API не зависит от языка или платформы, то есть может использоваться на любом языке или работать на любой платформе.

Пример ответа REST API

То, как структурирован REST API, зависит от продукта, для которого он был создан, но при этом должны соблюдаться правила REST.

Ниже приведен пример ответа из Github Open API. Мы будем использовать этот API в этом руководстве для создания React- приложения(чуть позже).

{"login": "hacktivist123","id": 26572907,"node_id": "MDQ6VXNlcjI2NTcyOTA3","avatar_url": "https://avatars3.githubusercontent.com/u/26572907?v=4","gravatar_id": "","url": "https://api.github.com/users/hacktivist123","html_url": "https://github.com/hacktivist123","followers_url": "https://api.github.com/users/hacktivist123/followers","following_url": "https://api.github.com/users/hacktivist123/following{/other_user}","gists_url": "https://api.github.com/users/hacktivist123/gists{/gist_id}","starred_url": "https://api.github.com/users/hacktivist123/starred{/owner}{/repo}","subscriptions_url": "https://api.github.com/users/hacktivist123/subscriptions","organizations_url": "https://api.github.com/users/hacktivist123/orgs","repos_url": "https://api.github.com/users/hacktivist123/repos","events_url": "https://api.github.com/users/hacktivist123/events{/privacy}","received_events_url": "https://api.github.com/users/hacktivist123/received_events","type": "User","site_admin": false,"name": "Shedrack akintayo","company": null,"blog": "https://sheddy.xyz","location": "Lagos, Nigeria ","email": null,"hireable": true,"bio": "☕ Software Engineer | | Developer Advocate|| ❤ Everything JavaScript","public_repos": 68,"public_gists": 1,"followers": 130,"following": 246,"created_at": "2017-03-21T12:55:48Z","updated_at": "2020-05-11T13:02:57Z"}

Ответ, приведенный выше, взят из REST API Github, когда я выполняю GET-запрос к следующей конечной точке https://api.github.com/users/hacktivist123. Он возвращает все сохраненные данные о посетителе с именем hacktivist123. При помощи этого ответа можно решить, каким образом мы будем выводить его в React- приложении.

Применение API при помощи Fetch API

API fetch() будет встроенным способом JavaScript, предназначенным для получения ресурсов от сервера или конечной точки API. Он похож на XMLHttpRequest, но fetch API предлагает более мощный и гибкий набор возможностей.

Он определяет такие понятия, как CORS и семантика заголовка HTTP Origin, перенося их отдельные определения в иные места.

Способ fetch() API принимает обязательный аргумент, представляющий собой путь или URL-адрес ресурса, который вы хотели бы приобрести. Он возвращает промис, который указывает на ответ от запроса, независимо от того, был ли запрос успешным или нет. При желании вы также можете без проблем передать объект настроек инициализации в виде второго аргумента.

После получения ответа доступно пару встроенных способов, позволяющих определить, каково содержимое тела и как его следует обрабатывать.

Разница между Fetch API и jQuery Ajax

Fetch API отличается от jQuery Ajax тремя основными моментами:

  1. Промис, возвращаемый из запроса fetch(), не будет отклонен при возникновении ошибки HTTP, независимо от характера статуса ответа. Вместо этого запрос будет обрабатываться в обычном режиме, если код состояния ответа представляет собой код типа 400 или 500, устанавливается статус «Ok». Запрос будет отклонен только из-за сбоя в сети или если что-то мешает его завершению.
  2. fetch()не разрешает использование межсайтовых файлов cookie, то есть вы не сможете проводить межсайтовый сеанс с использованием fetch().
  3. fetch() также по умолчанию не отправляет куки, если вы не указали для параметры init значение credentials.

Настройки для Fetch API

  • resource Путь к ресурсу, который вы планируете приобрести, данное может быть либо прямая ссылка на путь к ресурсу, либо объект запроса.
  • init Объект, содержащий любые пользовательские параметра или учетные данные, которые вы хотели бы предоставить для запроса fetch(). Ниже приведены некоторые из возможных настроек, которые могут содержаться в объекте init:
    • method для указания способа HTTP-запроса, к примеру, GET, POST и т. д.
    • headers для указания любых заголовков, которые вы хотели бы добавить к запросу, обычно содержится в объекте или литерале объекта.
    • body для определения тела, которое вы хотели бы добавить к запросу: данное может быть объект Blob, BufferSource, FormData, URLSearchParams, USVString, или
    • mode для задания режима, который надо использовать для запроса, к примеру, cors, no-cors или same-origin.
    • credentials необходим для указания учетных данных запроса, которые вы планируете использовать для запроса, этот настройка должен быть предоставлен, если вы используете автоматическую отправку файлов cookie для текущего домена.

Базовый синтаксис для использования Fetch API

Простой запрос на выборку может выглядеть следующим образом:

fetch('https://api.github.com/users/hacktivist123/repos').then(response => response.json()).then(data => console.log(data));

В приведенном выше коде мы извлекаем данные из URL-адреса, который возвращает данные в формате JSON, а далее выводим их в консоль. Простейшая форма использования fetch() часто принимает только один аргумент — путь к ресурсу, который вы хотели бы приобрести, и далее возвращает промис, содержащий ответ на запрос на выборку. Этот ответ будет объектом.

Ответ — данное обычный HTTP-ответ, а не фактический JSON. Иными словами, чтобы приобрести содержимое тела JSON из ответа, нам необходимо настроить ответ на фактический JSON, используя в ответе способ json().

Использование Fetch API в приложениях React

Использование Fetch API в React-приложениях — данное стандартный метод, которым мы использовали бы Fetch API в JavaScript, синтаксис не изменится. Единственная проблема — решить, где выполнить запрос на выборку в React- приложении. Большинство запросов на выборку или HTTP-запросы любого рода обычно выполняются в React Component.

Запрос может быть выполнен либо внутри способа жизненного цикла, если компонент будет компонентом класса, либо внутри хука React useEffect(), если компонент будет функциональным компонентом.

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

import React from 'react';class myComponent extends React.Component { componentDidMount() { const apiUrl = 'https://api.github.com/users/hacktivist123/repos'; fetch(apiUrl).then((response) => response.json()).then((data) => console.log('This is your data', data)); } render() { return <h1>my Component has Mounted, Check the browser 'console' </h1>; }}export default myComponent;

В приведенном выше коде мы создаем простой компонент класса, который после завершения монтирования компонента React выполняет запрос на выборку, выводящий окончательные данные из запроса на выборку по URL-адресу API в консоль браузера.

Способ fetch() принимает путь к ресурсу, который мы хотим извлечь, он присваивается переменной с именем apiUrl. После завершения запроса на выборку возвращается промис, содержащий объект ответа. Далее мы извлекаем из ответа содержимое тела JSON, используя способ json(), и, наконец, выводим окончательные данные из промиса в консоль.

Давайте применим REST API при помощи способа Fetch

В этом разделе мы создадим простое React- приложение, которое использует внешний API, при этом мы будем применять способ Fetch для использования API.

Простое приложение будет выводить все репозитории, которые принадлежат конкретному посетителю, и их описание. В этом руководстве я буду использовать ваше имя посетителя GitHub, вы также можете использовать ваше, если захотите.

Первое, что нам необходимо сделать, данное сгенерировать React-приложение при помощи create-react-app:

npx create-react-app myRepos

Эта команда загрузит новое React-приложение. Когда новое приложение будет создано, остается только запустить приведенную ниже команду и начать создание кода:

npm start

Если все было сделано правильно, мы должны увидеть данное в окне браузера, когда перейдем по адресу localhost:3000 после выполнения приведенной выше команды.

Используем REST API в React с помощью Fetch и AxiosВ папке src создайте новую папку с именем component. Эта папка будет содержать все компоненты React. В новой папке создайте два файла с именами List.js и withListLoading.js. Данные два файла будут содержать компоненты, которые будут необходимы в нашем приложении.

Файл List.js будет обрабатывать вывод рипозиториев в виде списка, а файл withListLoading.js будет содержать компонент высшего порядка, который будет выводиться, когда запрос Fetch будет находиться в процессе выполнения.

Давайте вставим приведенный ниже код в файл List.js, который мы создали внутри папки components:

import React from 'react';const List =(props) => { const { repos } = props; if(!repos || repos.length === 0) return <p>No repos, sorry</p>; return( <ul>     <h2 className='list-head'>Available Public Repositories</h2>      {repos.map((repo) => {        return(          <li key={repo.id} className='list'>            <span className='repo-text'>{repo.name} </span>            <span className='repo-description'>{repo.description}</span>          </li>);      })}    </ul>);};export default List;

Приведенный выше программный код будет базовым компонентом списка React, который выводит данные, в нашем конкретном случае, имена репозиториев и их описания в списке.

Сейчас позвольте мне объяснить код по частям.

const { repos } = props;

Мы инициализируем свойство для компонента, который называется repos.

if (repos.length === 0 || !repos) return <p>No repos, sorry</p>;

Все, что мы делаем здесь — данное создаем условный оператор, который будет выводить сообщение, когда длина repos, получаемого нами из запроса, равна нулю.

return (    <ul>      <h2 className='list-head'>Available Public Repositories</h2>      {repos.map((repo) => {        return (          <li key={repo.id} className='list'>            <span className='repo-text'>{repo.name} </span>            <span className='repo-description'>{repo.description}</span>          </li>        );      })}    </ul>  );

Здесь мы сопоставляем каждый из репозиториев, который будет предоставлен запросом API, и извлекаем каждое из имен репозиториев и их описания, а далее отображаем их в списке.

export default List;

Здесь мы экспортируем компонент List, чтобы иметь функция использовать его где-то ещё.

В файл withListLoading.js, который мы создали в папке components, давайте вставим следующий код:

import React from 'react';function WithListLoading(Component) {  return function WihLoadingComponent({ isLoading, ...props }) {    if (!isLoading) return <Component {...props} />;    return (      <p style={{ textAlign: 'center', fontSize: '30px' }}>        Hold on, fetching data may take some time :)      </p>    );  };}export default WithListLoading;

Приведенный выше код будет компонентом React высшего порядка, который принимает другой компонент, а далее возвращает некоторую логику. В данном случае наш компонент высшего порядка будет ожидать проверки, будет ли текущее состояние isLoadingкомпонента, который он принимает, true или false. Если текущее состояние isLoadingравно true, в нем будет выводиться сообщение Hold on, fetching data may take some time🙂 . ___Сразу же же___ после изменения состояния isLoading на false он отобразит компонент, который принял. В нашем случае данное компонент List .

Давайте вставим приведенный ниже код в файл App.js, доступный внутри папки src .

import React, { useEffect, useState } from 'react';import './App.css';import List from './components/List';import withListLoading from './components/withListLoading';function App() {  const ListLoading = withListLoading(List);  const [appState, setAppState] = useState({    loading: false,    repos: null,  });  useEffect(() => {    setAppState({ loading: true });    const apiUrl = `https://api.github.com/users/hacktivist123/repos`;    fetch(apiUrl)      .then((res) => res.json())      .then((repos) => {        setAppState({ loading: false, repos: repos });      });  }, [setAppState]);  return (    <div className='App'>      <div className='container'>        <h1>My Repositories</h1>      </div>      <div className='repo-container'>        <ListLoading isLoading={appState.loading} repos={appState.repos} />      </div>      <footer>        <div className='footer'>          Built{' '}          <span role='img' aria-label='love'>                      </span>{' '}          with by Shedrack Akintayo        </div>      </footer>    </div>  );}export default App;

Файл App.js будет функциональным компонентом, который использует React Hooks для обработки состояния, а также побочных эффектов.

Позвольте мне объяснить приведенный выше код.

import React, { useEffect, useState } from 'react';import './App.css';import List from './components/List';import withListLoading from './components/withListLoading';

Здесь мы импортируем все необходимые внешние файлы, а также компоненты, которые создали в папке components. Мы также импортируем нужные нам React Hooks.

const ListLoading = withListLoading(List);  const [appState, setAppState] = useState({    loading: false,    repos: null,  });

Здесь мы создаем новый компонент с именем ListLoading и назначаем withListLoadingкомпонентом высшего порядка, обернутым вокруг компонента списка. Далее мы создаем значения состояния loading и repos и используем React Hook useState().

useEffect(() => {    setAppState({ loading: true });    const user = `https://api.github.com/users/hacktivist123/repos`;    fetch(user)      .then((res) => res.json())      .then((repos) => {        setAppState({ loading: false, repos: repos });      });  }, [setAppState]);

Здесь мы инициализируем React Hook useEffect(). В хуке useEffect() мы устанавливаем для начального состояния загрузки значение true, пока данное так, наш компонент более высокого порядка будет выводить сообщение. Далее мы создаем глобальную переменную с именем user и назначаем ей URL API, из которого будем приобретать данные репозиториев.

Далее мы выполняем базовый запрос fetch(), как мы рассмотрели выше, а далее, после того как запрос выполнен, мы устанавливаем для состояния загрузки приложения значение false и заполняем состояние репозитория данными, которые получили из запроса.

return (    <div className='App'>      <div className='container'>        <h1>My Repositories</h1>      </div>      <div className='repo-container'>        <ListLoading isLoading={AppState.loading} repos={AppState.repos} />      </div>    </div>  );}export default App;

Здесь мы в основном просто отображаем Component, который мы назначили компонентом высшего порядка, а также заполняем свойства isLoading и repos значениями состояния.

Сейчас, когда запрос на выборку находится в процессе выполнения, мы должны увидеть в браузере следующее:

Используем REST API в React с помощью Fetch и AxiosКогда запрос на выборку завершился успешно, мы должны увидеть репозитории, отображаемые в виде списка, как показано ниже.

Используем REST API в React с помощью Fetch и AxiosСейчас давайте стилизуем наш проект. Скопируйте и вставьте приведенный ниже код в файл App.css.

@import url('https://fonts.googleapis.com/css2?family=Amiri&display=swap');:root {  --basic-color: #23cc71;}.App {  box-sizing: border-box;  display: flex;  justify-content: center;  align-items: center;  flex-direction: column;  font-family: 'Amiri', serif;  overflow: hidden;}.container {  display: flex;  flex-direction: row;}.container h1 {  font-size: 60px;  text-align: center;  color: var(--basic-color);}.repo-container {  width: 50%;  height: 700px;  margin: 50px;  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);  overflow: scroll;}@media screen and (max-width: 600px) {  .repo-container {    width: 100%;    margin: 0;    box-shadow: none;  }}.repo-text {  font-weight: 600;}.repo-description {  font-weight: 600;  font-style: bold;  color: var(--basic-color);}.list-head {  text-align: center;  font-weight: 800;  text-transform: uppercase;}.footer {  font-size: 15px;  font-weight: 600;}.list {  list-style: circle;}

При помощи приведенного выше кода мы сделаем наше приложение выглядящим более аккуратно, мы присваиваем разные имена классов каждому элементу в файле App.js и, таким образом, используем данные имена классов для стилизации приложения.

После того, как мы применили стили, приложение должно выглядеть следующим образом:

Используем REST API в React с помощью Fetch и AxiosСейчас приложение выглядит гораздо лучше.

Вот как мы можем использовать Fetch API для применения REST API. В следующем разделе мы рассмотрим Axios и то, как мы можем использовать его для применения того же API в том же приложении.

Применение API при помощи Axios

Axios — данное простой в использовании HTTP-клиент для браузера и node.js на основе промисов. Так как Axios основан на промисах, мы можем воспользоваться асинхронностью и ожидать более читабельного и асинхронного кода. При помощи Axios мы получаем функция перехватывать и отменять запросы, а также у нас появится встроенная функцию, которая обеспечивает защиту от подделки межсайтовых запросов на стороне покупателя.

Возможности Axios

  • Перехват запросов и ответов.
  • Упрощенная обработка ошибок.
  • Защита от
  • Поддержка процесса загрузки.
  • Задержка ответа.
  • Функция отмены запросов.
  • Поддержка устаревших браузеров.
  • Автоматическое преобразование данных JSON.

Выполнение запросов при помощи Axios

Выполнить HTTP-запросы при помощи Axios довольно просто. Приведенный ниже программный код демонстрирует выполнение HTTP-запроса.

// Выполняем GET-запросaxios({  method: 'get',  url: 'https://api.github.com/users/hacktivist123',});// Выполняем Post-запросaxios({  method: 'post',  url: '/login',  data: {    firstName: 'shedrack',    lastName: 'akintayo'  }});

Приведенный выше код демонстрирует основные методы выполнения HTTP-запросов GET и POST при помощи Axios.

Axios также предлагает набор сокращенных способов для выполнения разных HTTP-запросов:

  • request(config);
  • get(url[, config]);
  • delete(url[, config]);
  • head(url[, config]);
  • options(url[, config]);
  • post(url[, data[, config]]);
  • put(url[, data[, config]]);
  • patch(url[, data[, config]]).

К примеру, если мы хотим выполнить запрос, аналогичный примеру кода, приведенного выше, при помощи сокращенных способов, мы можем сделать данное следующим образом:

// Выполняем GET-запрос при помощи сокращенного методаaxios.get('https://api.github.com/users/hacktivist123');// Выполняем Post-запрос при помощи сокращенного методаaxios.post('/signup', {    firstName: 'shedrack',    lastName: 'akintayo'});

В приведенном выше коде мы выполняем тот же запрос, что и в предыдущем примере, но на этот раз при помощи сокращенного способа. Axios обеспечивает гибкость и делает HTTP-запросы ещё более читабельными.

Выполнение нескольких запросов при помощи Axios

Axios предлагает разработчикам функция создавать и обрабатывать одновременные HTTP-запросы с использованием способа axios.all(). Этот способ принимает массив аргументов и возвращает один объект промиса, который разрешается только после разрешения всех аргументов, переданных в массиве.

Например, мы можем выполнить пару запросов к API GitHub, используя способ axios.all(), приведенный ниже:

axios.all([  axios.get('https://api.github.com/users/hacktivist123'),  axios.get('https://api.github.com/users/adenekan41')]).then(response => {  console.log('Date created: ', response[0].data.created_at);  console.log('Date created: ', response[1].data.created_at);});

Приведенный выше программный код параллельно выполняет запросы к массиву аргументов и возвращает данные ответа, в нашем случае он отображает в консоль объект created_at из каждого из ответов API.

Давайте применим REST API с покупателем Axios

В этом разделе мы заменим в нашем существующем React-приложении способ fetch() на Axios. Все, что нам необходимо сделать, это установить Axios, а далее использовать его в файле App.js для отправки HTTP-запроса к API GitHub.

Сейчас давайте установим Axios в нашем React-приложении, выполнив одно из следующих действий:

При помощи NPM:

npm install axios

При помощи yarn:

yarn add axios

После завершения установки мы должны будет импортировать axios в App.js. В файле App.js мы добавим в самое начало следующую строку:

import axios from 'axios'

После добавления данной строки кода в файл App.js все, что нам необходимо будет сделать, данное внутри useEffect() прописать следующий программный код:

useEffect(() => {    setAppState({ loading: true });    const apiUrl = 'https://api.github.com/users/hacktivist123/repos';    axios.get(apiUrl).then((repos) => {      const allRepos = repos.data;      setAppState({ loading: false, repos: allRepos });    });  }, [setAppState]);

Возможно, вы заметили, что сейчас мы заменили fetch API на сокращенный способ Axios axios.get, чтобы выполнить get-запрос к API.

axios.get(apiUrl).then((repos) => {      const allRepos = repos.data;      setAppState({ loading: false, repos: allRepos });    });

В этом блоке кода мы выполняем запрос GET, далее возвращаем промис, содержащий данные репозиториев, и присваиваем данные глобальной переменной с именем allRepos. Далее мы устанавливаем для текущего состояния загрузки значение false и также передаем данные из запроса в переменную состояния repos.

Если вы все сделали правильно, то увидите, что наше приложение по-прежнему выводится без каких-либо изменений.

Используем REST API в React с помощью Fetch и AxiosВот как мы можем использовать покупатель Axios для применения REST API.

Fetch или Axios

В этом разделе я перечислю некоторые возможности, а далее расскажу, насколько отлично Fetch и Axios поддерживают их.

  1. Базовый синтаксис Fetch и Axios имеют простые синтаксисы для выполнения запросов. Но Axios имеет в себя преимущество, так как он автоматически конвертирует ответ в JSON, так что при использовании Axios мы пропускаем этап преобразования ответа в JSON, в отличие от Fetch(). Наконец, сокращенные способы Axios могут упростить определенные HTTP-запросы.
  2. Совместимость с браузерами Одна из многих причин, по которой разработчики предпочитают Axios, а не Fetch, заключается в том, что Axios поддерживается во всех основных браузерах и их версиях, в отличие от Fetch, который поддерживается только в Chrome 42+, Firefox 39+, Edge 14+ и Safari 10.1+.
  3. Обработка времени ожидания ответа Задать время ожидания ответов в Axios просто, для этого необходимо задать настройка timeout внутри объекта запроса. Но в Fetch данное сложнее сделать. Fetch предлагает аналогичную возможность при помощи интерфейса AbortController(), но его реализация требует большего числа времени и может привести к путанице.
  4. Перехват HTTP-запросов Axios дает функция разработчикам перехватывать HTTP-запросы. HTTP-перехватчики необходимы, когда нам необходимо настроить HTTP-запросы от приложения к серверу. Перехватчики дают нам функция делать данное без необходимости писать дополнительный программный код.
  5. Одновременное выполнение нескольких запросов Axios дает функция выполнять пару HTTP-запросов с использованием способа all()(мы рассказали об этом выше). fetch() предлагает ту же возможность с использованием способа promise.all(), мы можем выполнить пару fetch() запросов.

Заключение

И Axios, и fetch() — это отличные методы применения API, но я советую использовать fetch() при создании относительно небольших приложений и Axios при создании больших приложений по причинам масштабируемости. Надеюсь, вам понравилось работать с данным руководством, вы можете прочитать больше о применении REST API при помощи Fetch или Axios в источниках по ссылкам ниже. Если у вас есть какие-либо вопросы, вы можете без труда задать их в комментариях к данной статье.

  • Репозиторий для данной статьи доступен на Github .

Дополнительные ресурсы

  • « Структура REST API »
  • « CORS »
  • « HTTP-заголовки »
  • « Fetch API »,

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *