«Если рабочий хочет хорошо выполнять свою работу, он должен сначала заточить свои инструменты» — Конфуций, «Аналитики Конфуция. Лу Лингун»
титульная страница > программирование > Разница между Axios и Fetch в Javascript

Разница между Axios и Fetch в Javascript

Опубликовано 1 ноября 2024 г.
Просматривать:435

Difference Between Axios & Fetch in Javascript

В JavaScript для выполнения HTTP-запросов используются как Axios, так и собственный Fetch API, но они имеют некоторые различия с точки зрения функций, простоты использования и функциональности. Вот разбивка:

1. Простота использования:

  • Аксиомы:

    Axios упрощает отправку запросов и обработку ответов. Он автоматически анализирует ответы JSON, что упрощает работу.

     axios.get('/api/user')
       .then(response => console.log(response.data))
       .catch(error => console.error(error));
    
  • Принести:

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

     fetch('/api/user')
       .then(response => response.json())
       .then(data => console.log(data))
       .catch(error => console.error(error));
    

2. Обработка ответов:

  • Аксиос: Axios автоматически разрешает ответ и выдает ошибку, если статус ответа выходит за пределы диапазона 2xx, поэтому вы можете напрямую обрабатывать ошибки в блоке .catch().
  • Принести:

    При выборке коды состояния, отличные от 2xx (например, 404 или 500), не рассматриваются как ошибки. Вам придется вручную проверить статус ответа и при необходимости выдать ошибку.

     fetch('/api/user')
       .then(response => {
         if (!response.ok) throw new Error('Network response was not ok');
         return response.json();
       })
       .then(data => console.log(data))
       .catch(error => console.error(error));
    

3. Перехват запросов и ответов:

  • Аксиомы:

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

     axios.interceptors.request.use(config => {
       config.headers['Authorization'] = 'Bearer token';
       return config;
     });
    
  • Принести:

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

4. Совместимость браузера:

  • Аксиос: Axios работает в старых браузерах (IE 11 и более ранних версиях) и самостоятельно обрабатывает полифилы.
  • Принести: API-интерфейс Fetch не поддерживается в Internet Explorer. Вам может понадобиться полифил, например Whatwg-fetch, для поддержки его в старых браузерах.

5. Обработка данных:

  • Аксиомы:

    Axios автоматически преобразует данные в строку при выполнении запросов POST и устанавливает для Content-Type значение application/json. Он также с легкостью поддерживает отправку данных в других форматах, таких как FormData.

     axios.post('/api/user', { name: 'John' });
    
  • Принести:

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

     fetch('/api/user', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ name: 'John' })
     });
    

6. Отмена запросов:

  • Аксиомы:

    Axios имеет встроенную поддержку отмены запросов с помощью CancelToken.

     const source = axios.CancelToken.source();
     axios.get('/api/user', { cancelToken: source.token });
     source.cancel('Request canceled.');
    
  • Принести:

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

     const controller = new AbortController();
     fetch('/api/user', { signal: controller.signal });
     controller.abort();
    

7. Обработка ошибок:

  • Аксиос: Axios автоматически выдает ошибки для ответов, отличных от 2xx, а обработка ошибок становится более последовательной и централизованной.
  • Принести: Fetch требует более ручной обработки ошибок, поскольку он отклоняет обещание только для сетевых ошибок, а не для кодов состояния ошибок HTTP.

Заключение:

  • Axios более функционален, прост в использовании и обеспечивает лучшую абстракцию для обработки запросов.
  • Fetch — это современный собственный API, который требует меньше зависимостей, но требует больше ручной работы для обработки определенных функций, таких как ошибки, перехватчики и обработка данных.

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

Заявление о выпуске Эта статья воспроизводится по адресу: https://dev.to/pulkitgovrani/difference-between-axios-fetch-in-javascript-25od?1. Если есть какие-либо нарушения, пожалуйста, свяжитесь с исследованием[email protected], чтобы удалить его.
Последний учебник Более>

Изучайте китайский

Отказ от ответственности: Все предоставленные ресурсы частично взяты из Интернета. В случае нарушения ваших авторских прав или других прав и интересов, пожалуйста, объясните подробные причины и предоставьте доказательства авторских прав или прав и интересов, а затем отправьте их по электронной почте: [email protected]. Мы сделаем это за вас как можно скорее.

Copyright© 2022 湘ICP备2022001581号-3