废话不多说，直接直捣黄龙：
区别
相同点
- 都是一种基于promise的异步解决方案。都可以解决回调地狱问题
不同点
-
axios是一个封装好的库，需要npm进行安装，fetch是es6新增的api
-
语法：
fetch(url, { method: 'GET', // other options: POST, PUT, DELETE, etc. headers: { 'Content-Type': 'application/json'}, body: JSON.stringify({}), })axios(url, { // configuration options }) -
处理json数据
-
fetch：需要两个then，要再第一个then里将响应体转成json格式，如下：
const url = "****"; fetch(url) .then(response => response.json()) .then(res=>console.log(res)); -
axios:只需要一个then
const url = "****";axios.get(url) .then(response => console.log(response.data));
-
-
当请求方法为post的时候，fetch需要把请求参数进行JSON.stringify()来转化参数
-
错误处理：
- fetch需要判断响应体里的status=200，或ok=true，其他状态需要手动处理
- axios可以额外捕捉404或者其他http错误
-
超时处理：
-
axios只需要再option选项里填写timeout属性，超出后自动在控制台抛出错误
-
fetch则需要AbortController接口来取消，如下
const url = "*****" const controller = new AbortController(); const signal = controller.signal; setTimeout(() => controller.abort(), 4000);fetch(url, {signal: signal}).then((response) => response.json()).then(console.log).catch((err) => {console.error(err.message);});
-
-
效率：由于Fetch和axios都是基于
promise的，因此它们不应该导致任何性能问题。这里比较的是他们的获取速度。经测试得知：fetch略快与axios
总结：
通过比较可以看出，对于较大型项目有大量http请求，需要良好的错误处理或http拦截的应用，Axios是一个更好的解决方案。在小型项目的情况下，只需要少量API调用，Fetch也是一个不错的解决方案。大多数浏览器和Node.js环境都支持Axios，而现在浏览器仅支持Fetch，所以使用H5或PC的项目使用Axios相对较好，使用App内嵌H5项目，依赖App壳子中的浏览器，尽量减少Fetch的使用，以达到最好的兼容性。
