vue+ts下对axios的封装实现
虽然vue中axios的使用已经十分方便,但是实际我们的日常操作中可能为了接口的规则一致,来创建一个统一管理的全局方法达到简化操作.而且在实际接口对接中,我们大多都需要对请求和响应进行拦截来进行token以及回调状态码的处理.那么我基于自己的需求简单分装了一下.(之前很少接触vue,主要用的ng和react,这次新项目想用vue来弄,熟悉一下vue的一些新特性和方法,有啥不对的,欢迎大家批评指正)
前提:熟悉前端ts,node等等.
1.安装axios
npminstallaxios-D
2.拦截器及全局方法编写
一个http.ts文件进行自己http逻辑的封装,为了代码分离,我同时创建interceptors.ts文件进行拦截器逻辑,放在一起也行.
interceptors.ts(拦截器,进行请求和响应拦截并进行部分逻辑处理)
importaxiosfrom'axios';
import{message}from'ant-design-vue';//这是我引入的antd的组件库,为了方便弹出吐司
exportclassInterceptors{
publicinstance:any;
constructor(){
//创建axios实例
this.instance=axios.create({timeout:1000*12});
//初始化拦截器
this.initInterceptors();
}
//为了让http.ts中获取初始化好的axios实例
publicgetInterceptors(){
returnthis.instance;
}
//初始化拦截器
publicinitInterceptors(){
//设置post请求头
this.instance.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded';
/**
*请求拦截器
*每次请求前，如果存在token则在请求头中携带token
*/
this.instance.interceptors.request.use(
(config)=>{
//登录流程控制中，根据本地是否存在token判断用户的登录情况
//但是即使token存在，也有可能token是过期的，所以在每次的请求头中携带token
//后台根据携带的token判断用户的登录情况，并返回给我们对应的状态码
if(config.headers.isJwt){
consttoken=localStorage.getItem('id_token');
if(token){
config.headers.Authorization='Bearer'+token;
}
}
returnconfig;
},
(error)=>{
console.log(error);
},
);
//响应拦截器
this.instance.interceptors.response.use(
//请求成功
(res)=>{
if(res.headers.authorization){
localStorage.setItem('id_token',res.headers.authorization);
}else{
if(res.data&&res.data.token){
localStorage.setItem('id_token',res.data.token);
}
}
if(res.status===200){
returnPromise.resolve(res.data);
}else{
this.errorHandle(res);
returnPromise.reject(res.data);
}
},
//请求失败
(error)=>{
const{response}=error;
if(response){
//请求已发出，但是不在2xx的范围
this.errorHandle(response);
returnPromise.reject(response.data);
}else{
//处理断网的情况
//eg:请求超时或断网时，更新state的network状态
//network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏
//关于断网组件中的刷新重新获取数据，会在断网组件中说明
message.warn('网络连接异常,请稍后再试!');
}
});
}
/**
*http握手错误
*@paramres响应回调,根据不同响应进行不同操作
*/
privateerrorHandle(res:any){
//状态码判断
switch(res.status){
case401:
break;
case403:
break;
case404:
message.warn('请求的资源不存在');
break;
default:
message.warn('连接错误');
}
}
}
http.ts(http封装,自己根据实际情况处理)
/**
*@authorkeiferju
*@time2019-08-2912:57
*@titlehttp请求封装
*@desc
*
*/
import{Interceptors}from'@/service/interceptors';
import{message,Modal}from'ant-design-vue';//弹吐司
importrouterfrom'../router';
exportclassHttpService{
publicaxios:any;
publicmodal:any;
constructor(){
//获取axios实例
this.axios=newInterceptors().getInterceptors();
}
/**
*get请求
*@paramparams参数
*@paramjwt是否token校验
*@parammodulename模块
*@paramoperation接口
*@paramflag标记
*@paramverson版本,默认1.0.0
*@paramservice服务,默认services
*/
publicgetData(params:object,jwt:boolean,modulename:string,operation:string,
flag:string,verson='1.0.0',service='services'){
consturl=service+'/'+verson+'/'+modulename+'/'+operation;
constbody={
parameter:{
data:params,
tag:flag,
},
};
returnnewPromise((resolve,reject)=>{
this.axios.get(url,{
params:body,
headers:{isJwt:jwt},
}).then((res)=>{
this.resultHandle(res,resolve);
}).catch((err)=>{
reject(err.message);
});
});
}
/**
*post请求
*@paramparams参数
*@paramjwt是否token校验
*@parammodulename模块
*@paramoperation接口
*@paramflag标记
*@paramverson版本,默认1.0.0
*@paramservice服务,默认services
*/
publicpostData(params:object,jwt:boolean,modulename:string,operation:string,
flag:string,verson='1.0.0',service='services'){
consturl=service+'/'+verson+'/'+modulename+'/'+operation;
constbody={
data:params,
tag:flag,
};
returnnewPromise((resolve,reject)=>{
this.axios.post(url,body,{
headers:{isJwt:jwt},
}).then((res)=>{
this.resultHandle(res,resolve);
}).catch((err)=>{
reject(err.message);
});
});
}
/**
*
*@paramres
*@paramresolve
*/
publicresultHandle(res:any,resolve){
if(res.status>0){
resolve(res.data);
}else{
this.errorHandle(res);
}
}
/**
*服务端状态处理,例如中断性异常,退出异常等等(与拦截器http握手状态注意区分,一般都能分清楚吧)
*@paramres
*/
publicerrorHandle(res:any){
message.warn(res.msg);//统一谈服务端提示,我们提示统一由服务端提供
//状态码判断
switch(res.status){
case-102:
break;
case-152:
break;
default:
//console.log(other);
}
}
}
3.挂载
我们定义好拦截器,那么就得把他挂载全局,能让我们方便使用.
main.ts
importVuefrom'vue';
importAppfrom'./App.vue';
importHighchartsVuefrom'highcharts-vue';
Vue.config.productionTip=false;
Vue.prototype.$httpService=newHttpService();//挂载服务
newVue({
router,
render:(h)=>h(App),
}).$mount('#app');
4.ts桥连(也不知道怎么称呼,自己从ng时就一直这么称呼)
行完上一步一定会发现报错啊,$httpService是个啥,不存在啊,这是因为ts的特性导致.
main.ts的同级目录创建一个xx.d.ts文件.
import{HttpService}from'./service/http';
declaremodule'vue/types/vue'{
interfaceVue{
$httpService:HttpService;
}
}
5.使用
在其它组件中使用,直接用this调用,不用再去引用,但是小心在某个this指向变了的回调中使用时找不到,至于怎么怎么解决应该都懂.
this.$httpService.postData({},true,'execute','xxx','tag').then((result)=>{
//doing
},(error)=>{
console.log(error);
});
最后:这是在ts下的封装,js的话更简单点,甚至应该会更简单点(会少一些步骤,网上教程应该很多).挂载http工具的方式平时也适合我们定义全局工具类或者服务.
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。