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>
