虽然vue中axios的使用已经十分方便,但是实际我们的日常操作中可能为了接口的规则一致,来创建一个统一管理的全局方法达到简化操作.而且在实际接口对接中,我们大多都需要对请求和响应进行拦截来进行token以及回调状态码的处理.那么我基于自己的需求简单分装了一下.(之前很少接触vue,主要用的ng和react,这次新项目想用vue来弄,熟悉一下vue的一些新特性和方法,有啥不对的,欢迎大家批评指正)
前提: 熟悉前端ts, node等等.
1. 安装axios
npm install axios -D
2. 拦截器及全局方法编写
一个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 + 'https://www.jb51.net/' + verson + 'https://www.jb51.net/' + modulename + 'https://www.jb51.net/' + 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 + 'https://www.jb51.net/' + verson + 'https://www.jb51.net/' + modulename + 'https://www.jb51.net/' + 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); } } }
3. 挂载
我们定义好拦截器,那么就得把他挂载全局,能让我们方便使用.
main.ts