http通信之axios vs fecth该如何选择？

在HTTP通信中，axios和fetch都是常用的库或原生API用于发起网络请求。两者各有特点，适用于不同的场景。下面详细介绍它们的差异和各自的优势：

fetch

特点：
原生支持：fetch是现代浏览器内置的API，不需要额外引入任何库。
基于Promise：使用Promise进行异步操作，更符合ES6+的编程风格。
请求/响应模型：采用请求/响应模式，代码结构相对清晰。
默认不携带Cookie：不像XMLHttpRequest那样默认携带Cookie，除非在请求头中显式设置。

<template><div><h1>Fetch Example</h1><button @click="fetchDataWithFetch">Fetch Data with Fetch</button><p v-if="data">{{ data }}</p></div>
</template><script>
export default {data() {return {data: null,};},methods: {async fetchDataWithFetch() {try {const response = await fetch('https://api.example.com/data');if (!response.ok) {throw new Error('Network response was not ok ' + response.statusText);}this.data = await response.json();} catch (error) {console.error('Error fetching data with Fetch:', error);}},},
};
</script><style scoped>
/* Your styles here */
</style>

优势：
简洁易用：对于简单的GET和POST请求，使用fetch可以直接编写出较短的代码。
基于Promise：利用Promise的特性可以很方便地进行链式调用和错误处理。
浏览器原生支持：无需额外引入库，适用于现代浏览器环境。
缺点：
不自动转换JSON：fetch返回的响应体需要手动调用.json()方法来解析为JavaScript对象。
错误处理机制单一：只有在网络问题（如断网）时才会抛出错误，对于4xx和5xx状态码不会抛出异常，而是正常返回。

axios

特点：
第三方库：需要额外引入axios库，可以通过npm或CDN引入。

npm install axios

基于Promise：同样使用Promise进行异步操作。
默认携带Cookie：可以自动发送和接收Cookies。
请求配置灵活：支持更多的请求配置选项，如基础URL、超时时间等。
使用 axios

<template><div><h1>Axios Example</h1><button @click="fetchDataWithAxios">Fetch Data with Axios</button><p v-if="data">{{ data }}</p></div>
</template><script>
import axios from 'axios';export default {data() {return {data: null,};},methods: {async fetchDataWithAxios() {try {const response = await axios.get('https://api.example.com/data');this.data = response.data;} catch (error) {console.error('Error fetching data with Axios:', error);}},},
};
</script><style scoped>
/* 样式 */
</style>

优势：

自动转换JSON：对于响应体为JSON格式的数据，axios会自动将其解析为JavaScript对象。
错误处理全面：不仅可以捕获网络问题的错误，还能捕获4xx和5xx状态码的HTTP错误。
请求配置灵活：提供了丰富的请求配置选项，可以方便地进行全局或局部的配置。
拦截器功能：支持请求和响应的拦截器，可以在请求发送前或响应返回后进行一些处理。

缺点：

需要引入库：相比fetch，使用axios需要额外引入一个第三方库。
不原生支持：因为是第三方库，可能在某些旧版本浏览器中不被支持，需要做polyfill或降级处理。

总结

如果你的项目已经使用了其他第三方库，并且希望统一管理网络请求，或者对请求配置和拦截器功能有较高需求，axios是一个不错的选择。
如果你希望保持项目的简洁，且不需要过多的额外功能，fetch可能是更好的选择，尤其是在现代浏览器环境中。
最终的选择应根据项目的具体需求、团队的技术栈以及个人的偏好来决定。