axios封装拦截

qq_34114535

已于 2024-12-03 09:45:26 修改

阅读量981

点赞数 7

文章标签： javascript 前端 vue.js

于 2023-11-24 17:42:55 首次发布

本文链接：https://blog.youkuaiyun.com/qq_34114535/article/details/134603839

版权

拦截封装推荐（有来）

import axios, {
  type InternalAxiosRequestConfig,
  type AxiosResponse,
} from "axios";
import qs from "qs";
import { useUserStoreHook } from "@/store/modules/user";
import { ResultEnum } from "@/enums/ResultEnum";
import { getToken } from "@/utils/auth";

// 创建 axios 实例
const service = axios.create({
  baseURL: import.meta.env.VITE_APP_BASE_API,
  timeout: 50000,
  headers: { "Content-Type": "application/json;charset=utf-8" },
  paramsSerializer: (params) => {
    return qs.stringify(params);
  },
});

// 请求拦截器
service.interceptors.request.use(
  (config: InternalAxiosRequestConfig) => {
    const accessToken = getToken();
    if (accessToken) {
      config.headers.Authorization = accessToken;
    }
    return config;
  },
  (error: any) => {
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  (response: AxiosResponse) => {
    // 检查配置的响应类型是否为二进制类型（'blob' 或 'arraybuffer'）, 如果是，直接返回响应对象
    if (
      response.config.responseType === "blob" ||
      response.config.responseType === "arraybuffer"
    ) {
      return response;
    }

    const { code, data, msg } = response.data;
    if (code === ResultEnum.SUCCESS) {
      return data;
    }

    ElMessage.error(msg || "系统出错");
    return Promise.reject(new Error(msg || "Error"));
  },
  (error: any) => {
    // 异常处理 非 2xx 状态码 会进入这里
    if (error.response.data) {
      const { code, msg } = error.response.data;
      if (code === ResultEnum.TOKEN_INVALID) {
        ElNotification({
          title: "提示",
          message: "您的会话已过期，请重新登录",
          type: "info",
        });
        useUserStoreHook()
          .clearUserSession()
          .then(() => {
            location.reload();
          });
      } else {
        ElMessage.error(msg || "系统出错");
      }
    }
    return Promise.reject(error.message);
  }
);

export default service;


使用：

const USER_BASE_URL = "/api/v1/users";

 getInfo() {
    return request<any, UserInfo>({
      url: `${USER_BASE_URL}/me`,
      method: "get",
    });
  }

  add(data: UserForm) {
    return request({
      url: `${USER_BASE_URL}`,
      method: "post",
      data: data,
    });
  },

import axios from "axios";

import { Toast } from "vant";

import { useUserStore } from "@/store/user";

import router from "@/route";

class BaseApi {

baseService;

constructor({ baseURL, timeout = 60000 }) {

const baseServiceConfig = {

baseURL,

timeout,

};

this.baseService = axios.create(baseServiceConfig);

this._setInterceptorsRequest();

this._setInterceptorsResponse();

}

get(url, params = {}) {

return this.request(url, "get", params, {});

}

post(url, data = {}, withToken = true, loginMark = null) {

const user = useUserStore();

if (withToken) {

data.token = user.token;

}

// if (loginMark) {

// data.loginMark = loginMark;

// }

// if (!!loginMark && USER_APP_CID == "") {

// data.loginMark = loginMark;

// } else {

// data.loginMark = user.loginMark;

// }

data.loginMark = user.loginMark || loginMark || "";

return this.request(url, "post", {}, data);

}

postFormData(url, data = {}) {

const formData = new FormData();

for (const key in data) {

formData.append(key, data[key]);

}

const user = useUserStore();

formData.append("loginMark", user.loginMark);

if (!!user.token) {

formData.append("token", user.token);

}

return this.request(url, "post", {}, formData, "multipart/form-data");

}

uploader(url, formData, withToken = true) {

const user = useUserStore();

if (withToken) {

formData.append("token", user.token);

}

// if (loginMark) {

// formData.append("loginMark", loginMark);

// }

formData.append("loginMark", user.loginMark);

return this.request(url, "post", {}, formData, "multipart/form-data");

}

request(url, method, params, data, contentType = "application/json") {

// console.log(data);

const headers = {

"Content-Type": contentType,

// "Access-Control-Allow-Origin": "*",

};

return this.baseService({

method,

url: url,

params: params,

data: data,

headers,

responseType: "json",

// 允许为上传处理进度事件

onUploadProgress: function (progressEvent) {

// console.log("progressEvent", progressEvent);

// 允许为下载处理进度事件

onDownloadProgress: function (progressEvent) {

// console.log("progressEvent", progressEvent);

});

}

// 请求拦截器

_setInterceptorsRequest() {

this.baseService.interceptors.request.use(

config => {

return config;

error => {

return Promise.reject(error);

}

);

}

// 响应拦截器

_setInterceptorsResponse() {

this.baseService.interceptors.response.use(

function (response) {

if (response.status >= 200 && response.status <= 299) {

const { code, info: errMsg, data } = response.data;

switch (code) {

case 200:

return Promise.resolve(data);

break;

case 410:

// 登录失效

Toast.fail(errMsg);

const user = useUserStore();

user.clearUser();

user.$reset();

router.push("/login");

return romise.reject(response.data);

break;

default:

Toast.fail(errMsg);

return Promise.reject(errMsg);

break;

}

return Promise.reject("error");

function (error) {

if (error.code === "ECONNABORTED" && error.message.indexOf("timeout") !== -1) {

Toast.fail("请求超时");

return Promise.reject("请求超时");

}

Toast.fail("服务器错误");

return Promise.reject(error);

}

);

}

// http://192.168.0.125:8081

// http://127.0.0.1:4523/mock/725336

// API_BASE_URL

// http://127.0.0.1:4523/mock/760770

// http://192.168.31.53:4523/mock/760770

export default new BaseApi({ baseURL: API_BASE_URL });

export const dev = new BaseApi({ baseURL: "http://192.168.0.161:8088" });

使用

import api from "@/libs/BaseApi";

export function apiGetApprovalList({ categoryId = "1", pageSize = 10, pageNo = 1 }) {

return api.post("/Hermi/leave/GetPageApplyList", {

data: `{'categoryId':'${categoryId}','billNo':'','StartTime':'','EndTime':'','FdStartTime':'','FdEndTime':'','leaveType':'','rows':${pageSize},'page':${pageNo},'sidx':'applyDate','sord':'desc','records':0,'total':0}`,

});

}

state.js状态

* @Desc:

class STATE {

constructor(text = "", flag = "draft", isShowWithdrawBtn = false) {

this.text = text;

this.flag = flag;

this.isShowWithdrawBtn = isShowWithdrawBtn;

}

const STATE_MAP = {

0: new STATE("草稿", "draft"),