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的時候需要設置
  });
}