vue中使用axios的request封装使用

封装部分

/*
 * @Description:
 * @Author: Jenny
 * @Date: 2021-01-13 
 */
import axios from "axios";
import { UserModule } from "@/store/modules/user";
import { ResCode } from "@/utils/constants.ts"; 
 //ResCode常量自定义 export enum ResCode {
//	NO_AUTH = 2003,}
class Request {
	public instance: any;
	constructor() {
		// 创建axios实例
		this.instance = axios.create({
			timeout: 1200000,
			baseURL: window["config"]["baseUrl"],  //后端服务器地址
		});
		// 初始化拦截器
		this.initInterceptors();
	}

	// 为了让http.ts中获取初始化好的axios实例
	public getInterceptors() {
		return this.instance;
	}

	// 初始化拦截器
	public initInterceptors() {
		//请求拦截器
		this.instance.interceptors.request.use(
			(config) => {
				config.headers["user-token"] = UserModule.token;  //自定义请求头,从store里取
				return config;
			},
			(error) => {
				return Promise.reject(error);
			}
		);

		// 响应拦截器
		this.instance.interceptors.response.use(
			// 请求成功
			async (res) => {
				if (res.status === 200) {
					const code = res.data.code;
					
					if (code && code === ResCode.NO_AUTH) {
						setTimeout(() => {
							UserModule.ResetToken();  //重置token
							UserModule.toSSOLogin();  //去登录
						}, 100);
						return Promise.reject(res.data);
					}

					// 针对blob的异常信息处理
					if (
						res.request.responseType == "blob" &&
						res.data["type"] == "application/json"
					) {
						res.data = await this.handleBlob(res.data);
					}
				} else {
					GlobalMessage.error(res.data.mesg);  //提示
				}
				return Promise.resolve(res.data);
			},
			// 请求失败
			(error) => {
				GlobalMessage.error("网络连接异常,请稍后再试!"); //提示
				return Promise.reject(error);
			}
		);
	}

	// 针对blob错误信息的处理
	public handleBlob(result) {
		return new Promise((resolve) => {
			const reader = new FileReader();
			reader.readAsText(result, "utf-8");
			reader.onload = () => {
				const data = JSON.parse(reader.result as string);
				resolve(data);
			};
		});
	}
}
const request = new Request().getInterceptors();
export default request;

　使用方法

import request from "../utils/request";
//考试列表查询（当前/过往） post
export function queryExamList(data: object) {
  return request({
    url: `/exam/list/query`,
    method: "post",
    data,
  });
}

//获取二维码图片（步骤1）
export function getQrImg(params: object) {
  return request({
    url: `/scanCode/getQrImg`,
    method: "get",
    params,
    responseType: "blob",  //返回值的类型是blob的时候需要设置
  });
}