前言
现在 vue3 已经越来越多人使用了，为了提高开发的效率，这里封装了很多的工具类，让大家的开发过程更加的酣畅淋漓。
axios 和 api 的封装
一般选择在pages同级的根目录下，创建utils文件夹，utils文件夹下创建axios.ts
utils/axios.ts
import axios, {
AxiosResponse, AxiosRequestConfig } from 'axios';
import router from "@/router";
import {
pinia, notification } from "@/utils/utils"; // 工具类
import {
storage } from '@/utils/storage'; // 缓存
// 状态管理 pinia
import userStore from '@/store/user'
const useUserStore = userStore(pinia)
let baseURL: string = ''
// 这一步的目的是判断出当前是开发环境还是生成环境，方法不止一种，达到目的就行
if (process.env.NODE_ENV == "development") {
baseURL = 'http://development.com/api/'
} else {
baseURL = 'http://pro.com/api/'
}
console.log(process.env.NODE_ENV, 'node-env')
let config = {
baseURL: baseURL,
timeout: 30000 // 设置最大请求时间
}
const service = axios.create(config);
// 请求拦截
service.interceptors.request.use(
(config: AxiosRequestConfig) => {
// do something
// 处理请求头等逻辑
config.headers = config.headers || {
}
config.headers.token = storage.get('token') || ''
return config;
},
(error: any) => {
Promise.reject(error);
}
);
// 响应拦截
service.interceptors.response.use(
async (res: AxiosResponse) => {
const code: number = res.data.code
// 未登录
if (code === 1001) {
notification('错误提示', res.data.msg, 'error')
// 用户信息、token、部分缓存等数据的清空
// 跳转到登录页/注册页等逻辑
router.push({
path: '/login'})
return Promise.reject(res.data)
}
return res.data
},
(error: any) => {
// 可能有些接口时在这里处理未登录等清空，根据接口的性质来搬运
return Promise.reject(error);
}
);
export default service;
在pages同级的根目录下，创建api文件夹，api文件夹下创建index.ts
api/index.ts
import request from '@/utils/axios';
/**
* 作者：故蓝寻
* 时间：2023/01/13 14:25:35
* 功能：获取列表
*/
export const getList = (params: Object) => {
return request({
url: '/getList',
method: 'get',
params: params
});
};
/**
* 作者：故蓝寻
* 时间：2022/01/13 14:25:35
* 功能：设置数据
*/
export const setData = (params: Object = {
}) => {
return request({
url: '/setData',
method: 'post',
params: params
});
};
使用：
import {
getData } from '@/api/index'; // 接口
import {
loading, notification } from "@/utils/utils"; // 工具类
/**
* 作者：故蓝寻
* 时间：2023/03/26 12:20:02
* 功能：获取详情
*/
const onGetData = () => {
loading() // load加载
getData({
id: 1
}).then(res => {
loading().close() // 关闭load加载
if (res.code === 1) {
notification('成功提示', res.msg, 'success')
// 逻辑处理
}
}).catch(e => {
notification('错误提示', res.msg, 'error')
loading().close()
// 错误的逻辑处理
})
}
storage 的封装
utils文件夹下创建storage.ts
utils/storage.ts
/**
* 封装操作localstorage本地存储的方法
*/
export const storage = {
//存储
set(key: string, value: any) {
localStorage.setItem(key, JSON.stringify(value))
},
//取出数据
get<T>(key: string) {
const value = localStorage.getItem(key)
if (value && value != "undefined" && value != "null") {
return <T>JSON.parse(value)
}
},
// 删除数据
remove(key: string) {
localStorage.removeItem(key)
}
};
/**
* 封装操作sessionStorage本地存储的方法
*/
export const sessionStorage = {
//存储
set(key: string, value: any) {
window.sessionStorage.setItem(key, JSON.stringify(value))
},
//取出数据
get<T>(key: string) {
const value = window.sessionStorage.getItem(key)
if (value && value != "undefined" && value != "null") {
return JSON.parse(value)
}
return null
},
// 删除数据
remove(key: string) {
window.sessionStorage.removeItem(key)
}
}
使用：
import {
sessionStorage, storage } from '@/utils/storage' // 引入
storage.set('token', 'token')
storage.get('token')
storage.remove('token', 'token')
utils 的封装（长期完善）
utils文件夹下创建utils.ts
utils/utils.ts
import router from "@/router";
import {
ElLoading, ElNotification } from 'element-plus';
import {
createPinia } from "pinia";
/**
* 这里设置pinia的原因很简单，pinia模块化的时候，在main.ts里需要注册createPinia()
* 但是main.ts在注册的话，axios.ts更新pinia就不能在其它地方获取，相当于创建了两个pinia
* 如果没有使用pinia模块化可忽略这里
*/
export const pinia = createPinia()
/**
* 功能：获取路由参数
* 使用：解构 const { id } = routerParam，或 let routerParam = routerParam()
*/
export function routerParam(){
return router.currentRoute.value.query
}
const loadOptions = {
lock: false,
text: '加载中...',
background: 'rgba(255, 255, 255, 0.5)',
}
/**
* 功能：loading
* 使用：loading() 触发加载，loading.close() 关闭加载
*/
export function loading(options = loadOptions){
return ElLoading.service(options)
}
/**
* 功能：通知
*/
export function notification(title: string = '提示', message: string, type: 'success' | 'error' | 'warning' | 'info'){
ElNotification({
title,
message,
type,
})
}
/**
* 功能：路由解析并且拼接
* 使用：parseUrl('home', {id:1,type: 'add'})
* 返回：'/pages/home?id=1&type=add'
*/
export function parseUrl(url: '', params: any) {
let arr = [];
let string = '';
for (let i in params) {
arr.push(i + "=" + params[i]);
}
string = "/pages/" + url;
if (arr.length > 0) {
string += "?" + arr.join("&");
}
return string;
}
/**
* 功能：判断数据类型
*/
export function isDataType(data: any, type: any) {
return Object.prototype.toString.call(data) === '[object ' + type + ']';
}
/**
* 功能：判断数组里是否有某个key
*/
export function in_array(search: any, array: []) {
let flag = false;
for (let i in array) {
if (array[i] == search) {
flag = true;
break;
}
}
return flag;
}