vue3和ts封装axios及使用mock.js的方法是什么(axios,mock.js,vue3,开发技术)

前言

我们要注意区分 Axios 和 Ajax ：

Ajax 是一种技术统称，技术内容包括：HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest，用于浏览器与服务器之间使用异步数据传输(HTTP 请求),做到局部请求以实现局部刷新，使用是基于XMLHttpRequest 进行使用；

Axios 是 一个基于 promise 的 HTTP 库，是一个是第三方库

主要技术栈：vue3，ts，axios，mock.js，elementPlus

一、axios 的依赖安装与处理

1. 依赖安装

使用异步网络请求肯定离不开loading、message 等提示，今天我们配合 elementPlus 一起使用；

//安装axiosnpminstallaxios--save//安装elementPlusnpminstallelement-plus--save

2. 全局 axios 封装

src 目录下 utils 目录下，新建 request.ts，因为使用的是TS，需要提前定义数据格式：

• 定义请求数据返回的格式，需要提前确认好

• 定义 axios 基础配置信息

• 请求拦截器：所有请求最先到达的地方，我们可以在此自定义请求头信息（比如：token、多语言等等）

• 响应拦截器：返回数据最先到达的地方，我们可以在此处理异常信息（比如：code为401重定向至登录、code为500提示错误信息）

importaxios,{AxiosInstance,AxiosError,AxiosRequestConfig,AxiosResponse}from"axios";import{ElMessage,ElLoading,ElMessageBox}from"element-plus";//responseinterface{code,msg,success}//不含datainterfaceResult{code:number,success:boolean,msg:string}//requestinterface，包含datainterfaceResultData<T=any>extendsResult{data?:T}enumRequestEnums{TIMEOUT=10000,//请求超时requesttimeoutFAIL=500,//服务器异常servererrorLOGINTIMEOUT=401,//登录超时logintimeoutSUCCESS=200,//请求成功requestsuccessfully}//axios基础配置constconfig={//默认地址，可以使用processNode内置的，项目根目录下新建.env.developmentbaseURL:process.env.VUE_APP_BASE_APIasstring,timeout:RequestEnums.TIMEOUTasnumber,//请求超时时间withCredentials:true,//跨越的时候允许携带凭证}classRequest{service:AxiosInstance;constructor(config:AxiosRequestConfig){//实例化sericethis.service=axios.create(config);/***请求拦截器*request->{请求拦截器}->server*/this.service.interceptors.request.use((config:AxiosRequestConfig)=>{consttoken=localStorage.getItem('token')??'';return{...config,headers:{'customToken':"customBearer"+token}}},(error:AxiosError)=>{//请求报错Promise.reject(error)});/***响应拦截器*response->{响应拦截器}->client*/this.service.interceptors.response.use((response:AxiosResponse)=>{const{data,config}=response;if(data.code===RequestEnums.LOGINTIMEOUT){//表示登录过期，需要重定向至登录页面ElMessageBox.alert("Sessionexpired","Systeminfo",{confirmButtonText:'Relogin',type:'warning'}).then(()=>{//或者调用logout方法去处理localStorage.setItem('token','');location.href='/'})}if(data.code&&data.code!==RequestEnums.SUCCESS){ElMessage.error(data);returnPromise.reject(data);}returndata},(error:AxiosError)=>{const{response}=error;if(response){this.handleCode(response.status);}if(!window.navigator.onLine){ElMessage.error("网络连接失败，请检查网络");//可以重定向至404页面}})}publichandleCode=(code:number):void=>{switch(code){case401:ElMessage.error("登陆失败，请重新登录");break;case500:ElMessage.error("请求异常，请联系管理员");break;default:ElMessage.error('请求失败');break;}}//通用方法封装get<T>(url:string,params?:object):Promise<ResultData<T>>{returnthis.service.get(url,{params});}post<T>(url:string,params?:object):Promise<ResultData<T>>{returnthis.service.post(url,params);}put<T>(url:string,params?:object):Promise<ResultData<T>>{returnthis.service.put(url,params);}delete<T>(url:string,params?:object):Promise<ResultData<T>>{returnthis.service.delete(url,{params});}}exportdefaultnewRequest(config)

3. 实际使用

src 目录下新增 api/index.ts

• 定义请求的参数类型

• 定义响应想具体参数类型

这里我们使用到ts 中的 namespace ，实际开发中我们很多 api 可能会出现相同名字不同含义，所以我们使用 namespace 进行定义

