区别

相同点

都是一种基于promise的异步解决方案。都可以解决回调地狱问题

不同点

axios是一个封装好的库，需要npm进行安装，fetch是es6新增的api

语法：

javascript 复制代码

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格式，如下：
javascript 复制代码
```
const url = "****"; 
fetch(url) 
    .then(response => response.json()) 
    .then(res=>console.log(res)); 
```

axios:只需要一个then

javascript 复制代码

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的使用，以达到最好的兼容性。