vue cli3 axios封装(拦截添加token，自定义方法)

首先在项目src下创建目录 src --> axios --> index.js(目录名字可以自己改，引入的时候注意就可以)

/* src --> axios --> index.js */
import axios from "axios";
/* 根据环境不同 选择url*/
let BackUrl = null;
let BasiUrl  = process.env.NODE_ENV;
/* 开发环境*/
if(BasiUrl === 'development') {
  BackUrl = '/api'
}else if(BasiUrl === 'production') {
/* 打包环境*/
  BackUrl = 'https://xxxx.com/api/'
}
// 2.请求拦截器
axios.interceptors.request.use(config => {
  //发请求前做的一些处理，数据转化，配置请求头，设置token,设置loading等，根据需求去添加
  // config.data = JSON.stringify(config.data); //数据转化,也可以使用qs转换
  config.headers = {
    "Content-Type": "application/json" //配置请求头
  };
  //const token = sessionStorage.getItem('');//这里取token之前，你肯定需要先拿到token,存一下
  //if(token){
  //config.params = {'token':token} //如果要求携带在参数中
  //config.headers.token= token; //如果要求携带在请求头中
  //}
  return config;
}, error => {
  Promise.reject(error);
});
/**
 *自定义方法
 * @param {string} type 类型 'get' 或 'post'
 * @param {string} url 请求地址
 * @param {object} data 发送的数据
 * @returns {Promise<unknown>} 返回请求相应
 */
function vaildInterfaceW(type,url,data){
  return new Promise((resolve,reject)=>{
    var obj = {
      method: type, //请求的类型
      url:url, //请求地址
      data:data
    }
    //返回axios的基础方法
     axios(obj).then(res => {
       resolve(res.data)
    }).catch(error => {
       reject(error)
       });
  });
}
export { vaildInterfaceW };

有两种使用方法

1，全局引入，写在vue的原型上面

//main.js
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import axios from "./axios";//这里是文件目录，根据自己创建名字修改
import { vaildInterfaceW } from "./axios";
const app = createApp(App);
//自定义封装axios方法
app.config.globalProperties.vaildInterfaceW = vaildInterfaceW;
app.use(store).use(router).mount("#app");

this.vaildInterfaceW('post','/api',{
 name:'123'
    }).then(res=>{
      console.log(res);
    }).catch(error =>{
      console.log(error);
    });

2，按需引入

import { vaildInterfaceW } from "./axios";

vaildInterfaceW('post','/api',{
 name:'123'
    }).then(res=>{
      console.log(res);
    }).catch(error =>{
      console.log(error);
    });