废话不多说，直接直捣黄龙：

区别

相同点

• 都是一种基于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的使用，以达到最好的兼容性。

来源地址：https://blog.csdn.net/Michael_Hzs/article/details/132562135