anxios封装拦截器的两种方式

1. 函数方式

javascript 复制代码
import axios, { AxiosInstance, AxiosRequestConfig } from "axios";
import { Message } from "view-ui-plus";

export const createAxiosByinterceptors = (
	config?: AxiosRequestConfig
): AxiosInstance => {
	const instance = axios.create({
		timeout: 1000, //超时配置
		withCredentials: true, //跨域携带cookie
		...config, // 自定义配置覆盖基本配置
	});

	// 添加请求拦截器
	instance.interceptors.request.use(
		(config: any) => {
			// 在发送请求之前做些什么
			console.log("config:", config);
			return config;
		},
		(error) => {
			// 对请求错误做些什么
			return Promise.reject(error);
		}
	);

	// 添加响应拦截器
	instance.interceptors.response.use(
		(response) => {
			// 对响应数据做点什么
			console.log("response:", response);
			const { code, data, message } = response.data;
			if (code === 200) return data;
			else if (code === 401) {
				// 退出处理
			} else {
				Message.error(message);
				return Promise.reject(response.data);
			}
		},
		(error) => {
			// 对响应错误做点什么
			console.log("error-response:", error.response);
			console.log("error-config:", error.config);
			console.log("error-request:", error.request);
			if (error.response) {
				if (error.response.status === 401) {
					// 退出处理
				}
			}
			Message.error(error?.response?.data?.message || "服务端异常");
			return Promise.reject(error);
		}
	);
	return instance;
};

使用方法

javascript 复制代码
import { createAxiosByinterceptors } from "@/service/service";

const request = createAxiosByinterceptors({
	baseURL: "/sdkjfdk",
});

//lodaing配置
export const appList = (params: any): Promise<any> =>
	request.get("/app", { params, loading: true }); // 不需要默认的全局loading效果可配置loading为false关闭 loading默认为true

// 文件下载
export const exportGoods = (data: any) =>
	request.post("/export", data, {
		responseType: "blob",
	});

export const expordtGoods = (data: any) =>
	request.put("/export", data, {
		responseType: "blob",
	});

讲解:函数式通过调用方法创建axios实例,通过参数传入基础url,超时时间等定义参数。

使用时比较接近axios写法。

2. 类方法

javascript 复制代码
import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
import { Message } from 'view-design';
const $Message: any = Message;
export class HttpService {
  private instance: AxiosInstance;
  baseConfig: AxiosRequestConfig = { baseURL: "/commonApi" };
  constructor(baseURL?: string, timeout?: number) {
    // 使用axios.create创建axios实例
    this.instance = axios.create({ ...this.baseConfig, baseURL, timeout });
    // 请求拦截器
    this.instance.interceptors.request.use((config: AxiosRequestConfig) => {
      return config;
    }, (error: any) => {
      return Promise.reject(error);
    })
    // 响应拦截器
    this.instance.interceptors.response.use((response: AxiosResponse) => {
      if (response.request.responseType === 'blob') { // 流文件
        return response
      }
      const { retcode, code, status, message, msg, desc } = response.data;
      let msgStr = message || msg || desc || '系统异常,请联系管理员';
      if ((retcode && retcode === 200) || (code && code === 0)) {
        return Promise.resolve(response.data);
      } else if (!status) {
        return Promise.resolve(response.data);
      } else {
        $Message.error(msgStr);
        return Promise.reject(response.data);
      }
    }, (error: any) => {
      const { status, data } = error.response
      const { msg, message, desc } = data
      const errMsg = msg || message || desc || '系统异常,请联系管理员';
      switch (status) {
        case 401:
        // 这里可以做清空storage并跳转到登录页的操作
        case 400:
        case 403:
        case 404:
        case 408:
        case 500:
        case 501:
        case 502:
        case 503:
        case 504:
        case 505:
        default:
          $Message.error(errMsg);
      }
      return Promise.reject(error);
    })
  }

  /**
   * commonRequest
   */
  public commonRequest(config: AxiosRequestConfig): Promise<AxiosResponse> {
    return this.instance(config)
  }
}

使用方法

javascript 复制代码
import { HttpService } from '../interceptors'

const proxyPrefix: string = '/proxyApi';
const $docQaReq: any = new HttpService(proxyPrefix)

export const apiUrl = {
  docFileUpload: `${proxyPrefix}/doc/semantic-doc/document/file/upload`,
}

/**
 * @description 获取所有文档库标签(以及文档
 * @param type 1 为文档标签,不传则为文档库标签
 */
export const getAllLibLabel = (data?: {
  type: number;
}) => {
  return $docQaReq.commonRequest({
    url: `/doc/semantic-doc/label/list`,
    method: 'get',
    params: data? data: null
  })
}

/**
 * @description 新增文档库标签(以及文档
 * @param type 1 为文档标签,不传则为文档库标签
 */
export const creatLibLabel = (data: {
  name: string;
  type?: number;
}) => {
  return $docQaReq.commonRequest({
    url: '/doc/semantic-doc/label/create',
    method: 'post',
    data
  })
}

类方法: 通过创建一个类,传入baseUrl,超时时间等自定义参数。使用时候调用类的方法实现创建axios实例。

两种方法写法不同,功能相同。

相关推荐
傻啦嘿哟5 分钟前
Python 办公实战:用 python-docx 自动生成 Word 文档
开发语言·c#
翻滚吧键盘10 分钟前
js代码09
开发语言·javascript·ecmascript
q5673152316 分钟前
R语言初学者爬虫简单模板
开发语言·爬虫·r语言·iphone
万少39 分钟前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL1 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl021 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang1 小时前
前端如何实现电子签名
前端·javascript·html5
时序数据说1 小时前
为什么时序数据库IoTDB选择Java作为开发语言
java·大数据·开发语言·数据库·物联网·时序数据库·iotdb
海天胜景1 小时前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼1 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js