JavaScript回调函数的应用

JavaScript回调函数的应用

回调函数的写法、作用及实现示例:
在提供的代码中，回调函数是作为参数传递给 saveConfirm 方法的匿名函数 () => { this.model.box7 = false; }。它的作用是确保在 saveConfirm 方法内部的异步操作（如数据提交、表单验证）完成后，再执行 this.model.box7 = false。
一、回调函数的基本写法:
回调函数本质是一个函数，但它的执行时机由其他函数控制。常见写法有两种：

1. 匿名函数（最常用）

JavaScript(最常用)
// 作为参数直接传入
saveConfirm(() => {
  // 回调逻辑
  this.model.box7 = false;
});

2. 具名函数（提高复用性）

// 定义回调函数
const handleSaveComplete = () => {
  this.model.box7 = false;
};

// 传入具名函数
saveConfirm(handleSaveComplete);

二、回调函数的作用：

1. 解耦代码逻辑
   将 “执行什么” 和 “何时执行” 分离，使函数更通用。

// 通用的forEach函数
function forEach(arr, callback) {
  for (let i = 0; i < arr.length; i++) {
    callback(arr[i], i); // 调用回调处理每个元素
  }
}

// 使用时传入具体逻辑
forEach([1, 2, 3], (item) => {
  console.log(item);
});

三、回调函数的替代方案：
回调函数在处理多层嵌套时会导致 “回调地狱”，可使用以下方案优化：

// 修改saveConfirm返回Promise
saveConfirm() {
  return this.$axios.post('/api/save', this.formData);
}

// 使用Promise链式调用
Save_SubmitQuote() {
  if (this.activeNames == 1) {
    this.$refs.quote.saveConfirm()
      .then(() => {
        this.model.box7 = false;
      })
      .catch(error => {
        console.error('保存失败', error);
      });
  }
}