Vue3之axios请求封装

前言

平常我们在开发中需要前后端进行交互，就会产生很多的api接口一个相关的请求，为了我们方便调用，我们会将其挂在到全局变量，来进行引用

Vue 2 中的axios引用

在vue2中，我们只需要使用Vue.prototype就可以完成封装的接口方法的挂载，使用方法则是在每个页面中使用this来调用。

例：

import {post,get} from './axios'
import Vue from 'vue'

Vue.prototype.$post = post
Vue.prototype.$get = get

调用方法：

//get方法的调用
this.$get('/article',{id:1}).then((res)=>{
	console.log(res)
})
//post方法的调用
this.$get('/login',{username:'admin',password:'admin'}).then((res)=>{
	console.log(res)
})

即可完成相关接口的请求调用，我个人习惯只封装get post请求，后面会放出来具体的vue2的axios的封装

Vue 3 中的axios引用

方法一（针对不封装axios请求的项目或者应用可以使用这个）：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import axios from "axios"//引用axios

const app = createApp(App)  
app.config.globalProperties.$axios = axios
app.use(store).use(router).use(commonAxios).use(ElementPlus).mount('#app')

注意此方法挂载必须要写在createApp(App)的后面，不然可能会不生效

方法二 （针对需要对axios封装的可以使用这个，比如需要在请求头中加入认证信息）：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElIconModules from '@element-plus/icons-vue'
//引入封装好的axios
import commonAxios from './plugins/axios';

const app = createApp(App)  
app.use(store).use(router).use(commonAxios).use(ElementPlus).mount('#app')
//挂在到全局使用

但是在vue3.0的时候如果用组合api，由于 setup 在生命周期 beforecreate 和 created 前执行，此时 vue 对象还未创建，因无法使用我们在 vue常用的 this。

那就用getCurrentInstance代替this，首先引入，之后声明如下：

import { ref, watch, getCurrentInstance,onMounted, } from "vue";

export default {
  name: "HomeView",
  setup() {
    const { proxy } = getCurrentInstance();
    onMounted(() => {
      cconsole.log(proxy.$post('/login',{username:'admin',password:'admin'}.then((res)=>{console.log(res)})))
    })
  }
}

即可完成一次axios的post请求

最后

下面是我的axios封装(Vue3)的：

/**axios封装
 * 请求拦截、相应拦截、错误统一处理
 */
 import axios from 'axios';
 import QS from 'qs';
 import router from '../router/index'
 //qs.stringify()是将对象 序列化成URL的形式，以&进行拼接
 //  let protocol = window.location.protocol; //协议
 //  let host = window.location.host; //主机
 //  axios.defaults.baseURL = protocol + "//" + host;
 axios.defaults.baseURL = 'http://127.0.0.1:3001/api/'
 
 axios.interceptors.request.use( //响应拦截
         async config => {
             // 每次发送请求之前判断vuex中是否存在token        
             // 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况
             // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断 
             config.headers.authorization = sessionStorage.getItem('Token')
             return config;
         },
         error => {
             return Promise.error(error);
         })
     // 响应拦截器
 axios.interceptors.response.use(
     response => {
         if (response.status === 200) {
             return Promise.resolve(response); //进行中        
         } else {
             return Promise.reject(response); //失败       
         }
     },
     // 服务器状态码不是200的情况    
     error => {
         if (error.response.status) {
             switch (error.response.status) {
                 // 401: 未登录                
                 // 未登录则跳转登录页面，并携带当前页面的路径                
                 // 在登录成功后返回当前页面，这一步需要在登录页操作。                
                 case 401:
                     break
                     // 403 token过期                
                     // 登录过期对用户进行提示                
                     // 清除本地token和清空vuex中token对象                
                     // 跳转登录页面                
                 case 403:
                     sessionStorage.clear()
                     router.push('/login')
                     break
                     // 404请求不存在                
                 case 404:
                     break;
                     // 其他错误，直接抛出错误提示                
                 default:
             }
             return Promise.reject(error.response);
         }
     }
 );
 /** 
  * get方法，对应get请求 
  * @param {String} url [请求的url地址] 
  * @param {Object} params [请求时携带的参数] 
  */
const $get = (url, params) =>{
     return new Promise((resolve, reject) => {
         axios.get(url, {
                 params: params,
             })
             .then(res => {
                 resolve(res.data);
             })
             .catch(err => {
                 reject(err.data)
             })
     });
 }
 /** 
  * post方法，对应post请求 
  * @param {String} url [请求的url地址] 
  * @param {Object} params [请求时携带的参数] 
  */
const $post = (url, params) => {
     return new Promise((resolve, reject) => {
         axios.post(url, QS.stringify(params)) //是将对象 序列化成URL的形式，以&进行拼接   
             .then(res => {
                 resolve(res.data);
             })
             .catch(err => {
                 reject(err.data)
             })
     });
 }
//下面是vue3必须加的，vue2不需要，只需要暴露出去get，post方法就可以
export default{
  install:(app) => {
    app.config.globalProperties['$get'] = $get;
    app.config.globalProperties['$post'] = $post;
    app.config.globalProperties['$axios'] = axios;
  }
}

小编WeChat：32590908，欢迎各位前来交流