axios二次封装

// http.js这个文件主要对axios实现二次封装, 就是在axios请求发送之前, 预设axios的各种参数, 如,此项目中除了登录接口,每一个接口都需要登录认证, 每次请求都设置token比较麻烦, 可以在这里给请求预设请求头token, 实际发请求时就不需要再管理登录认证了, 这就是axios请求拦截

// 导入原始的axios请求插件
import axios from "axios";
// 导入element-plus中的加载 Loading 服务, (vite工具中在components.d.ts中会自动全局引入, 在这里无需再导入, 并且再次导入loading会失效)
// import { ElLoading } from 'element-plus'
let loading:object;

// 功能1: 设置axios的baseUrl,在发起请求时, baseUrl无需再拼接, 还可以根据当前环境设置不同的baseUrl  (process.env.NODE_ENV 获取当前环境)    打包时就不用改了
if(process.env.NODE_ENV == "development"){
    // 如果当前是开发环境, 就设置基础路径为代理地址
    axios.defaults.baseURL = "/cige/api/private/v1/"
}
else if(process.env.NODE_ENV == "production"){
    // 如果当前是生产环境(打包时), 就设置基础路径为同源地址或原始地址
    axios.defaults.baseURL = "/api/private/v1/"
}

// 功能2: 请求拦截, 在所有请求发送之前, 向请求头添加token值
axios.interceptors.request.use(request => {
    // 请求发送前,被拦截下来,执行这个回调, 参数request就是请求对象(原生ajax种xhr对象)
    // console.log("请求数据", request);
    // 给请求对象添加请求头,把token加入请求头, 执行登录认证
    const token:any = localStorage.getItem("token")
    if(token){
        request.headers.Authorization = token
    }
    // 在请求发送之前, 开启加载服务, 显示加载框, target指定显示加载的元素
    if(loading) loading.close() 
    loading = ElLoading.service({ target: ".refresh_box" })
    // 处理完请求数据后, 返回继续发送请求
    return request; 
})

// 功能3: 响应拦截, 在响应数据接收之前, 对响应数据做预处理
axios.interceptors.response.use(response => {
    // console.log("响应数据", response);
    // 请求完成时, 关闭加载框
    loading.close()
    loading = null
    // 处理完响应数据后, 把响应数据中的data字段提出来, 返回继续执行响应 
    return response.data; 
})

// 功能4: 加载提示框, 发起ajax请求时, 开始加载, 请求结束时, 结束加载, 详情请见上边的请求拦截和响应拦截

// 功能5: 针对post/put/delete请求, 需要设置请求头数据格式, 可以在此处统一设置
// axios.defaults.headers("Content-Type", "application/x-www-form-urlencoded")

// 返回二次封装后的axios
export default axios;

// 导入二次封装的请求插件
import http from "./http.js";

// 登录
const postLogin = (params:object):object => http.post('login', params);



export {
    postLogin,
  
}