在线直播系统源码，Vue3中全局配置 axios

1. 简单项目的全局引用

如果只是简单几个页面的使用，无需太过复杂的配置就可以直接再 main.js 中进行挂载

<br>import Vue from "vue";<br> <br>/* 第一步下载 axios 命令：npm i axios 或者yarn add axios 或者pnpm i axios */<br>/* 第二步引入axios */<br>import axios from 'axios'<br> <br> <br>// 挂载一个自定义属性$http<br>Vue.prototype.$http = axios<br>// 全局配置axios请求根路径(axios.默认配置.请求根路径)<br>axios.defaults.baseURL = 'http://yufei.shop:3000'<br> 

页面使用

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

2. 复杂项目的三步封装

① 新建 util/request.js (配置全局的Axios，请求拦截、响应拦截等)

关于 VFrame 有疑问的同学可以移步前端不使用 il8n，如何优雅的实现多语言？

<br>import axios from "axios";<br>import { Notification, MessageBox, Message } from "element-ui";<br>import store from "@/store";<br>import { getToken } from "@/utils/auth";<br>import errorCode from "@/utils/errorCode";<br>import Cookies from "js-cookie";<br>import VFrame from "../framework/VFrame.js";<br>import CONSTANT from '@/CONSTANT.js'<br> <br>axios.defaults.headers["Content-Type"] = "application/json;charset=utf-8";<br>// 创建axios实例<br>const service = axios.create({<br>  // axios中请求配置有baseURL选项，表示请求URL公共部分<br>  baseURL: process.env.VUE_APP_BASE_API,<br>  // 超时<br>  timeout: 120000<br>});<br>// request拦截器<br>service.interceptors.request.use(<br>  config => {<br>    // 是否需要设置 token<br>    const isToken = (config.headers || {}).isToken === false;<br>    if (getToken() && !isToken) {<br>      config.headers["Authorization"] = "Bearer " + getToken(); // 让每个请求携带自定义token 请根据实际情况自行修改<br>    }<br>    var cultureName = Cookies.get(CONSTANT.UX_LANGUAGE);<br>    if (cultureName) {<br>      config.headers[CONSTANT.UX_LANGUAGE] = cultureName; // 让每个请求携带自定义token 请根据实际情况自行修改<br>    }<br>    // get请求映射params参数<br>    if (config.method === "get" && config.params) {<br>      let url = config.url + "?";<br>      for (const propName of Object.keys(config.params)) {<br>        const value = config.params[propName];<br>        var part = encodeURIComponent(propName) + "=";<br>        if (value !== null && typeof value !== "undefined") {<br>          if (typeof value === "object") {<br>            for (const key of Object.keys(value)) {<br>              let params = propName + "[" + key + "]";<br>              var subPart = encodeURIComponent(params) + "=";<br>              url += subPart + encodeURIComponent(value[key]) + "&";<br>            }<br>          } else {<br>            url += part + encodeURIComponent(value) + "&";<br>          }<br>        }<br>      }<br>      url = url.slice(0, -1);<br>      config.params = {};<br>      config.url = url;<br>    }<br>    return config;<br>  },<br>  error => {<br>    console.log(error);<br>    Promise.reject(error);<br>  }<br>);<br> <br>// 响应拦截器<br>service.interceptors.response.use(<br>  res => {<br>    // 未设置状态码则默认成功状态<br>    const code = res.data.code || 200;<br>    // 获取错误信息<br>    const msg = errorCode[code] || res.data.msg || errorCode["default"];<br>    if (code === 401) {<br>      MessageBox.alert(<br>        VFrame.l("SessionExpired"),<br>        VFrame.l("SystemInfo"),<br>        {<br>          confirmButtonText: VFrame.l("Relogin"),<br>          type: "warning"<br>        }<br>      ).then(() => {<br>        store.dispatch("LogOut").then(() => {<br>          location.href = "/index";<br>        });<br>      });<br>    } else if (code === 500) {<br>      Message({<br>        message: msg,<br>        type: "error"<br>      });<br>      if (res.data.data) {<br>        console.error(res.data.data)<br>      }<br>      return Promise.reject(new Error(msg));<br>    } else if (code !== 200) {<br>      Notification.error({<br>        title: msg<br>      });<br>      return Promise.reject("error");<br>    } else {<br>      if (res.data.uxApi) {<br>        if (res.data.success) {<br>          return res.data.result;<br>        } else {<br>          Notification.error({ title: res.data.error });<br>          console.error(res);<br>          return Promise.reject(res.data.error);<br>        }<br>      } else {<br>        return res.data;<br>      }<br>    }<br>  },<br>  error => {<br>    console.log("err" + error);<br>    let { message } = error;<br>    if (message == "Network Error") {<br>      message = VFrame.l("TheBackEndPortConnectionIsAbnormal");<br>    } else if (message.includes("timeout")) {<br>      message = VFrame.l("TheSystemInterfaceRequestTimedOut");<br>    } else if (message.includes("Request failed with status code")) {<br>      message =<br>        VFrame.l("SystemInterface") +<br>        message.substr(message.length - 3) +<br>        VFrame.l("Abnormal");<br>    }<br>    Message({<br>      message: VFrame.l(message),<br>      type: "error",<br>      duration: 5 * 1000<br>    });<br>    return Promise.reject(error);<br>  }<br>);<br> <br>export default service;

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

<br>import request from '@/utils/request'<br> <br>// 登录方法<br>export function login(username, password,shopOrgId,counter, code, uuid) {<br>  const data = {<br>    username,<br>    password,<br>    shopOrgId,<br>    counter,<br>    uuid<br>  }<br>  return request({<br>    url: '/login',<br>    method: 'post',<br>    data: data<br>  })<br>}<br> <br>// 获取用户详细信息<br>export function getInfo() {<br>  return request({<br>    url: '/getInfo',<br>    method: 'get'<br>  })<br>}<br> <br>// 退出方法<br>export function logout() {<br>  return request({<br>    url: '/logout',<br>    method: 'post'<br>  })<br>}

以上就是在线直播系统源码，Vue3中全局配置 axios，更多内容欢迎关注之后的文章