axios 和fetch的取舍，以及比较

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

区别

相同点

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