精细掌控 Vant 中 Toast 提示

大家可能会好奇，为什么要特别聊聊一个简单的提示组件。这是因为我在使用 Toast 组件时遇到了一个有意思的问题，想给大家分享一下。虽然 Toast 用起来看似简单，但在多实例管理上可能隐藏着一些小坑。

有关 Toast 其他方法可以参考官方文档：Vant 3 - Lightweight Mobile UI Components built on Vue

下面只重点介绍其中的一个方法。

Toast 是一种轻量级的提示组件，通常用于显示短暂的信息，如加载、错误提示、成功通知等。Toast.clear() 是其中一个方法，主要用于在应用中清除或关闭当前正在显示的 Toast 提示。

1. 主要作用

Toast.clear() 的主要作用是 立即关闭当前显示的 Toast 提示，无论它是手动调用的，还是在定时器下显示的。此方法可以用在各种情景下，保证没有多余的信息提示在页面残留。

简单举个 🌰：

import { Toast } from 'vant'
// 显示一个加载提示
Toast.loading({
  message: '加载中...',
  duration: 0, // 0 表示不会自动关闭
  forbidClick: true
})
// 完成加载后，清除提示
setTimeout(() => {
  Toast.clear()
}, 3000)

2. 使用场景

1、异步加载结束

在异步操作（如数据请求、API调用等）中，通过会显示一个加载提示告知用户等待过程。当数据加载完成或请求返回结果时，不论成功 or 失败，都应该调用 Toast.clear() 来清除提示，避免一直展示，影响用户体验。

🌰

Toast.loading('加载中...')
fetchData()
  .then((response) => {
    Toast.clear() // 数据请求成功，清除加载提示
    // 处理数据
  })
  .catch((error) => {
    Toast.clear() // 请求失败，清除加载提示
    Toast.error('加载失败') // 显示错误信息
  })

2、防止重复提示

在一些用户交互频繁方场景中，例如表单提交、按钮点击等，如果每次操作都显示一个新的 Toast，很容易导致提示信息堆叠，用户界面变得杂乱无章。为避免这种情况，可以在每次操作之前调用 Toast.clear() 来清空之前的提示信息。

🌰

const handleSubmit = async () => {
  Toast.clear() // 清除之前的提示
  Toast.loading('提交中...')
  try {
    await submitForm()
    Toast.clear() // 提交成功，清除提示
    Toast.success('提交成功')
  } catch (error) {
    Toast.clear() // 提交失败，清除提示
    Toast.error('提交失败')
  }
}

3、手动关闭

有时我们希望用户能够主动关闭正在显示的 Toast 提示，例如在某些操作完成后，用户可能希望点击关闭按钮来消除提示。可以通过调用 Toast.clear() 来手动控制提示的显示状态。

🌰

Toast.loading('加载中...', 0) // 设置一个没有时间限制的加载提示
setTimeout(() => {
  Toast.clear() // 过了一段时间后手动清除提示
}, 5000)

3. 注意事项

1、清除时机

在使用 Toast.clear() 时，确保异步操作完成后再调用。提前调用可能会导致用户无法看到操作完成的状态，影响用户体验。

🌰

Toast.loading('正在加载...');
fetchData().then(response => {
  Toast.clear();  // 请求完成后才清除加载提示
  if (response.success) {
    Toast.success('加载成功');
  } else {
    Toast.error('加载失败');
  }
});

2、避免频繁调用

如果用户点击过快或频繁触发某个操作（例如连续点击按钮），可能会触发多次 Toast.clear() 调用，会导致不必要的性能消耗。虽然 Toast.clear() 的性能影响通常较小，但频繁的清楚操作可能会导致提示信息闪烁，影响页面流畅性。

🌰

const handleClick = () => {
  Toast.loading('处理中...');
  setTimeout(() => {
    Toast.clear();  // 避免用户快速连续点击时频繁调用
    Toast.success('操作成功');
  }, 2000);
};

建议：在高频操作中使用防抖（debounce）或节流（throttle）机制，避免  Toast.clear() 频繁调用。

📢 3、多 Toast 实例的处理！！

