axios封装

vue2:

//axios封装第一层，第一层：对axios进行增强
import axios from "axios";
import { Message } from "element-ui";
// import { ElMessage } from 'element-plus'
import local from "@/utils/local.js";
import router from "@/router/index.js";

//暴露服务器地址

// export const IP = "服务器地址";

axios.defaults.baseURL = IP;

// 添加请求拦截器
axios.interceptors.request.use(
  function (config) {
    let token = local.get("token");
    if (token) {
      // 有"Bearer " 时就不需要写,需要的时候在Bearer后边有空格
      // config.headers.Authorization = "Bearer " + token;
      config.headers.Authorization = token;
    }
    // console.log(config);

    return config;
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 添加响应拦截器.
axios.interceptors.response.use(
  function (res) {
    // 访问成功时候执行
    // console.log(res);
    if (typeof res.data.code === "number") {
      // 成功提示消息
      if (res.data.code === 0 || res.data.code === 200) {
        Message.success(res.data.msg);
      } else {
        // 失败提示消息
        Message.error(res.data.msg);
      }
    }

    return res;
  },
  function (err) {
    //判断如果是401，就报错并跳转(设置路由守卫才写这段代码)
    if (err.response.status === 401) {
      Message.error(err.response.data.msg);
      router.push("/login"); //从引入的路由模块中调用跳转方法
    }

    // 访问失败时候执行
    return Promise.reject(err);
  }
);

//暴露进行增强后的axios
export default axios;

api页面:

//axios封装第二层：商品管理模块，所有用户管理模块的接口全都在这里进行封装

import request from "@/utils/request.js"; //引入暴露进行增强后的axios

//例如:
export const addCate = function (data) {
  return request({
    method: "post",
    url: "/goods/addcate",
    data: data,
  });
};

vue3:

// 引入axios
import axios from "axios";
import storage from "./local";
import { ElMessage } from "element-plus";

export const IP = "http://服务器地址";
axios.defaults.baseURL = IP;

//多接口封装办法
// export const ajax = axios.create({
//   // baseURL: "http://服务器地址",
//   timeout: 12000,//响应时间
// });

// 添加请求拦截器
axios.interceptors.request.use(
  function (config) {
    let token = storage.get("token");
    if (token) {
      // 有"Bearer " 时就不需要写,需要的时候在Bearer后边有空格
      // config.headers.Authorization = "Bearer " + token;
      config.headers.Authorization = token;
    }
    // console.log(config);

    return config;
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 添加响应拦截器.
axios.interceptors.response.use(
  function (res) {
    // 访问成功时候执行
    // console.log(res);
    if (typeof res.data.code === "number") {
      // 成功提示消息
      if (res.data.code === 0 || res.data.code === 200) {
        ElMessage.success(res.data.msg);
      } else {
        // 失败提示消息
        ElMessage.error(res.data.msg);
      }
    }
    return res;
  }
  // function (err) {
  //   //判断如果是401，就报错并跳转(有路由守卫就写)
  //   if (err.response.status === 401) {
  //     ElMessage.error(err.response.data.msg);
  //     router.push("/login"); //从引入的路由模块中调用跳转方法
  //   }

  //   // 访问失败时候执行
  //   return Promise.reject(err);
  // }
);

//暴露进行增强后的axios
export default axios;

使用:

import axios from "../utils/ajax"; //引入暴露进行增强后的axios

//12.例如(post与get封装的params不同,一个有{},get没有{})
export const $_goodsaddcate = (params: GoodsAddcate) =>
  axios.post("/goods/addcate", params);

export const $_goodslist = (params: Userlist) =>
  axios.get("/goods/catelist", { params });