線上直播系統原始碼，Vue3中全域性配置 axios

線上直播系統原始碼，Vue3中全域性配置 axios

  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 = '

   頁面使用

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

2. 複雜專案的三步封裝

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

        關於 VFrame 有疑問的同學可以移步  前端不使用 il8n，如何優雅的實現多語言？

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";
// 建立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 請根據實際情況自行修改
    }
    var cultureName = Cookies.get(CONSTANT.UX_LANGUAGE);
    if (cultureName) {
      config.headers[CONSTANT.UX_LANGUAGE] = cultureName; // 讓每個請求攜帶自定義token 請根據實際情況自行修改
    }
    // get請求對映params引數
    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 => {
    // 未設定狀態碼則預設成功狀態
    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 request from '@/utils/request'
 
// 登入方法
export function login(username, password,shopOrgId,counter, code, uuid) {
  const data = {
    username,
    password,
    shopOrgId,
    counter,
    uuid
  }
  return request({
    url: '/login',
    method: 'post',
    data: data
  })
}
 
// 獲取使用者詳細資訊
export function getInfo() {
  return request({
    url: '/getInfo',
    method: 'get'
  })
}
 
// 退出方法
export function logout() {
  return request({
    url: '/logout',
    method: 'post'
  })
}

 以上就是線上直播系統原始碼，Vue3中全域性配置 axios， 更多內容歡迎關注之後的文章