Vue3全局配置axios的兩種方式總結

更新時間：2023年01月18日 10:26:58 作者：程序員啊楠

在實際項目開發(fā)中,幾乎每個組件中都會用到?axios?發(fā)起數(shù)據(jù)請求,下面這篇文章主要給大家總結介紹了關于Vue3全局配置axios的兩種方式,文中通過圖文介紹的非常詳細,需要的朋友可以參考下

前言

邊看邊學邊記錄系列，正好到 Vue3 了今天就和大家一起學習并記錄一下 Vue3 的Composition API(組合式API) 中是如何全用使用 Axios 的！

一、回顧 Vue2 的全局引用方式

1. 簡單項目的全局引用

如果只是簡單幾個頁面的使用，無需太過復雜的配置就可以直接再 main.js 中進行掛載

import Vue from "vue";
 
/* 第一步下載 axios 命令：npm i axios 或者yarn add axios 或者pnpm i axios */
/* 第二步引入axios */
import axios from 'axios'
 
 
// 掛載一個自定義屬性$http
Vue.prototype.$http = axios
// 全局配置axios請求根路徑(axios.默認配置.請求根路徑)
axios.defaults.baseURL = 'http://yufei.shop:3000'

頁面使用

methods:{
    getData(){
        this.$http.get('/barry').then(res=>{
            console.log('res',res)
        )}    }
}

2. 復雜項目的三步封裝

① 新建 util/request.js (配置全局的Axios，請求攔截、響應攔截等)

關于 VFrame 有疑問的同學可以移步前端不使用 il8n，如何優(yōu)雅的實現(xiàn)多語言？

import axios from "axios";
import { Notification, MessageBox, Message } from "element-ui";
import store from "@/store";
import { getToken } from "@/utils/auth";
import errorCode from "@/utils/errorCode";
import Cookies from "js-cookie";
import VFrame from "../framework/VFrame.js";
import CONSTANT from '@/CONSTANT.js'
 
axios.defaults.headers["Content-Type"] = "application/json;charset=utf-8";
// 創(chuàng)建axios實例
const service = axios.create({
  // axios中請求配置有baseURL選項，表示請求URL公共部分
  baseURL: process.env.VUE_APP_BASE_API,
  // 超時
  timeout: 120000
});
// request攔截器
service.interceptors.request.use(
  config => {
    // 是否需要設置 token
    const isToken = (config.headers || {}).isToken === false;
    if (getToken() && !isToken) {
      config.headers["Authorization"] = "Bearer " + getToken(); // 讓每個請求攜帶自定義token 請根據(jù)實際情況自行修改
    }
    var cultureName = Cookies.get(CONSTANT.UX_LANGUAGE);
    if (cultureName) {
      config.headers[CONSTANT.UX_LANGUAGE] = cultureName; // 讓每個請求攜帶自定義token 請根據(jù)實際情況自行修改
    }
    // get請求映射params參數(shù)
    if (config.method === "get" && config.params) {
      let url = config.url + "?";
      for (const propName of Object.keys(config.params)) {
        const value = config.params[propName];
        var part = encodeURIComponent(propName) + "=";
        if (value !== null && typeof value !== "undefined") {
          if (typeof value === "object") {
            for (const key of Object.keys(value)) {
              let params = propName + "[" + key + "]";
              var subPart = encodeURIComponent(params) + "=";
              url += subPart + encodeURIComponent(value[key]) + "&";
            }
          } else {
            url += part + encodeURIComponent(value) + "&";
          }
        }
      }
      url = url.slice(0, -1);
      config.params = {};
      config.url = url;
    }
    return config;
  },
  error => {
    console.log(error);
    Promise.reject(error);
  }
);
 
// 響應攔截器
service.interceptors.response.use(
  res => {
    // 未設置狀態(tài)碼則默認成功狀態(tài)
    const code = res.data.code || 200;
    // 獲取錯誤信息
    const msg = errorCode[code] || res.data.msg || errorCode["default"];
    if (code === 401) {
      MessageBox.alert(
        VFrame.l("SessionExpired"),
        VFrame.l("SystemInfo"),
        {
          confirmButtonText: VFrame.l("Relogin"),
          type: "warning"
        }
      ).then(() => {
        store.dispatch("LogOut").then(() => {
          location.href = "/index";
        });
      });
    } else if (code === 500) {
      Message({
        message: msg,
        type: "error"
      });
      if (res.data.data) {
        console.error(res.data.data)
      }
      return Promise.reject(new Error(msg));
    } else if (code !== 200) {
      Notification.error({
        title: msg
      });
      return Promise.reject("error");
    } else {
      if (res.data.uxApi) {
        if (res.data.success) {
          return res.data.result;
        } else {
          Notification.error({ title: res.data.error });
          console.error(res);
          return Promise.reject(res.data.error);
        }
      } else {
        return res.data;
      }
    }
  },
  error => {
    console.log("err" + error);
    let { message } = error;
    if (message == "Network Error") {
      message = VFrame.l("TheBackEndPortConnectionIsAbnormal");
    } else if (message.includes("timeout")) {
      message = VFrame.l("TheSystemInterfaceRequestTimedOut");
    } else if (message.includes("Request failed with status code")) {
      message =
        VFrame.l("SystemInterface") +
        message.substr(message.length - 3) +
        VFrame.l("Abnormal");
    }
    Message({
      message: VFrame.l(message),
      type: "error",
      duration: 5 * 1000
    });
    return Promise.reject(error);
  }
);
 
