前端项目经验 —— 接口请求的流程完善

 发文目的

在某些请求接口的交互位置，我们需要一些加载过渡的提示，并且过程中不能然用户点击其他地方，所以接下来我将利用 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，后续会持续更新相关博客，期待你的点赞和关注。