项目知识点总结三

1. request封装

import axios from "axios"; // 引入axios
import qs from "qs"; // 引入qs模块，用来序列化post类型的数据
import { userStore } from "../store/user";

const request = (url: string, method = "get", data = {}, config = {}) => {
  // 环境的切换
  if (import.meta.env.DEV) {
    // 开发环境
    axios.defaults.baseURL = "http://127.0.0.1:7001";
  } else if (import.meta.env.PROD) {
    // 生产环境
    axios.defaults.baseURL = "http://33.33.33.33:8888";
  }
  return axiosRequest(url, method, data, config);
};
function axiosRequest(url: string, method: string, data: any, config: any) {
  if (method.toLocaleLowerCase() === "post") {
    // { indices: false } 解决后端接收 post请求 正确的传递参数
    data = qs.stringify(data, { indices: false });
    console.log("axios请求参数=========", qs.parse(data));
  }

  let axiosConfig: any = {
    url: url,
    method: method.toLocaleLowerCase(),
    data: data,
    timeout: 300000,
  };

  if (config instanceof Object) {
    for (let key in config) {
      axiosConfig[key] = config[key];
    }
  }
  return axios(axiosConfig).then((res) => res.data);
}
// 添加请求拦截器
axios.interceptors.request.use(
  (res: any) => {
    // post请求时 参数放在body中。
    res.headers.post["Content-Type"] =
      "application/x-www-form-urlencoded; charset=UTF-8";
    const store = userStore();
    if (store.user.token) {
      res.headers.Authorization = `Bearer ${store.user.token}`;
      // res.headers.Authorization = `Bearer ${store.userListMenu.token}`
    }
    return res;
  },
  (error) => {
    return Promise.reject(error);
  }
);
// 添加响应拦截器
axios.interceptors.response.use(
  (res) => {
    return res;
  },
  (error) => {
    return Promise.reject(error);
  }
);
export default request;