VUE--axios的简单封装及使用（拦截器），入参过滤（filterQuery）

一、axios封装

1.首先新建一个utils文件夹里面新建一个request.js文件中写入：

// 基于axios封装的请求模块
import axios from 'axios'
import qs from 'qs'
import router from '../router/index'
import { Toast } from 'vant' // 引入Vant组件库

// 环境切换
//axios.defaults.baseURL = '/api';
// if (process.env.NODE_ENV == 'development') {    
//   axios.defaults.baseURL = '/api';
// } else if (process.env.NODE_ENV == 'debug') {    
//   axios.defaults.baseURL = '';
// } else if (process.env.NODE_ENV == 'production') {    
//   axios.defaults.baseURL = 'http://api.123dailu.com/';
// }

// post请求头
//axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

// 我们通过这个实例上去发请求,把需要的配置给这个实例来处理
const request = axios.create({
  baseURL: process.env.NODE_ENV === 'production' ? process.env.BASE_API : '/api',
  timeout: 10000 // 设置请求超时连接时间
  // baseURL: 'http://192.168.31.227:18001/'
  //  baseURL:'https://www.fastmock.site/mock/54bcf9e49a674b7fbc98a086a9bbe712/api'   //fastmock路径
})

// 请求拦截器
request.interceptors.request.use(
  //所有请求会经过这里
  //config 是当前请求相关的配置对象
  //config 是可以修改的
  config=> {
    const token = JSON.parse(window.sessionStorage.getItem('token'))
    //如果有登录用户信息，则同意设置token
    if (token) {
      config.headers.Authorization = token
    }
    if (config.method === 'post' && config.data !== undefined) {
      config.data = qs.stringify(config.data.params);
    }
    // 当这里return config之后请求才会真正的发出去
    return config
  },
  // 请求失败，会经过这里
  error=> {
    return Promise.reject(error)
  }
)




//响应拦截器
request.interceptors.response.use(
  response => {
    return response;
  },
  error => {
  	console.log('errcode', error.response.data.msg)
	const errcode = error.response.data.msg * 1
    // 然后进行token的验证
    // token的验证主要是根据前端请求的时候携带的token进行数据请求的时候,返回的状态码来判断
    // 4600: 没有携带token值; 4601: token失效,请重新登录; 4602: token错误
    if (errcode === 4600 || errcode === 4601 || errcode === 4602) {
     console.log('token错误')
     Toast('登录状态失效,即将跳转至登录页面')
     // 跳转到登录页面
     setTimeout(() => {
      router.replace('/login')
    }, 3000)
   }
    return Promise.reject(error)
  }
)


//导出请求方法
export default request

2.在api中新建一个re.js

import request from '../untils/request.js'
import qs from 'qs';

// 请求不传参
export const boot= () => {
    return request({
        method: 'GET',
        url: '/abc/bbb',
    })
}

//请求传参
export const onload= params => {
    return request({
        method: 'GET',
        url: '/aaa/bbb',
        params
    })
}

//使用"Content-Type": "application/json;charset=utf-8"请求传参（在body）
export const delList = data => {
  return request({
    method: 'POST',
    url: '/aaa/bbb',
    headers: {
      "Content-Type": "application/json;charset=utf-8"
    },
    data
  })
}

//使用'Content-Type': 'multipart/form-data'类型传参（在body）
export const queryClassifyList = data => {
  let formData = new FormData();
  Object.keys(data).forEach((key) => {
    formData.append(key, data[key]);
  });
  return request({
    method: 'POST',
    url: '/aaa/bbb',
    headers: {
      'Content-Type': 'multipart/form-data'
    },
    data:formData
  })
}

//使用"Content-Type": "application/x-www-form-urlencoded;charset=utf-8"类型传参（在body）
export const doReturn = data => {
    let formData = new URLSearchParams();   //重点
    Object.keys(data).forEach((key) => {
      formData.append(key, data[key]);
    });
    return request({
      method: 'POST',
      url: '/xxx/xxx/xxx',
      headers: {
        "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
      },
      data:formData
    })
  }

//传参时参数的连接方式
export const createComment = data => {
  function handleData(obj) {
    const arr = [];
    for (let key in obj) {
      arr.push(
        `${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`
      );
    }
    return arr.join(";");   //修改连接符
  }
  return request({
    method: 'POST',
    url: '/lsg-aiplat-doclink/comment/create',
    headers: {
      "Content-Type": "application/x-www-urlencoded"
    },
    data:handleData(data)
  })
}

3.组件中直接使用

<script>
import { onload } from "@/api/re";
export default {
  data() {
    return {
      leader : [],
    };
  },
  methods: {
    load() {
      const params = { paramName: param, data: data, id: id };
      Object.keys(params).forEach(key => params[key] || delete params[key]); //删除 params 对象中值为假的属性
      //Object.keys(params).forEach(key => !params[key] && params[key] !== "" && delete params[key]);//不包含空字符串
	  boot(params).then((res) => {
       	 console.log(res);
       	 this.leader = res.data;
      });
    },
  },
  mounted() {
    this.load();
  },
};
</script>

二、入参过滤（filterQuery）

1.新建filterQuery.js

/**
 * @Description: 过滤参数值为null和“”和{}和[]的参数
*/
export function cleanQuery(query) {
  // 使用扩展运算符或Object.assign来创建一个新的对象副本，避免直接修改原始对象  
  const copyQuery = { ...query }; // 或者使用 Object.assign({}, query);  
  
  // 过滤出非空、非null的值，同时排除空数组和空对象  
  const cleanedEntries = Object.entries(copyQuery).filter(([key, value]) => {
    // 检查是否为非空字符串、非null、非空数组、非空对象  
    if (value === null || value === "") return false;
    if (Array.isArray(value) && value.length === 0) return false; // 排除空数组  
    if (typeof value === 'object' && value !== null && Object.keys(value).length === 0) return false; // 排除空对象  
    return true;
  });
  
  // 将过滤后的键值对数组转换回对象  
  return Object.fromEntries(cleanedEntries);
}

2.在main.js中全局挂载

// 引入cleanQuery函数
import { cleanQuery } from '@/utils/filterQuery';
// 将cleanQuery添加到Vue的原型上
Vue.prototype.$filterQuery = cleanQuery;

3.组件使用

const query = {a:''，ID:""}
const params = this.$filterQuery(query)