如何配置Meteor.call实现方法调用前后统一执行加载逻辑？

当然可以！你完全不用每次都重复写加载模态框的代码，只需要对Meteor.call做一层封装，把加载状态的处理逻辑统一抽离出来就行。下面给你几个实用的实现方案：

基础封装：一键带加载的方法调用 #

先创建一个全局可用的自定义函数，比如callWithLoader，把swal的显示/隐藏逻辑内置进去：

// 可以把这个函数放到客户端的公共工具文件里，比如client/utils.js
function callWithLoader(methodName, params = {}, callback = null) {
  // 显示加载弹窗
  swal({ 
    title: "Saving...", 
    onBeforeOpen: () => swal.showLoading(),
    allowOutsideClick: false // 可选：禁止点击外部关闭加载框
  });

  // 执行Meteor方法调用
  Meteor.call(methodName, params, (err, res) => {
    // 方法返回后隐藏加载框
    swal.hide();

    // 执行用户传入的自定义回调（如果有的话）
    if (typeof callback === 'function') {
      callback(err, res);
    }
  });
}

怎么用这个封装函数？ #

现在调用任何Meteor方法时，直接用callWithLoader替代Meteor.call就好，不用再写重复的swal代码：

// 示例1：保存数据
callWithLoader("saveUserProfile", { name: "Alan", age: 30 }, (err, res) => {
  if (!err) {
    swal("Success!", "Profile saved successfully", "success");
  }
});

// 示例2：获取数据
callWithLoader("getUserList", {}, (err, res) => {
  if (!err) {
    // 处理返回的用户列表数据
    console.log(res);
  }
});

进阶优化：支持自定义加载提示 #

如果不同方法需要不同的加载文案（比如有的是"Saving..."，有的是"Loading data..."），可以给封装函数加个可选参数：

function callWithLoader(methodName, params = {}, callback = null, loadingTitle = "Saving...") {
  swal({ 
    title: loadingTitle, 
    onBeforeOpen: () => swal.showLoading(),
    allowOutsideClick: false
  });

  Meteor.call(methodName, params, (err, res) => {
    swal.hide();
    if (typeof callback === 'function') {
      callback(err, res);
    }
  });
}

// 使用自定义加载文案
callWithLoader("fetchDashboardData", {}, (err, res) => {
  // 处理仪表盘数据
}, "Loading dashboard data...");

额外优化：统一处理错误提示 #

还可以在封装函数里统一处理方法调用的错误，避免每次都写错误判断：

function callWithLoader(methodName, params = {}, callback = null, loadingTitle = "Saving...") {
  swal({ 
    title: loadingTitle, 
    onBeforeOpen: () => swal.showLoading(),
    allowOutsideClick: false
  });

  Meteor.call(methodName, params, (err, res) => {
    swal.hide();
    
    // 统一显示错误提示
    if (err) {
      swal("Oops!", err.message || "Something went wrong", "error");
    }

    // 依然保留自定义回调，方便做额外处理
    if (typeof callback === 'function') {
      callback(err, res);
    }
  });
}

这样一来，所有的Meteor方法调用都会自动带上加载状态，后期要修改加载框的样式、文案或者逻辑，只需要修改这一个封装函数就够了，非常省心。

内容的提问来源于stack exchange，提问作者Alan Ortega