ant vue 设置中文_vue+ts 下对 axios 的封装
本文转载于 SegmentFault 社区
作者：DLLCN
正文
虽然 vue 中 axios 的使用已经十分方便，但是实际我们的日常操作中可能为了接口的规则一致，来创建一个统一管理的全局方法达到简化操作。而且在实际接口对接中，我们大多都需要对请求和响应进行拦截来进行 token 以及回调状态码的处理。 那么我基于自己的需求简单分装了一下。 (之前很少接触 vue,主要用的 ng 和 react，这次新项目想用 vue 来弄，熟悉一下 vue 的一些新特性和方法，有啥不对的，欢迎大家批评指正)前提: 熟悉前端 ts, node 等等。
一
安装axios
npm install axios -D二
拦截器及全局方法编写
一个http.ts文件进行自己http逻辑的封装，为了代码分离，我同时创建 interceptors.ts 文件进行拦截器逻辑，放在一起也行。 interceptors.ts (拦截器，进行请求和响应拦截并进行部分逻辑处理) import axios from 'axios';
import {message} from 'ant-design-vue'; // 这是我引入的antd的组件库,为了方便弹出吐司
export class Interceptors {
public instance: any;
constructor() {
// 创建axios实例
this.instance = axios.create({timeout: 1000 * 12});
// 初始化拦截器
this.initInterceptors();
}
// 为了让http.ts中获取初始化好的axios实例
public getInterceptors() {
return this.instance;
}
// 初始化拦截器
public initInterceptors() {
// 设置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) {
const token = localStorage.getItem('id_token');
if (token) {
config.headers.Authorization = 'Bearer ' + token;
}
}
return config;
},
(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) {
return Promise.resolve(res.data);
} else {
this.errorHandle(res);
return Promise.reject(res.data);
}
},
// 请求失败
(error) => {
const {response} = error;
if (response) {
// 请求已发出，但是不在2xx的范围
this.errorHandle(response);
return Promise.reject(response.data);
} else {
// 处理断网的情况
// eg:请求超时或断网时，更新state的network状态
// network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏
// 关于断网组件中的刷新重新获取数据，会在断网组件中说明
message.warn('网络连接异常,请稍后再试!');
}
});
}
/**
* http握手错误
* @param res 响应回调,根据不同响应进行不同操作
*/
private errorHandle(res: any) {
// 状态码判断
switch (res.status) {
case 401:
break;
case 403:
break;
case 404:
message.warn('请求的资源不存在');
break;
default:
message.warn('连接错误');
}
}
}http.ts(http 封装，自己根据实际情况处理)
/**
* @author keiferju
* @time 2019-08-29 12:57
* @title http请求封装
* @desc
*
*/
import {Interceptors} from '@/service/interceptors';
import {message, Modal} from 'ant-design-vue'; // 弹吐司
import router from '../router';
export class HttpService {
public axios: any;
public modal: any;
constructor() {
// 获取axios实例
this.axios = new Interceptors().getInterceptors();
}
/**
* get请求
* @param params 参数
* @param jwt 是否token校验
* @param modulename 模块
* @param operation 接口
* @param flag 标记
* @param verson 版本,默认1.0.0
* @param service 服务,默认services
*/
public getData(params: object, jwt: boolean, modulename: string, operation: string,
flag: string, verson = '1.0.0', service = 'services') {
const url = service + '/' + verson + '/' + modulename + '/' + operation;
const body = {
parameter: {
data: params,
tag: flag,
},
};
return new Promise((resolve, reject) => {
this.axios.get(url, {
params: body,
headers: {isJwt: jwt},
}).then((res) => {
this.resultHandle(res, resolve);
}).catch((err) => {
reject(err.message);
});
});
}
/**
* post请求
* @param params 参数
* @param jwt 是否token校验
* @param modulename 模块
* @param operation 接口
* @param flag 标记
* @param verson 版本,默认1.0.0
* @param service 服务,默认services
*/
public postData(params: object, jwt: boolean, modulename: string, operation: string,
flag: string, verson = '1.0.0', service = 'services') {
const url = service + '/' + verson + '/' + modulename + '/' + operation;
const body = {
data: params,
tag: flag,
};
return new Promise((resolve, reject) => {
this.axios.post(url, body, {
headers: {isJwt: jwt},
}).then((res) => {
this.resultHandle(res, resolve);
}).catch((err) => {
reject(err.message);
});
});
}
/**
*
* @param res
* @param resolve
*/
public resultHandle(res: any, resolve) {
if (res.status > 0) {
resolve(res.data);
} else {
this.errorHandle(res);
}
}
/**
* 服务端状态处理,例如中断性异常,退出异常等等(与拦截器http握手状态注意区分,一般都能分清楚吧)
* @param res
*/
public errorHandle(res: any) {
message.warn(res.msg); // 统一谈服务端提示,我们提示统一由服务端提供
// 状态码判断
switch (res.status) {
case -102:
break;
case -152:
break;
default:
// console.log(other);
}
}
}三
挂载
我们定义好拦截器，那么就得把他挂载全局，能让我们方便使用。 main.tsimport Vue from 'vue';
import App from './App.vue';
import HighchartsVue from 'highcharts-vue';
Vue.config.productionTip = false;
Vue.prototype.$httpService = new HttpService(); // 挂载服务
new Vue({
router,
render: (h) => h(App),
}).$mount('#app');四
ts 桥连
ts 桥连：也不知道怎么称呼，自己从 ng 时就一直这么称呼。
行完上一步一定会发现报错啊， $httpService 是个啥，不存在啊，这是因为 ts 的特性导致。 main.ts 的同级目录创建一个 xx.d.ts 文件。 import {HttpService} from './service/http';
declare module 'vue/types/vue' {
interface Vue {
$httpService: HttpService;
}
}五
使用
在其它组件中使用，直接用 this 调用，不用再去引用，但是小心在某个 this 指向变了的回调中使用时找不到，至于怎么怎么解决应该都懂。this.$httpService.postData({}, true, 'execute', 'xxx', 'tag').then((result) => {
// doing
}, (error) => {
console.log(error);
});- END -
