wordpress 网校主题,网站文章内容优化方案,某某网站安全建设方案,网站建设财务上怎么处理废话不多说#xff0c;直接直捣黄龙#xff1a;
区别
相同点
都是一种基于promise的异步解决方案。都可以解决回调地狱问题
不同点 axios是一个封装好的库#xff0c;需要npm进行安装#xff0c;fetch是es6新增的api 语法#xff1a; fetch(url, { method: GET, // o…废话不多说直接直捣黄龙
区别
相同点
都是一种基于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(resconsole.log(res)); axios:只需要一个then const url ****;axios.get(url)
.then(response console.log(response.data)); 当请求方法为post的时候fetch需要把请求参数进行JSON.stringify()来转化参数 错误处理 fetch需要判断响应体里的status200或oktrue其他状态需要手动处理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的使用以达到最好的兼容性。
