Fetch与Axios：区别、联系、优缺点及使用差异

在现代Web开发中，数据交互是必不可少的环节。Fetch API和Axios是两种常用的HTTP客户端工具，用于在浏览器和Node.js环境中发起HTTP请求。下面我们来详细探讨它们的区别、联系、优缺点以及使用上的差异。

一、联系

Fetch API和Axios的主要目的都是发起HTTP请求，实现客户端与服务器之间的数据交互。它们都支持常见的HTTP方法，如GET、POST、PUT、DELETE等，并且可以处理各种类型的响应数据，如JSON、文本、二进制数据等。

二、区别

1. 浏览器支持与兼容性

• Fetch API：是现代浏览器原生支持的API，无需额外引入库。但在旧版本的浏览器（如IE）中不支持，需要使用polyfill来实现兼容性。
• Axios：是一个第三方库，需要引入才能使用。它支持所有主流浏览器，包括旧版本的IE，并且在Node.js环境中也能使用。

2. 响应处理

• Fetch API：返回的是一个Promise对象，需要手动解析响应数据。例如，要获取JSON格式的响应数据，需要调用response.json()方法。

fetch('https://api.example.com/data').then(response => response.json()).then(data => console.log(data)).catch(error => console.error(error));

• Axios：会自动解析响应数据，默认情况下返回的就是解析后的JSON对象。

axios.get('https://api.example.com/data').then(response => console.log(response.data)).catch(error => console.error(error));

3. 请求拦截和响应拦截

• Fetch API：本身不支持请求拦截和响应拦截，需要手动实现。
• Axios：内置了请求拦截和响应拦截功能，可以在请求发送前和响应返回后进行一些处理，如添加请求头、错误处理等。

// 请求拦截
axios.interceptors.request.use(config => {// 在发送请求之前做些什么config.headers.Authorization = 'Bearer ' + token;return config;
}, error => {// 对请求错误做些什么return Promise.reject(error);
});// 响应拦截
axios.interceptors.response.use(response => {// 对响应数据做点什么return response;
}, error => {// 对响应错误做点什么return Promise.reject(error);
});

4. 错误处理

• Fetch API：只有在网络请求失败时才会reject Promise，即使服务器返回404、500等状态码，Promise仍然会resolve。需要手动检查response.ok属性来判断请求是否成功。

fetch('https://api.example.com/data').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：在请求失败时会reject Promise，并且会包含详细的错误信息，如状态码、错误消息等。

axios.get('https://api.example.com/data').then(response => console.log(response.data)).catch(error => {if (error.response) {// 请求已发出，但服务器响应状态码不在 2xx 范围内console.log(error.response.data);console.log(error.response.status);console.log(error.response.headers);} else if (error.request) {// 请求已发出，但没有收到响应console.log(error.request);} else {// 其他错误console.log('Error', error.message);}});

三、优缺点

1. Fetch API

优点

• 原生支持，无需引入额外库，减少项目体积。
• 语法简洁，符合现代JavaScript的Promise风格。

缺点

• 浏览器兼容性差，需要polyfill。
• 响应处理繁琐，需要手动解析。
• 错误处理不够直观。

2. Axios

优点

• 支持所有主流浏览器和Node.js环境。
• 内置请求拦截和响应拦截功能，方便处理请求和响应。
• 自动解析响应数据，错误处理更完善。
• 支持取消请求、自动转换JSON数据等功能。

缺点

• 需要引入第三方库，增加项目体积。

四、使用上的差异和特性

1. 发送POST请求

• Fetch API：

fetch('https://api.example.com/data', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify({ key: 'value' })
}).then(response => response.json()).then(data => console.log(data)).catch(error => console.error(error));

• Axios：

axios.post('https://api.example.com/data', { key: 'value' }).then(response => console.log(response.data)).catch(error => console.error(error));

2. 取消请求

• Fetch API：使用AbortController实现超时取消请求。

const controller = new AbortController();
const signal = controller.signal;// 设置超时时间为3000毫秒
const timeoutId = setTimeout(() => {controller.abort();
}, 3000);fetch('https://api.example.com/data', { signal }).then(response => {clearTimeout(timeoutId);return response.json();}).then(data => console.log(data)).catch(error => {if (error.name === 'AbortError') {console.log('请求超时被取消');} else {console.error(error);}});

• Axios：使用CancelToken实现超时取消请求。

const CancelToken = axios.CancelToken;
const source = CancelToken.source();// 设置超时时间为3000毫秒
const timeoutId = setTimeout(() => {source.cancel('请求超时被取消');
}, 3000);axios.get('https://api.example.com/data', {cancelToken: source.token
}).then(response => {clearTimeout(timeoutId);console.log(response.data);}).catch(error => {if (axios.isCancel(error)) {console.log(error.message);} else {console.error(error);}});

总结

Fetch API和Axios各有优缺点，选择使用哪一个取决于项目的具体需求。如果项目对浏览器兼容性要求不高，且希望减少依赖，可以选择Fetch API；如果需要处理复杂的请求和响应，或者需要支持旧版本的浏览器，Axios是更好的选择。