ts + axios封装
https.ts文件
/**
* @author 作者
* @time 2020-9-27 8:47
* @title http请求封装
* desc 前后端约定接口返回解构规范
* {
* code: '1',
* data:" 请求成功",
* message: ""
* }
*/
import { Interceptor } from './interceptor';
import { message, Modal } from 'ant-design-vue';
import qs from 'qs';
export class Http {
public axios: any;
constructor() {
// 获取axios实例
this.axios = new Interceptor().getInterceptors();
}
/**
* get请求
* @param {String} url [请求的url地址]
* @param {object} params [请求时携带的参数, 默认为空]
* @param {boolean} download [判断是否是下载请求， 默认为否]
* @param {boolean} loading [判断是否是需要loading， 默认为否]
* @desc 由于loading不能一成不变全屏加载，很多种情况都是局部loading，所以当loading为true时，会返回整个response，以便自行处理loading。
*/
public getData(url: string, params: object = {}, download: boolean = false, loading: boolean = false) {
return new Promise((resolve, reject) => {
const config: any = { params };
if (download) {
config.responseType = 'blob';
}
this.axios.get(url, {
...config,
}).then((res: any) => {
this.resultHandle(res, resolve, loading);
}).catch((err: { message: any; }) => {
reject(err.message);
});
});
}
/**
* post请求
* get请求
* @param {String} url [请求的url地址]
* @param {object} data [请求时携带的参数, 默认为空]
* @param {boolean} download [判断是否是下载请求， 默认为否]
* @param {boolean} loading [判断是否是需要loading， 默认为否]
* @param {object} headers [自定义头部信息， 默认为空]
* @param {boolean} formData [formData格式， 默认为否]
* desc 由于loading不能一成不变全屏加载，很多种情况都是局部loading，所以当loading为true时，会返回整个response，以便自行处理loading。
*/
public postData(
url: string,
data: object,
download: boolean = false,
loading: boolean = false,
formData: boolean = false,
headers: object = {},
) {
return new Promise((resolve, reject) => {
const config: any = {};
let newData: any = data;
if (download) {
config.responseType = 'blob';
config.headers = {'Content-Type': 'text/plain'};
}
if (formData) {
newData = qs.stringify(data);
config.headers = { 'Content-Type': 'application/x-www-form-urlencoded' };
}
this.axios.post(url, data = newData, {
...config,
headers,
}).then((res: any) => {
this.resultHandle(res, resolve, loading);
}).catch((err: { message: any; }) => {
reject(err.message);
});
});
}
/**
* resultHandle 根据响应code
* @param {any} res [请求返回值]
* @param {any} resolve [Promise.resolve]
* @param {boolean} loading [判断是否是需要loading]
*/
public resultHandle(
res: any,
resolve: { (value?: unknown): void; (value?: unknown): void; (arg0: any): void; },
loading: boolean) {
console.log('请求结果:', res);
if (res.code === '1') {
resolve(res);
} else {
this.errorHandle(res);
// tslint:disable-next-line:no-unused-expression
loading && resolve(res);
}
}
/**
* 服务端状态处理,例如中断性异常,退出异常等等(与拦截器http握手状态注意区分,一般都能分清楚吧)
* 1000000 为session过期响应码
* @param {any} res [请求返回值]
*/
public errorHandle(res: any) {
// 统一谈服务端提示,我们提示统一由服务端提供
// 状态码判断
if (res.code === '1000000') {
Modal.confirm(
{
title: '你已被登出，可以取消继续留在该页面，或者重新登录',
okText: '重新登录',
cancelText: '取消',
onOk() {
// 退出登录
console.log('已经退出登录');
},
});
} else {
message.error(res.msg);
}
}
}
Interceptor文件
/**
* @author 作者
* @time 2020-9-27 8:47
* @title 拦截器封装
*/
import axios from 'axios';
import { message } from 'ant-design-vue';
export class Interceptor {
/**
* http握手错误
* @param res 响应回调,根据不同响应进行不同操作
*/
private static errorHandle(res: any) {
// 状态码判断
switch (res.status) {
case 401:
break;
case 403:
break;
case 404:
message.error('请求的资源不存在');
break;
default:
message.error('连接错误');
}
}
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';
// this.instance.defaults.baseURL = '';
/**
* 请求拦截器
* 每次请求前，如果存在token则在请求头中携带token
*/
this.instance.interceptors.request.use(
(config: { headers: { Authorization: string; }; }) => {
// 登录流程控制中，根据本地是否存在token判断用户的登录情况
// 但是即使token存在，也有可能token是过期的，所以在每次的请求头中携带token
// 后台根据携带的token判断用户的登录情况，并返回给我们对应的状态码
const token = sessionStorage.getItem('ymNavMap_token');
if (token) {
config.headers.Authorization = token;
}
return config;
},
(error: any) => {
console.log(error);
},
);
// 响应拦截器
this.instance.interceptors.response.use(
// 请求成功
(res: {
status: number;
headers: object;
data: { token: string; }; }) => {
if (res.status === 200 || res.status === 304) {
return Promise.resolve(res.data);
} else {
Interceptor.errorHandle(res);
return Promise.reject(res.data);
}
},
// 请求失败
(error: { response: any; }) => {
const {response} = error;
if (response) {
// 请求已发出，但是不在2xx的范围
Interceptor.errorHandle(response);
return Promise.reject(response.data);
} else {
// 处理断网的情况
// eg:请求超时或断网时，更新state的network状态
// network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏
// 关于断网组件中的刷新重新获取数据，会在断网组件中说明
message.error('网络连接异常,请稍后再试!');
}
});
}
}