发文目的
在某些请求接口的交互位置,我们需要一些加载过渡的提示,并且过程中不能然用户点击其他地方,所以接下来我将利用 vant4 的轻提示来二次封装,以及 axios 搭配 async、await、try、catch 语法来完成这一套请求的流程。
二次封装 Toast 轻提示函数组件
这里需要用到 vant,直接下载即可。
npm install vant
接着我们将 vant 内置的 toast 方法进行二次封装,代码如下:
// 搭配 vant 的轻提示二次封装
// 导入 toast 的各种方法
import {
showLoadingToast,
showToast,
showSuccessToast,
showFailToast,
closeToast,
} from "vant";
/**
* 基于 vant4 的 toast 方法进行二次封装
* @author Matcha <gn13342725221@outlook.com>
* @param {'Loading'|'show'|'success'|'fail'|'close'} type 提示类型
* @param {object} obj 对应 toast 组件中传入的对象
* @param {string} obj.msg 提示信息
* @param {string} obj.position 提示的位置
* @param {object} obj.onClose 提示关闭时的回调
* @param {string} obj.forbidClick 提示期间是否屏蔽背景点击
* @param {0|1} obj.duration 是否一直显示提示 0为是,1为否
* @param {string} obj.icon 提示中展示的图标
* @example
* ToastFun('Loading', { duration: 0 })
*/
export const ToastFun = (type, obj) => {
let { msg, position, onClose, forbidClick, duration, icon } = obj;
if (type == "Loading") {
showLoadingToast({
duration,
message: msg,
position,
onClose,
forbidClick: true,
});
} else if (type == "show") {
showToast({
forbidClick,
message: msg,
position,
icon,
});
} else if (type == "success") {
showSuccessToast(msg);
} else if (type == "fail") {
showFailToast(msg);
} else if ((type = "close")) {
closeToast();
}
};
cv 即可,但同时要看一下理解一下代码,接着我们直接在对应页面导入使用即可。
使用 ToastFun
我们来模拟一个接口请求,并且使用 axios 搭配 async、await、try、catch 语法,再加上ToastFun 来做各种状态的提示,代码如下:
// 导入封装好的方法
import { ToastFun } from "./hook/toast";
// 定义一个请求方法
const reqTestFun = async () => {
// 在 try 中发起一个接口请求
try {
// 在发起请求前,使用加载提示,并且使它不关闭,等到请求完成后再做处理
ToastFun("Loading", { duration: 0 });
let res = await reqtest(); // 请求接口
// 假设你的请求返回中有状态码,可以做成功或者异常的处理
if (res.code == 200) {
// 可以使用成功的提示,或者直接使用 close 关闭提示
ToastFun("success", {});
} else {
// 返回异常的提示
ToastFun("fail", {});
}
} catch {
// 这里做请求失败的处理和提示
ToastFun("fail", {});
}
};
这样一套流程下来,我们的接口请求就会处理的比较优雅,也方便维护;至此本篇结束,有疑惑或者想法可以留言给我,或者直接查看Vant 4 官方文档,希望可以帮助到你。
这里是Matcha,坚持每天都输出文章&博客&观点,对本文章若有疑惑可以在评论区留言或者私聊我,我每天都会追踪最新消息和即使回复;目前我正在学习 three.js,后续会持续更新相关博客,期待你的点赞和关注。