vue3全局注入和使用

vue.jpg

先看最终结果

image.png

image.png

1.在src下新建一个utils文件，在utils下新建一个api.js

const url = '127.0.0.1:3000'  //请求地址
export default {
  url,
  GetBanner: `${url}/Frontstage/Home/GetBanner`, // 获取轮播图
  GetCompany: `${url}/Company/Web_Company/GetCompany`, // 公司信息查询
}

2.在src下新建一个utils文件，在utils下新建一个http.js

import axios from './request'
/**
 * type: [application/x-www-form-urlencoded]
 * url: [请求地址]
 * data: [携带参数]
 **/
export function formPost(url, data) {
    return new Promise((resolve, reject) => {
        axios({
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            url: url,
            data: data
        }).then(res => {
            resolve(res.data)
        }).catch(err => {
            reject(err)
        })
    })
}


/**
 * type: [application/json]
 * url: [请求地址]
 * data: [携带参数]
 **/
export function resPost(url,query,data) {
    return new Promise((resolve, reject) => {
        axios({
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            url: url,
            params: query,
            data,
        }).then(res => {
            resolve(res.data)
        }).catch(err => {
            reject(err)
        })
    })
}


/**
 * type: [blob]
 * url: [请求地址]
 * data: [携带参数]
 **/
export function blobGet(url, data) {
    return new Promise((resolve, reject) => {
        axios({
            method: 'GET',
            url: url,
            data: data,
            responseType: 'blob'
        }).then(res => {
            resolve(res)
        }).catch(err => {
            reject(err)
        })
    })
}

/**
 * type: [blob]
 * url: [请求地址]
 * data: [携带参数]
 **/
export function blobPost(url, data) {
    return new Promise((resolve, reject) => {
        axios({
            method: 'POST',
            url: url,
            data: data,
            responseType: 'blob'
        }).then(res => {
            resolve(res)
        }).catch(err => {
            reject(err)
        })
    })
}


/**
 * type: [application/json]
 * url: [请求地址]
 * data: [携带参数]
 **/
export function resGet(url, data) {
    return new Promise((resolve, reject) => {
        axios({
            method: 'GET',
            url: url,
            params: data,
        }).then(res => {
            resolve(res.data)
        }).catch(err => {
            reject(err)
        })
    })
}

/**
 * type: [multipart/form-data]
 * url: [请求地址]
 * data: [携带参数]
 **/
export function multPost(url, data) {
    return new Promise((resolve, reject) => {
        axios({
            method: 'POST',
            url: url,
            data: data,
            headers: {
                'Content-Type': 'multipart/form-data;'
            },
        }).then(res => {
            resolve(res.data)
        }).catch(err => {
            reject(err)
        })
    })
}
/**
 * type: [并行请求]
 * url: [请求地址]
 * data: [携带参数]
 **/
export function allPost(url) {
    return new Promise((resolve, reject) => {
        axios.all(url).then(axios.spread(function (a, b, c) {
            resolve([a, b, c])
        })).catch(err => {
            reject(err)
        })
    })
}

3.在src下新建一个utils文件，在utils下新建一个request.js

import axios from 'axios'
const request = axios.create({
  timeout: 5000  //请求超时时间
})
// 请求拦截器
request.interceptors.request.use(config => {
  // 请求拦截
  const token = window.localStorage.getItem("USERTOKEN");
  if(token){
    config.headers['Authorization'] = `Bearer ${token}`;
  }
  return config
}, error => {
  return Promise.reject(error)
})
// 响应拦截器
request.interceptors.response.use(response => {
  if(response.data.ErrorCode == 401){
    window.localStorage.removeItem("USERTOKEN")
  }
  return response
}, error => {
  return Promise.reject(error)
})

export default request

重点：在main.js全局挂在和vue2有区别了

vue2.x挂载全局是使用Vue.prototype.xxx来获取挂载到全局的变量或者方法
vue3.x挂载全局config.globalProperties

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import http from './utils/request'
/* 接口统一 */
import api from './utils/api'
/* 请求axios */
import {
  formPost,
  resPost,
  blobGet,
  blobPost,
  resGet,
  multPost,
  allPost
} from './utils/http'

const app = createApp(App)
app.use(store)
app.use(router)
/* 全局注册 */
app.config.globalProperties.$api = api
app.config.globalProperties.$url = api.url
app.config.globalProperties.$axios = http
app.config.globalProperties.$formPost = formPost
app.config.globalProperties.$resPost = resPost
app.config.globalProperties.$blobGet = blobGet
app.config.globalProperties.$blobPost = blobPost
app.config.globalProperties.$resGet = resGet
app.config.globalProperties.$multPost = multPost
app.config.globalProperties.$allPost = allPost
app.mount('#app')

在vue文件中使用

vue3来了！欢迎关注。后期持续更新~~