JavaScript 中 Axios 和 Fetch 的区别-js教程-PHP中文网

JavaScript 中 Axios 和 Fetch 的区别

Patricia Arquette

发布： 2024-09-25 06:16:32

原创

799 人浏览过

Difference Between Axios & Fetch in Javascript

在 JavaScript 中，Axios 和原生的 Fetch API 都用于发出 HTTP 请求，但它们在特性、易用性和功能方面存在一些差异。详细介绍如下：

1. 易于使用：

Axios：

Axios 简化了发出请求和处理响应。它自动解析 JSON 响应，使其更易于使用。
```
 axios.get('/api/user')
   .then(response => console.log(response.data))
   .catch(error => console.error(error));
```
登录后复制

获取：

使用 fetch 时，需要显式处理 JSON 解析，这增加了一个额外的步骤。

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

登录后复制

2. 响应处理：

Axios： 如果响应状态超出 2xx 范围，axios 会自动解析响应并抛出错误，因此您可以直接在 .catch() 块中处理错误。

获取：

对于 fetch，非 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 提供内置拦截器，允许您全局修改请求或处理响应，这对于添加身份验证令牌、日志记录等非常有用
```
 axios.interceptors.request.use(config => {
   config.headers['Authorization'] = 'Bearer token';
   return config;
 });
```
登录后复制
获取：

Fetch 没有内置拦截器，因此如果需要此行为，您需要手动将 fetch 调用包装在自定义函数中。

4. 浏览器兼容性：

Axios： Axios 适用于较旧的浏览器（IE 11 及更早版本）并在内部处理 polyfill。
获取： Internet Explorer 不支持 Fetch API。您可能需要像whatwg-fetch这样的polyfill来在旧版浏览器中支持它。

5. 数据处理：

Axios：

Axios 在发出 POST 请求时自动对数据进行字符串化，并将 Content-Type 设置为 application/json。它还支持轻松发送 FormData 等其他格式的数据。
```
 axios.post('/api/user', { name: 'John' });
```
登录后复制

获取：

在 fetch 中，您需要手动对数据进行字符串化并设置 POST 请求的标头。

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

登录后复制

6. 取消请求：

Axios：

Axios 内置支持使用 CancelToken 取消请求。

 const source = axios.CancelToken.source();
 axios.get('/api/user', { cancelToken: source.token });
 source.cancel('Request canceled.');

登录后复制

获取：

使用 fetch 时，您需要使用 AbortController 来取消请求，这可能会更复杂一些。
```
 const controller = new AbortController();
 fetch('/api/user', { signal: controller.signal });
 controller.abort();
```
登录后复制