axios 和fetch的取舍，以及比较

爱撸猫的小黑人

已于 2023-08-29 15:15:07 修改

阅读量2.3k

点赞数

文章标签： javascript

于 2023-08-29 15:14:02 首次发布

本文链接：https://blog.csdn.net/Michael_Hzs/article/details/132562135

版权

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

区别

相同点

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