export default service;

② 新建 api/login.js (配置頁面所需使用的 api)

import axios from "axios";
import { Notification, MessageBox, Message } from "element-ui";
import store from "@/store";
import { getToken } from "@/utils/auth";
import errorCode from "@/utils/errorCode";
import Cookies from "js-cookie";
import VFrame from "../framework/VFrame.js";
import CONSTANT from '@/CONSTANT.js'
 
axios.defaults.headers["Content-Type"] = "application/json;charset=utf-8";
// 創(chuàng)建axios實例
const service = axios.create({
  // axios中請求配置有baseURL選項，表示請求URL公共部分
  baseURL: process.env.VUE_APP_BASE_API,
  // 超時
  timeout: 120000
});
// request攔截器
service.interceptors.request.use(
  config => {
    // 是否需要設置 token
    const isToken = (config.headers || {}).isToken === false;
    if (getToken() && !isToken) {
      config.headers["Authorization"] = "Bearer " + getToken(); // 讓每個請求攜帶自定義token 請根據(jù)實際情況自行修改
    }
    var cultureName = Cookies.get(CONSTANT.UX_LANGUAGE);
    if (cultureName) {
      config.headers[CONSTANT.UX_LANGUAGE] = cultureName; // 讓每個請求攜帶自定義token 請根據(jù)實際情況自行修改
    }
    // get請求映射params參數(shù)
    if (config.method === "get" && config.params) {
      let url = config.url + "?";
      for (const propName of Object.keys(config.params)) {
        const value = config.params[propName];
        var part = encodeURIComponent(propName) + "=";
        if (value !== null && typeof value !== "undefined") {
          if (typeof value === "object") {
            for (const key of Object.keys(value)) {
              let params = propName + "[" + key + "]";
              var subPart = encodeURIComponent(params) + "=";
              url += subPart + encodeURIComponent(value[key]) + "&";
            }
          } else {
            url += part + encodeURIComponent(value) + "&";
          }
        }
      }
      url = url.slice(0, -1);
      config.params = {};
      config.url = url;
    }
    return config;
  },
  error => {
    console.log(error);
    Promise.reject(error);
  }
);
 
// 響應攔截器
service.interceptors.response.use(
  res => {
    // 未設置狀態(tài)碼則默認成功狀態(tài)
    const code = res.data.code || 200;
    // 獲取錯誤信息
    const msg = errorCode[code] || res.data.msg || errorCode["default"];
    if (code === 401) {
      MessageBox.alert(
        VFrame.l("SessionExpired"),
        VFrame.l("SystemInfo"),
        {
          confirmButtonText: VFrame.l("Relogin"),
          type: "warning"
        }
      ).then(() => {
        store.dispatch("LogOut").then(() => {
          location.href = "/index";
        });
      });
    } else if (code === 500) {
      Message({
        message: msg,
        type: "error"
      });
      if (res.data.data) {
        console.error(res.data.data)
      }
      return Promise.reject(new Error(msg));
    } else if (code !== 200) {
      Notification.error({
        title: msg
      });
      return Promise.reject("error");
    } else {
      if (res.data.uxApi) {
        if (res.data.success) {
          return res.data.result;
        } else {
          Notification.error({ title: res.data.error });
          console.error(res);
          return Promise.reject(res.data.error);
        }
      } else {
        return res.data;
      }
    }
  },
  error => {
    console.log("err" + error);
    let { message } = error;
    if (message == "Network Error") {
      message = VFrame.l("TheBackEndPortConnectionIsAbnormal");
    } else if (message.includes("timeout")) {
      message = VFrame.l("TheSystemInterfaceRequestTimedOut");
    } else if (message.includes("Request failed with status code")) {
      message =
        VFrame.l("SystemInterface") +
        message.substr(message.length - 3) +
        VFrame.l("Abnormal");
    }
    Message({
      message: VFrame.l(message),
      type: "error",
      duration: 5 * 1000
    });
    return Promise.reject(error);
  }
);
 
export default service;

③ 頁面使用引入

import { login } from "@/api/login.js"
接下來不用多說，相信大家已經(jīng)會使用了

二、Vue3 中的使用

上面回顧完 Vue2 中使用 axios 我們來一起看看 Vue3 中axios的使用( 簡單Demo，前臺使用Vue3，后臺使用 node.js )，僅供學習！

1. provide/inject 方式

① main.js 中使用 provide 傳入

import {
    createApp
} from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import "lib-flexible/flexible.js"
 
import axios from "@/util/request.js"
 
const app = createApp(App);
 
 
 
app.provide('$axios', axios)
app.use(store).use(router).mount('#app');

