vue3版本+TS(typescript)+简单封装api 配置反向代理
vue3版本+TS(typescript)+简单封装api配置反向代理
·
vue3版本+TS(typescript)+封装api
1、在src下新建一个 shared文件夹 文件夹下新建一个request.ts文件,在此文件里写如如下代码
import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from "axios";
import { ElMessage } from 'element-plus'
interface requestType {
url: string
params?: any
}
const handleCode = async (code: number, msg: string) => {
switch (code) {
case 401:
ElMessage.error(msg || '登录失效')
setTimeout(() => {
console.log('登录失效')
}, 1500)
// 跳转登录
break
default:
ElMessage.error(msg || `后端接口${code}异常`)
break
}
}
//创建axsio 赋给常量service
const service: AxiosInstance = axios.create({
baseURL:process.env.VUE_APP_BASE_URL,
timeout:30000,
headers: {
'Content-Type': 'application/json;charset=UTF-8',
}
});
// 添加请求拦截器
service.interceptors.request.use(
(config: any)=> {
console.log(config,'config')
return config;
},
(error:any)=> {
// 对请求错误做些什么
console.log(error,'error')
return Promise.reject(error);
}
);
// 添加响应拦截器
service.interceptors.response.use(
(response: AxiosResponse)=> {
//response参数是响应对象
// 对响应数据做点什么
const { data, config } = response
return data;
},
(error:any)=> {
const { response} = error
if (error.response && error.response.data) {
const { status, data } = response
handleCode(status, data.msg)
// 对响应错误做点什么
return Promise.reject(error);
}else {
let { message } = error
if (message === 'Network Error') {
message = '后端接口连接异常'
}
if (message.includes('timeout')) {
message = '后端接口请求超时'
}
if (message.includes('Request failed with status code')) {
const code = message.substr(message.length - 3)
message = '后端接口' + code + '异常'
}
message.error(message || `后端接口未知异常`)
return Promise.reject(error);
}
}
);
/**
* @description GET
*/
const GET = (data: requestType) => {
return service.get(data.url, data.params)
}
/**
* @description POST
*/
const POST = (data: requestType) => {
return service.post(data.url, data.params)
}
/**
* @description PUT
*/
const PUT = (data: requestType) => {
return service.put(data.url, data.params)
}
/**
* @description DELETE
*/
const DELETE = (data: requestType) => {
return service({
url: data.url,
method: 'delete',
data: data.params,
} as AxiosRequestConfig)
}
/**
* @description PATCH
*/
const PATCH = (data: requestType) => {
return new Promise((resolve, reject) => {
service
.put(data.url, data.params)
.then((res: any) => {
if (res && res.status == 200) {
resolve(res)
}
})
.catch((error: any) => {
reject(error)
})
})
}
export { GET, POST, PUT, DELETE, PATCH }
2 在src下新建一个api文件夹 在api文件夹下新建一个ts文件 ts文件代码如下
//XXXX
import { GET, POST, PUT, DELETE } from '@/shared/request'
let URL = '/drone/drones/'
export function getDrone(params: any) {
return GET({ url: URL, params: params })
}
3、在页面中写代码发请求
<template>
<div class="home">
5465465
<el-table :data="tableData" stripe style="width: 100%">
<el-table-column prop="name" label="无人机名称" />
<el-table-column prop="contact_phone" label="联系人" />
<el-table-column prop="max_height" label="联系电话" />
<el-table-column prop="max_speed" label="最大飞行高度" />
<el-table-column prop="life_time" label="续航时间" />
<el-table-column prop="is_running" label="运行状态" />
</el-table>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref, createVNode, onMounted } from "vue";
import { ElMessage } from 'element-plus'
import { getDrone } from "@/api/base";//<*************************
const tableData = ref<any>([]);
async function getDroneData() {//<*************************
let param = {
page_index: 1,
page_size: 20,
};
let res: any = await getDrone(param);
if (res.code === 20000) {
let arr = res?.data.list
tableData.value = arr
} else {
ElMessage.error(res.msg)
}
}
onMounted(() => {
getDroneData();
});
</script>
4、新建.env.development 与.env.production
5、配置反向代理
const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
publicPath: "./",
outputDir: "dist", //打包文件名称
transpileDependencies: true,
devServer: {
// port: 8080,
proxy: {
"/api": {
target: "https://dev.XXXXXXXXXXXXX", //反向代理地址
changeOrigin: true,
pathRewrite: {
"^/api": "",
},
},
},
},
chainWebpack: (config) => {
config.plugin("html").tap((args) => {
args[0].title = "XXXX";//系统标题
return args;
});
},
});
更多推荐
所有评论(0)