axios在vite+vue3.0+ts中的封装和应用
目前，关于vue中使用axios的作为前端和后端接口交互工具的用法文章，网络某博客上数不胜数。但是细心的朋友会发现，很多文章都是从粘贴复制过来的，讲的模拟两可，缺斤少两的毛病着实让人怒气横生。所以今天让小编来给大家安排最新版的axios整合vite+vue3.0+ts的具体封装步骤。跟着我的步伐，撸起来。。。（备注：学习交流加QQ：1766226354）
以下内容均基于下方视频完结后的扩展：
1、安装axios
npm i axios注意：这里的安装命令就是默认安装最新版本的axios
2、封装请求错误代码提示
目录结构 error-code-type.ts
error-code-type.ts文件内容如下：
export const errorCodeType = function(code:string):string{
let msg:string = ""
switch (code) {
case "401":
msg = '认证失败，无法访问系统资源'
break;
case "403":
msg = '当前操作没有权限'
break;
case "404":
msg = '访问资源不存在'
break;
case "default":
msg = '系统未知错误，请反馈给管理员'
break;
default:
return '未知错误，请联系管理员'
}
return msg
}3、封装request.ts
这里用到的element-plus大家可以参考其官网安装即可，传送门：
官网：https://element-plus.org/en-US/component/border.html
安装命令：npm install element-plus --save目录结构
request.ts文件内容如下：
import axios from 'axios';
import { errorCodeType } from '@/script/utils/error-code-type';
import { ElMessage, ElLoading } from 'element-plus';
// 创建axios实例
const service = axios.create({
// 服务接口请求
baseURL: import.meta.env.VITE_APP_BASE_API,
// 超时设置
timeout: 15000,
headers:{'Content-Type':'application/json;charset=utf-8'}
})
let loading:any;
//正在请求的数量
let requestCount:number = 0
//显示loading
const showLoading = () => {
if (requestCount === 0 && !loading) {
loading = ElLoading.service({
text: "拼命加载中，请稍后...",
background: 'rgba(0, 0, 0, 0.7)',
spinner: 'el-icon-loading',
})
}
requestCount++;
}
//隐藏loading
const hideLoading = () => {
requestCount--
if (requestCount == 0) {
loading.close()
}
}
// 请求拦截
service.interceptors.request.use(config => {
showLoading()
// 是否需要设置 token
// config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
// get请求映射params参数
if (config.method === 'get' && config.params) {
let url = config.url + '?';
for (const propName of Object.keys(config.params)) {
const value = config.params[propName];
var part = encodeURIComponent(propName) + "=";
if (value !== null && typeof(value) !== "undefined") {
if (typeof value === 'object') {
for (const key of Object.keys(value)) {
let params = propName + '[' + key + ']';
var subPart = encodeURIComponent(params) + "=";
url += subPart + encodeURIComponent(value[key]) + "&";
}
} else {
url += part + encodeURIComponent(value) + "&";
}
}
}
url = url.slice(0, -1);
config.params = {};
config.url = url;
}
return config
}, error => {
console.log(error)
Promise.reject(error)
})
// 响应拦截器
service.interceptors.response.use((res:any) => {
hideLoading()
// 未设置状态码则默认成功状态
const code = res.data['code'] || 200;
// 获取错误信息
const msg = errorCodeType(code) || res.data['msg'] || errorCodeType('default')
if(code === 200){
return Promise.resolve(res.data)
}else{
ElMessage.error(msg)
return Promise.reject(res.data)
}
},
error => {
console.log('err' + error)
hideLoading()
let { message } = error;
if (message == "Network Error") {
message = "后端接口连接异常";
}
else if (message.includes("timeout")) {
message = "系统接口请求超时";
}
else if (message.includes("Request failed with status code")) {
message = "系统接口" + message.substr(message.length - 3) + "异常";
}
ElMessage.error({
message: message,
duration: 5 * 1000
})
return Promise.reject(error)
}
)
export default service;4、完整vite.config.ts文件内容
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { loadEnv } from 'vite';
import path from 'path';
// https://vitejs.dev/config/
export default({ command, mode }) => {
return defineConfig({
plugins: [vue()],
server:{
host: '127.0.0.1',
port: Number(loadEnv(mode, process.cwd()).VITE_APP_PORT),
strictPort: true, // 端口被占用直接退出
https: false,
open: true,// 在开发服务器启动时自动在浏览器中打开应用程序
proxy: {
// 字符串简写写法
// '/foo': '',
// 选项写法
'/dev-api': {
target: mode==='development'?loadEnv(mode, process.cwd()).VITE_APP_DEV_URL:loadEnv(mode, process.cwd()).VITE_APP_PROD_URL,
changeOrigin: true,
rewrite: (path) => path.replace(/^\/dev-api/, '')
}
},
hmr:{
overlay: false // 屏蔽服务器报错
}
},
resolve:{
alias:{
'@': path.resolve(__dirname,'./src'),
'~script': path.resolve(__dirname,'./src/script'),
}
},
css:{
// css预处理器
preprocessorOptions: {
scss: {
additionalData: '@import "@/assets/styles/global.scss";'
}
}
},
build:{
chunkSizeWarningLimit: 1500, // 分块打包，分解块，将大块分解成更小的块
rollupOptions: {
output:{
manualChunks(id) {
if (id.includes('node_modules')) {
return id.toString().split('node_modules/')[1].split('/')[0].toString();
}
}
}
}
}
})
}5、使用axios封装
6、完整的环境变量配置文件production和development
6.1、项目根目录的development文件内容如下
# 开发环境 VITE_APP_TITLE = "前端技术栈" #端口号 VITE_APP_PORT = "3002" # 请求接口 VITE_APP_DEV_URL = "http://localhost:8282" # 前缀 VITE_APP_BASE_API = "/dev-api"6.2、项目根目录下的production文件内容如下
# 开发环境 VITE_APP_TITLE = "前端技术栈" #端口号 VITE_APP_PORT = "3002" # 请求接口 VITE_APP_DEV_URL = "http://localhost:8282" # 前缀 VITE_APP_BASE_API = "/dev-api"7、在任何vue文件内使用接口：
注意：这里还有一个PageParams全局分页对象：
目录结构：
page-params.ts文件内容如下：
// 全局统一分页参数类型声明 declare interface PageParams { pageNum:number, pageSize:number, type?:Model, // 可选参数 readonly sort?:string // 只读可选参数 } interface Model{ type?:string } export default PageParams;
