一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第5天，点击查看活动详情。
通过前面的依赖安装、代码规范的配置以及打包配置，项目的搭建工作基本上已经完成了，现在需要做的就是封装我们平时用的比较频繁的工具函数。
先安装Axios
yarn add axios
request.ts - 请求函数
在src下的utils文件夹中新建request.ts文件
import axios, { AxiosRequestConfig, AxiosInstance } from 'axios';
//创建请求实例的函数
const createAxiosInstance = () => {
//1、首先我们需要定义一些比较常用的配置
// axios.create()会创建一个实例
const instance: AxiosInstance = axios.create({
timeout: 15000, //超时时间
headers: {
'Content-Type': 'application/json',
}
});
//2、请求之前添加一些我们需要的操作,拦截器
//比如添加token,请求参数判空等
instance.interceptors.request.use(
config => {
//...
return config;
},
error => {
throw new Error(error);
}
);
//3、请求成功返回的数据，使用拦截器拦截器请求成功的数据
//比如处理成功返回的数据(后端返回的data数据可能嵌套了很多层，我们可以在请求成功后直接将数据解构并返回出去)
instance.interceptors.response.use(
response => {
let res = response.data;
if (!(res instanceof Object)) {
res = {
code: '200',
msg: '成功',
data: res
}
}
const validateStatus = /^(2|3)\d{2}$/;//code以2或3开头的视为请求成功，具体看前后端之间定义的规范
if (res.code && validateStatus.test(res.code) && res.data) {
return res.data; //直接return我们需要的data
}
//判断失败的code码并做出提示操作
if (res.code === '401') {
//提示错误，$nofity是一个全局的方法，封装了element-plus的ElNotification方法
window.$notify('请求错误', res?.msg || '接口请求报错', 'error');
} else {
window.$notify('警告', res?.msg || '接口请求出现错误', 'warning');
}
return Promise.reject(res);
},
error => {
//判断是否网络问题
if (!window.navigator.onLine) {
window.$notify(
'网络异常',
'请检查网络是否正常连接',
'error'
);
} else {
window.$notify(
'服务器异常',
'请稍后再试',
'error'
);
}
return Promise.reject(error);
}
);
//将我们的实例返回出去
return instance;
}
export const request = createAxiosInstance();
其他的工具函数
延时函数
有时我们需要将某个动画或过渡进行延时展示，或者测试时需要验证loading效果等，这时延时函数就派上用场了
//延时函数
const wait = (time: number) => {
return new Promise<void>(resolve => setTimeout(() => resolve(), time));
}
//使用
wait(1000).then(() => {
dom.style.transition = 'all 800ms'; //延时过渡
//...
});
全局唯一值-uuid
全局唯一标识符（GUID，Globally Unique Identifier）也称作 UUID(Universally Unique IDentifier) 。
function uuid(): string {
let d = new Date().getTime();
window.performance && (d += performance.now());
const uuid = 'xxxyyxxx-xxxx-6xxx-yxxx-xxxxxyyyxxxx'.replace(/[xy]/g, function (c) {
const r = (d + Math.random() * 16) % 16 | 0;
return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);
})
return uuid.replace(/-/g, '');
}