在 Vant UI 中，当页面上存在多个 Toast 提示实例时，Toast.clear() 方法会一次性关闭所有正在显示的 Toast 实例。这种设计使其成为一个“全局清除”的操作，因此在需要保留部分 Toast 提示的情况下，使用它要特别小心。

# 为什么会清除所有 Toast 实例？

Vant UI 的 Toast 组件通常是以全局单例模式存在的，即页面中的所有 Toast 提示实例实际上是共享的。当调用 Toast.clear() 时，它会直接影响这个共享的单例对象，导致所有正在显示的 Toast 消失。因此，这一设计不支持在调用 Toast.clear() 时仅关闭某个特定的 Toast，而不影响其他。

# 使用出现的问题

假设有以下场景：

当用户点击某个按钮时，会弹出一个短暂的反馈提示（例如“操作成功”或“操作失败”），与此同时，调用接口请求数据，会启动一个持续的加载提示（如“加载中...”）。

然而，若加载过程较快，可能会出现一个问题：反馈提示（如“操作成功”）刚显示出来，紧接着加载提示（“加载中...”）也开始出现，结果加载完成后，Toast.clear() 方法会同时清除这两个提示，导致用户只看到一个闪现的效果，根本没有足够的时间看到完整的反馈内容。

// 点击按钮时触发操作
function onButtonClick() {
  // 反馈提示
  Toast('操作成功')
  // 显示加载提示
  Toast.loading('加载中...', { duration: 0 })
  // 发起接口请求
  fetchData()
    .then((response) => {
      // 请求成功，清除加载提示，上面两个请求都会清除
      Toast.clear()
    })
    .catch((error) => {
      Toast.clear()
      // 显示错误反馈
      Toast('操作失败')
    })
}

// 模拟接口请求
function fetchData() {
  return new Promise((resolve, reject) => {
    // 模拟加载
    setTimeout(() => {
      resolve('data')
    }, 200) // 模拟快速的加载过程
  })
}

这种现象影响用户体验，因为用户可能无法充分看到反馈信息，尤其是当加载速度较快时，Toast.clear() 会不自觉地提前关闭反馈提示，造成界面显示混乱。

解决方法：

// 点击按钮时触发操作
function onButtonClick() {
  // 显示加载提示
  const loadingToast = Toast.loading('加载中...', { duration: 0 });

  // 显示操作反馈提示，延时显示确保用户看到
  const successToast = setTimeout(() => {
    Toast('操作成功');
  }, 500);  // 延时500毫秒后再显示操作成功提示

  // 发起接口请求
  fetchData().then((response) => {
    // 请求成功，清除加载提示
    loadingToast.clear();

    // 如果操作成功，清除成功提示
    clearTimeout(successToast); // 确保在加载结束前，操作反馈提示不会被提前清除
  }).catch((error) => {
    // 请求失败，清除加载提示
    loadingToast.clear();

    // 显示错误反馈
    Toast('操作失败');
  });
}

// 模拟接口请求
function fetchData() {
  return new Promise((resolve, reject) => {
    // 模拟加载
    setTimeout(() => {
      resolve('data');
    }, 200);  // 模拟快速的加载过程
  });
}

当加载提示 Toast.loading() 显示时，使用 setTimeout 延迟显示操作反馈（如“操作成功”）。这样可以确保在加载提示展示后，操作反馈提示有足够的时间展示给用户，即使加载速度较快，也不会因为清除提示过早而影响用户体验。

加载提示在请求完成后直接清除，而操作反馈提示则通过延时清除，避免提示闪现或重叠。

# 注意事项

- 避免在短时间内频繁调用 Toast.clear()，以防止干扰多个 Toast 之间的显示顺序。

- 评估 Toast.clear() 调用时机，确保在清除前不会误清重要的 Toast 提示。

4. 为什么使用 Toast.clear() ？

Toast.clear() 提供了一种便捷方式来手动控制 Toast 的关闭。它解决了以下问题：

- 避免界面阻塞：在加载或错误时及时清除提示，避免 Toast 堆叠影响用户体验。

- 保持信息简洁：防止多条信息同时出现，确保提示信息简单明了。