В JavaScript для выполнения HTTP-запросов используются как Axios, так и собственный Fetch API, но они имеют некоторые различия с точки зрения функций, простоты использования и функциональности. Вот разбивка:
Аксиомы:
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));
Принести:
При выборке коды состояния, отличные от 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));
Аксиомы:
Axios предоставляет встроенные перехватчики, позволяющие изменять запросы или обрабатывать ответы глобально, что может быть полезно для добавления токенов аутентификации, ведения журналов и т. д.
axios.interceptors.request.use(config => { config.headers['Authorization'] = 'Bearer token'; return config; });
Принести:
Fetch не имеет встроенных перехватчиков, поэтому вам придется вручную обернуть вызов fetch в пользовательскую функцию, если вам нужно такое поведение.
Аксиомы:
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' }) });
Аксиомы:
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();
Если вы предпочитаете больше контроля над своими запросами, вы можете использовать выборку. Если вам нужно что-то, что упрощает HTTP-запросы, лучшим вариантом будет axios.
Отказ от ответственности: Все предоставленные ресурсы частично взяты из Интернета. В случае нарушения ваших авторских прав или других прав и интересов, пожалуйста, объясните подробные причины и предоставьте доказательства авторских прав или прав и интересов, а затем отправьте их по электронной почте: [email protected]. Мы сделаем это за вас как можно скорее.
Copyright© 2022 湘ICP备2022001581号-3