- 在
vue3.x版本中进行封装 - 使用
promise封装post和get方法 api作为单独模块维护- 适配
vue.config.js中proxy代理 - 结合
async和await
1 安装
npm install axios;
2 创建http模块
在src目录下，创建request文件夹，并在该文件夹下，新建http.js文件
// 引入axios
import axios from 'axios'
// 引入qs模块，对数据进行序列化
import QS from 'qs'
// 引入message模块，toast提示
import {
message } from 'ant-design-vue'
// 引入storage模块，操作token
import {
session } from '@/utils/storage.js'
// 请求超时时间
axios.defaults.timeout = 10000
// 请求拦截器
axios.interceptors.request.use(
config => {
// 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
// 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
const token = session.get('Token')
token && (config.headers.Authorization = token)
if(config.method.toUpperCase() === 'POST') {
config.headers['Content-Type'] = 'application/json;charset=utf-8'
}
return config
},
error => {
return Promise.error(error)
})
// 响应拦截器
axios.interceptors.response.use(
response => {
console.log(response)
if (response.status === 200) {
return Promise.resolve(response)
} else {
return Promise.reject(response)
}
},
// 服务器状态码不是200的情况
error => {
if (error.response.status) {
switch (error.response.status) {
case 500:
message.error('网错错误，请稍后再试！')
break
case 404:
message.error('网错错误，请稍后再试！')
break
// 其他错误，直接抛出错误提示
default:
message.error(error.response.data.message)
}
return Promise.reject(error.response)
}
}
)
/**
* get方法，对应get请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
export function get(url, params) {
return new Promise((resolve, reject) =>{
axios.get(url, {
params: params
})
.then(res => {
resolve(res.data)
})
.catch(err => {
reject(err.data)
})
})
}
/**
* post方法，对应post请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
export function post(url, params) {
return new Promise((resolve, reject) => {
axios.post(url, QS.stringify(params))
.then(res => {
resolve(res.data)
})
.catch(err => {
reject(err.data)
})
})
}
/**
* get方法，对应get请求,直接在地址后面拼串的形式
* @param {String} url [请求的url地址]
* @param {String} params [请求时携带的参数]
*/
export function getDynamicynamic(url, params) {
return new Promise((resolve, reject) =>{
const completeUrl = `${
url}/${
params}`
axios.get(completeUrl, {
})
.then(res => {
resolve(res.data)
})
.catch(err => {
reject(err.data)
})
})
}
/**
* post方法，导出文件
* @param {String} url [请求的url地址]
* @param {String} params [请求时携带的参数]
*/
export function getFileUseBlobByPost(url, params = {
}) {
return new promise((resolve, reject)=> {
axios({
method: 'post',
url,
data: params,
responseType: 'blob'
})
.then(res => {
resolve(res)
})
.catch(err => {
reject(err.data)
})
})
}
3 创建单独的api模块
import {
get, post, getDynamicynamic, getFileUseBlobByPost } from './http'
export const testPostApi = p => post('test1/api/login', p)
export const testGetDynamicApi = p => getDynamicynamic('test3/api/getnew', p)
export const testGetApi = p => get('demo2/api/goods', p)
export const testExportApi = p => getFileUseBlobByPost('demo1/api/export', p)
4 在业务代码中使用
<script setup >
import {
onMounted } from 'vue'
import {
testPostApi, testGetApi, testGetDynamicApi } from '@/request/api.js'
const testPostFun = async () => {
const res = await testPostApi({
username: 'admin', password: 'admin' })
console.log(res)
}
const testGetFun = async () => {
const res = await testGetApi()
console.log(res)
}
const testGetDynamicFun = async () => {
const res = await testGetDynamicApi('15')
console.log(res)
}
const testexportFun = async () => {
const res = await testExportApi()
console.log(res)
const fileName = decodeURIComponent(res.headers['content-disposition'].split(';')[1]).split('=')[1].split('"')[1]
let url = window.URL.createObjectURL(new Blob([res.data]))
let a = document.createElement('a')
a.style.display = 'none'
a.href = url
a.setAttribute('download', fileName)
document.body.appendChild(a)
a.click() //执行下载
window.URL.revokeObjectURL(a.href) //释放url
document.body.removeChild(a) //释放标签
}
onMounted(() => {
testPostFun()
testGetFun()
testGetDynamicFun()
testexportFun()
})
</script>
5 在vue.config.js中配置代理
const {
defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
proxy: {
'/test1': {
target: 'http://www.liulongbin.top:3007/',
pathRewrite: {
'^/test1': '' },
ws: false,
changeOrigin: true
},
'/demo2': {
target: 'https://www.escook.cn/',
pathRewrite: {
'^/demo2': '' },
ws: false,
changeOrigin: true
},
'/test3': {
target: 'http://www.liulongbin.top:3005/',
pathRewrite: {
'^/test3': '' },
ws: false,
changeOrigin: true
}
}
}
})
整体项目文件目录
