vue前端基于axios请求封装

api.js封装：所有接口都封装到这里面

//所有请求接口地址
const url = 'http://element.thexxdd.cn/api/'

const urls= class{
        static m(){
            //注册接口
            const register = `${url}register`
            //登录接口
            const login = `${url}login`

            return {
                register,
                login
            }
        }

      
}

export default urls

request封装：封装get和post请求

import instance from "./header";

const request = class{
    constructor(url,arg){
        this.url = url
        this.arg = arg
    }
//post请求
    modePost(){
    return new Promise((resolve,reject)=>{
        instance.post((this.url),this.arg)
        .then(res=>{
            resolve(res)
        })
        .catch(err=>{
            reject(err)
        })
    })
  }

  //get请求
   modeGet(){
    return new Promise((resolve,reject)=>{
        instance.get((this.url))
        .then(res=>{
            resolve(res)
        })
        .catch(err=>{
            reject(err)
        })
    })
  }

  
}
export default request

handle.js：封装请求拦截器和token加密

import axios  from "axios";
//加密token
import { Base64 } from "js-base64";
//消息弹出框
import { ElMessageBox } from "element-plus";

//创建axios 通用配置
let instance = axios.create({
    responseType:'json',
    headers:{'Contene-Type':"application/json"}
})


//对token加密
function baseFun(){
    const token = localStorage.getItem('token')
    const base64= Base64.encode(token + ':')
    return  'Basic ' + base64
}
//http拦截器：请求发出之前给每个接口携带token去后端校验身份
instance.interceptors.request.use(
    config=>{
        let token = localStorage.getItem('token')
        if(token){
            config.headers.Authorization = baseFun()
        }

        return config
    },err =>{
        return Promise.reject(err)
    }
)

//http拦截器：请求发出之后

instance.interceptors.response.use(
    response=>{
        return response
    },error =>{
        if(error.response){
            let ERRS =error.response.status
            let MSG = error.response.data.msg.msg
            let errData = ERRS == 401 ? MSG :'服务器发生错误'
            switch(ERRS){
                case 401 :
                    ElMessageBox.alert(errData,"提示",{
                        confirmButtonText:"好的",
                        type:'error'
                    })
                    .then(res=>{
                        //跳转到登录界面
                    })
                    .catch(err=>{

                    })
                    break
            }
        }
        //返回接口的错误信息
        return Promise.reject(error.response.data)
    }
)
export default instance

main.js中引用与挂载

/请求地址和方法
import urls from '../api/api'
import request from '../api/request'
//vue3 全局挂载
app.config.globalProperties.$urls = urls
app.config.globalProperties.$request = request

//vue2全局挂载 
Vue.prototype.$request= request
Vue.prototype.$urls= urls

页面中调用

//vue2调用
let result = await new this.$request(
              this.$urls.m().getLogin,
              this.from
            ).modePost()

//vue3调用全局组件需要用到组合式api  getCurrentInstance 
import { getCurrentInstance } from "vue"; //引入getCurrentInstance
const { proxy } = getCurrentInstance();//创建实例

//调用
 const result = await new proxy.$request(
            proxy.$urls.m().login,
            obj
          ).modePost();