Разница между Fetch и Axios.js для выполнения HTTP-запросов

Опубликовано: 2 Августа, 2021

Одна из фундаментальных задач любого веб-приложения - общаться с серверами по протоколу HTTP. Этого легко добиться с помощью Fetch или Axios. Fetch и Axios очень похожи по функциональности. Некоторые разработчики предпочитают Axios встроенным API из-за простоты использования. API Fetch отлично воспроизводит ключевые функции Axios.

Fetch: API Fetch предоставляет метод fetch (), определенный для объекта окна. Он также предоставляет интерфейс JavaScript для доступа и управления частями конвейера HTTP (запросы и ответы). Метод выборки имеет один обязательный аргумент - URL-адрес извлекаемого ресурса. Этот метод возвращает обещание, которое можно использовать для получения ответа на запрос.

  • Программа:




    fetch( 'path-to-the-resource-to-be-fetched' )
    .then((response) => {
    // Code for handling the response
    })
    . catch ((error) => {
    // Code for handling the error
    });

Axios: Axios - это библиотека Javascript, используемая для выполнения HTTP-запросов от node.js или XMLHttpRequests из браузера, и она поддерживает API-интерфейс Promise, который является родным для JS ES6. Его можно использовать для перехвата HTTP-запросов и ответов и обеспечивает защиту от XSRF на стороне клиента. Он также имеет возможность отменять запросы.

  • Программа:




    axios.get( 'url' )
    .then((response) => {
    // Code for handling the response
    })
    . catch ((error) => {
    // Code for handling the error
    })

Различия между Axios и Fetch:

Axios Принести
У Axios есть URL-адрес в объекте запроса. Fetch не имеет URL в объекте запроса.
Axios - это автономный сторонний пакет, который можно легко установить. Fetch встроен в большинство современных браузеров; установка как таковая не требуется.
Axios имеет встроенную защиту от XSRF. Fetch не работает.
Axios использует свойство данных. Fetch использует свойство body.
Данные Axios содержат объект . Тело Fetch необходимо сделать нити .
Запрос Axios в порядке, если статус равен 200, а statusText - «ОК» . Запрос на выборку в порядке, если объект ответа содержит свойство ok .
Axios выполняет автоматические преобразования данных JSON . При обработке данных JSON выборка - это двухэтапный процесс: сначала выполняется фактический запрос; во-вторых, для вызова метода .json () в ответе.
Axios позволяет отменить запрос и тайм-аут запроса . Fetch не работает.
Axios имеет возможность перехватывать HTTP-запросы . По умолчанию Fetch не позволяет перехватывать запросы.
Axios имеет встроенную поддержку процесса загрузки . Fetch не поддерживает загрузку.
Axios имеет широкую поддержку браузеров . Fetch поддерживает только Chrome 42+, Firefox 39+, Edge 14+ и Safari 10.1+ (это известно как обратная совместимость).