importrequestfrom"@/utils/request";namespaceUser{//loginexportinterfaceLoginForm{userName:string,password:string}}exportnamespaceSystem{exportinterfaceInfo{path:string,routeName:string}exportinterfaceResponseItem{code:number,items:Array<Sidebar>,success:boolean}exportinterfaceSidebar{id:number,hashId:string|number,title:string,routeName:string,children:Array<SidebarItem>,}exportinterfaceSidebarItem{id:number,parentId:number,hashId:string|number,title:string,}}exportconstinfo=(params:System.Info)=>{//responseif(!params||!params.path)thrownewError('Paramsandparamsinpathcannotempty!')//这里因为是全局的一个info，根据路由地址去请求侧边栏，所需不用把地址写死returnrequest.post<System.Sidebar>(params.path,{routeName:params.routeName})}

Vue 文件中调用

<scriptlang="ts"setupname="Sidebar">import{ref,reactive,onBeforeMount}from"vue"import{info}from"@/api"import{useRoute}from"vue-router"constroute=useRoute();letloading=ref<boolean>(false);letsidebar=ref<any>({});const_fetch=async():Promise<void>=>{constrouteName=route.nameasstring;constpath='/'+routeName.replace(routeName[0],routeName[0].toLocaleLowerCase())+'Info'try{loading.value=true;constres=awaitinfo({path,routeName});if(!res||!res.data)return;sidebar.value=res.data;}finally{loading.value=false}}onBeforeMount(()=>{_fetch();})</script>

二、 mock.js 的依赖安装与处理

1. 安装依赖

#安装npminstallmockjs--save

在 ts 中使用时，我们需要现在shims-vue.d.ts 文件中去抛出模块，不然会出现引入报错的问题

/*eslint-disable*/declaremodule'*.vue'{importtype{DefineComponent}from'vue'constcomponent:DefineComponent<{},{},any>exportdefaultcomponent}declaremodule'mockjs';

2. 新建 mock 所需的文件

index.ts（属于mockjs全局配置文件），mockjs/javaScript/index.ts（具体的数据文件），这两个需要关注，别的不用关注

1. 新建 mockjs/javaScript/index.ts（具体的数据文件）

因为我这里的数据主要是 侧边栏的数据，都是固定好的，所以并没有用到 mockjs 的规则生成数据

import{GlobalSidebar,Sidebar}from"../../sidebar";namespaceInfoSidebar{exporttypeInfoSidebarParams={body:string,type:string,url:string}}constdataSource:Array<GlobalSidebar>=[{mainTitle:'JavaScript基础问题梳理',mainSidebar:[{id:0,hashId:'This',title:'this指向',routeName:'JsBasic',children:[{id:1,parentId:0,hashId:'GlobalFunction',title:'全局函数'},{id:2,parentId:0,hashId:'ObjectMethod',title:'对象方法'},{id:3,parentId:0,hashId:'Constructor',title:'构造函数'},{id:4,parentId:0,hashId:'SetTimeout',title:'定时器、回调函数'},{id:5,parentId:0,hashId:'EventFunction',title:'事件函数'},{id:6,parentId:0,hashId:'ArrowFunction',title:'箭头函数'},{id:7,parentId:0,hashId:'CallApplyBind',title:'call、apply、bind'},]},{id:2,hashId:'DeepClone',title:'深拷贝和浅拷贝',routeName:'JsBasic',children:[]}]},];exportdefault{name:'jsBasicInfo',jsBasicInfo(params:InfoSidebar.InfoSidebarParams){constparam=JSON.parse(params.body)if(!param)thrownewError("Paramscannotempty!");constdata=dataSource.find((t:GlobalSidebar)=>{returnt.mainSidebar.filter((x:Sidebar)=>{returnx.routeName===param.routeName})})return{data,success:true,code:200}}}

Sidebar.ts

/***@param{number}idUniquevalue*@param{string}hashIdhrefUniquevalue*@param{string}titleshowcurrenttitle*@param{string}routeNamepagefinddata*/interfaceGlobalSidebar{mainTitle:string,mainSidebar:Array<Sidebar>}interfaceSidebar{id:number,hashId:string|number,title:string,routeName:string,children:Array<SidebarItem>,}interfaceSidebarItem{id:number,parentId:number,hashId:string|number,title:string,}export{GlobalSidebar,Sidebar,SidebarItem}

2. 新建 mockjs/index.ts

importMockfrom"mockjs";importjsBasicInfofrom"./tpl/javaScript/index";constrequestMethod='post';constBASE_URL=process.env.VUE_APP_BASE_API;constmocks=[jsBasicInfo];for(letiofmocks){Mock.mock(BASE_URL+'/'+i.name,requestMethod,i.jsBasicInfo);}exportdefaultMock

3. main.ts 引入

import{createApp}from'vue'importAppfrom'./App.vue'if(process.env.NODE_ENV=='development'){require('./mockjs/index')}constapp=createApp(App);app.mount('#app');

三、结合使用

实际上就是刚刚调用axios 的那一段代码

<scriptlang="ts"setupname="Sidebar">import{ref,reactive,onBeforeMount}from"vue"import{info}from"@/api"import{useRoute}from"vue-router"constroute=useRoute();letloading=ref<boolean>(false);letsidebar=ref<any>({});const_fetch=async():Promise<void>=>{constrouteName=route.nameasstring;constpath='/'+routeName.replace(routeName[0],routeName[0].toLocaleLowerCase())+'Info'try{loading.value=true;constres=awaitinfo({path,routeName});if(!res||!res.data)return;sidebar.value=res.data;}finally{loading.value=false}}onBeforeMount(()=>{_fetch();})</script>