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文件中使用

<template>
  <div class="home">
    {{ swiperList }}
  </div>
</template>
<script>
import { getCurrentInstance, reactive, toRefs } from 'vue'

/**
 * @description 获取在全局注册的请求方式和请求地址
 * @returns {{$api, $resGet, $resPost, $url}} - 请求方式和请求地址
 */
const useMainVariableEffect = () => {
  const { proxy: { $api, $url, $resGet, $resPost } } = getCurrentInstance()
  return { $api, $url, $resGet, $resPost }
}
/**
 * @description 获取响应式轮播数据
 * @param $resPost - 请求方式
 * @param $api - 请求地址
 * @returns {{swiperList: ToRef<UnwrapNestedRefs<{swiperList: *[]}>['swiperList']>}} - 响应式轮播数据
 */
const getSwiperEffect = ($resPost, $api) => {
  const data = reactive({ swiperList: [] })
  $resPost($api.GetBanner).then(res => {
    data.swiperList = res.Data
  })
  const { swiperList } = toRefs(data)
  return { swiperList }
}
export default {
  name: 'Home',
  setup () {
    const { $api, $url, $resPost } = useMainVariableEffect()
    const { swiperList } = getSwiperEffect($resPost, $api)
    console.log($api, '---api---')
    console.log($url, '---url---')
    return { swiperList }
  }
}
</script>

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