Применение в React REST API с помощью 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 после выполнения приведенной выше команды.

В папке 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 значениями состояния.

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

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

Теперь давайте немного стилизуем наш проект. Скопируйте и вставьте приведенный ниже код в файл 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 и, таким образом, используем эти имена классов для стилизации приложения.

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

Теперь приложение выглядит намного лучше.

Вот как мы можем использовать 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.

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

Вот как мы можем использовать клиент 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»,

Данная публикация представляет собой перевод статьи «Consuming REST APIs In React With Fetch And Axios» , подготовленной дружной командой проекта Интернет-технологии.ру

Меню