② 需要用到的頁面使用 inject 接受

import { ref, reactive, inject, onMounted} from "vue";
 
export default {
  setup() {
 
    const $axios = inject("$axios");
 
    const getData = async () => {
      data = await $axios({ url: "/one/data" });
      console.log("data", data);
    };
 
    onMounted(() => {
        
      getData()
 
    })
 
    return { getData }
 
  }
 
}

這個就是借助 provide 做一個派發(fā)，和 Vue2 中的差距使用方法差距不大

2. getCurrentInstance 組合式API引入

① main.js 中掛載

import {
    createApp
} from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import "lib-flexible/flexible.js"
 
import axios from "@/util/request.js"
 
const app = createApp(App);
 
/* 掛載全局對象 */
app.config.globalProperties.$axios = axios;
 
app.use(store).use(router).mount('#app');

/* 掛載全局對象 */
app.config.globalProperties.$axios = axios;

重點就是上面這句

② 需要用的頁面使用 Composition Api -- getCurrentInstance 拿到

<script>
import { reactive, onMounted, getCurrentInstance } from "vue";
export default {
  setup() {
    let data = reactive([]);
    /**
     * 1. 通過getCurrentInstance方法獲取當前實例
     * 再根據(jù)當前實例找到全局實例對象appContext，進而拿到全局實例的config.globalProperties。
     */
    const currentInstance = getCurrentInstance();
    const { $axios } = currentInstance.appContext.config.globalProperties;
 
    /**
     * 2. 通過getCurrentInstance方法獲取上下文，這里的proxy就相當于this。
     */
 
    const { proxy } = currentInstance;
 
 
    const getData = async () => {
      data = await $axios({ url: "/one/data" });
      console.log("data", data);
    };
 
    const getData2 = async () => {
      data = await proxy.$axios({ url: "/one/data" });
      console.log("data2", data);
    };
 
    onMounted(() => {
 
      getData()
 
    });
    return { getData };
  },
};
</script>

下圖可以看到我們確實調(diào)用了 2次 API

其實通過 Composition API 中的 getCurrentInstance 方法也是有兩種方式的

1. 通過 getCurrentInstance 方法獲取當前實例，再根據(jù)當前實例找到全局實例對象appContext，進而拿到全局實例的config.globalProperties。
const currentInstance = getCurrentInstance();
const { $axios } = currentInstance.appContext.config.globalProperties;
2. 通過getCurrentInstance方法獲取上下文，這里的proxy就相當于this。
const currentInstance = getCurrentInstance();
 
const { proxy } = currentInstance;
 
const getData2 = async () => {
      data = await proxy.$axios({ url: "/one/data" });
      console.log("data2", data);
};

總結

到此這篇關于Vue3全局配置axios的兩種方式的文章就介紹到這了,更多相關Vue3全局配置axios內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

vue-router安裝和使用詳解
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,適合用于構建單頁面應用,分步驟介紹了安裝和使用vue-router的方法,感興趣的朋友跟隨小編一起看看吧
2023-08-08
vuedraggable實現(xiàn)拖拽功能
這篇文章主要為大家詳細介紹了vuedraggable實現(xiàn)拖拽功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04
Vue如何實現(xiàn)監(jiān)聽組件原生事件
這篇文章主要介紹了Vue如何實現(xiàn)監(jiān)聽組件原生事件,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-07-07
Vue?vant-ui使用van-uploader實現(xiàn)頭像上傳功能
這篇文章主要介紹了Vue?vant-ui使用van-uploader實現(xiàn)頭像圖片上傳,項目中是使用有贊vant-ui框架實現(xiàn)的頭像上傳替換功能，用到了封裝的圖片壓縮封裝之后再去上傳圖片this.$imgUpload.imgZip(），本文通過實例代碼給大家介紹的非常詳細，需要的朋友參考下吧
2022-05-05
vue緩存的keepalive頁面刷新數(shù)據(jù)的方法
這篇文章主要介紹了vue緩存的keepalive頁面刷新數(shù)據(jù)的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-04-04
詳解Vue取消eslint語法限制
本篇文章給大家分享了Vue取消eslint語法限制的相關知識點內(nèi)容，有興趣的朋友們可以參考學習下。
2018-08-08
手把手教你如何創(chuàng)建一個VUE項目(超簡單)
這篇文章主要給大家介紹了關于如何創(chuàng)建一個VUE項目的相關資料,創(chuàng)建vue項目有很多種方式,這里給大家介紹一種非常簡單的方法,需要的朋友可以參考下
2023-08-08
利用Vue實現(xiàn)一個markdown編輯器實例代碼
這篇文章主要給大家介紹了關于如何利用Vue實現(xiàn)一個markdown編輯器的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用Vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧
2019-05-05
vue幾個常用跨域處理方式介紹
本篇文章給大家詳細介紹了vue跨域處理問題的方式以及相關知識點介紹，對此有興趣的朋友學習下。
2018-02-02
vue組件中傳值EventBus的使用及注意事項說明
這篇文章主要介紹了vue組件中傳值EventBus的使用及注意事項說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11