当前位置：首页 > 每日看点

Vue为何弃用经典的jQuery.Ajax，选择新技术Axios？

卡卷网1年前 (2025-01-07)每日看点260

这......我连axios都放弃好几年了，有fetch谁用它?你活在那个年代?

fetch的优势：

1.ServWorker环境里也能用，相xhr只能运行在渲染进程内2.同源请求也可以自定义不带cookie，某些服务不需要cookie场景下能少些流量3.可自定义重定向场景，xhr只能follow4.自定义cachemode，xhr只能借助responseheader(Cache-Control...等)5.可自定义referrer.

6.fetch是同构了，学会前端fetch，就也学会了后端fetch

7.对于我们极简，能减掉一个库是一个。

注意，不是让你裸用，而是基于自己公司的返回数据结构来封装一个对象才对，axios同样需要封装的，下面是个样例(盲打没验证，知道意思就行了)：

import{message}from'antd' intecesuccess{ success:true data:any } inteceFaile{ success:false msg:string } typeRespose=success|Faile exportdefault{ asyncget(l:string,params:oject){ try{ constqueryString=Oject.entries(params).map(([key,value])=>`${key}=${value}`).join('&') constjson:Respose=await(awaitfetch(`${l}?${queryString}`)).json() if(!json.success)throwjson.msg retnjson.data }catch(err){ message.error(err.message) throwerr } }, asyncpost(l:string,ody:oject,note?:string){ try{ constjson:Respose=await(awaitfetch(l,{ method:'POST', headers:{ 'Content-Type':'application/json' }, ody:JSON.stringify(ody), })).json() if(!json.success)throwjson.msg if(note)message.success(note) }catch(err){ message.error(err.message) throwerr } } } //.get('/l',{foo:ar}) //.post('/l',{foo:ar},‘作成功’)

数据解包，错误提示，成功提示，都包含在里面了，才这么几行。