vue3+vant 的showFailToast显示时间很短

Question

vue3+vant 的showFailToast显示时间很短，设置了duration也不起作用，登录的时候无效，但是进入里面页面时有接口错误停留时间就正常

import { Toast, showFailToast } from 'vant'

// 响应拦截器
service.interceptors.response.use(
  (response: AxiosResponse) => {
    const params = new URLSearchParams(window.location.search);
    const OpenID = params.get('OpenID'); // "abc123"
    const APPID = params.get('APPID'); // "abc123"
    console.log('OpenID', OpenID);
    const { Status, Message, Data } = response.data
    // 根据自定义错误码判断请求是否成功
    if (OpenID) {
      // 保存到 localStorage（也可以选择 sessionStorage）
      localStorage.setItem('OpenID', OpenID);
      console.log('✅ 已将 OpenID 保存到 localStorage:', OpenID);
    } else {
      console.log('⚠️  当前 URL 中没有提供 OpenID 参数');
    }
    if (APPID) {
      localStorage.setItem('APPID', APPID);
      console.log('✅ 已将 APPID 保存到 localStorage:', APPID);
    } else {
      console.log('⚠️  当前 URL 中没有提供 APPID 参数');
    }
    if (Status > 0 || Status === 0) {
      // if (Data.CardID === 0) {
      //   console.log('该用户未绑卡');
      //  showFailToast('该用户未绑卡');
      //   return Promise.reject(new Error('该用户未绑卡'))
      // } else {
      //   // 成功返回数据
      // return Data
      // }
    }
    else if (Status === -99) {
      showFailToast({ message: '终端服务器正在维护或暂时不可用，请稍后再试', duration: 5000 });
      // return Promise.reject(new Error('服务器异常'))
    } else if (Status === -403) {
      console.log('AppID信息错误 拒绝', Message);
      showFailToast({ message: Message || 'AppID信息错误 拒绝', duration: 5000 });  
    }
    else if (Status === -402) {
      console.log('OpenID信息错误 拒绝', Message);
      showFailToast({ message: Message || 'OpenID信息错误 拒绝', duration: 5000 });
    } else {
      console.log('操作失败-----', Message);
      showFailToast({ message: Message || '操作失败', duration: 5000 })
    }
      return  Data
  },

  }
)
//登录----
const handleLogin = async () => {
  // if (!phone.value) {
  //   showToast('请输入手机号');
  //   return;
  // }
  if (!employeePass.value) {
    showToast('请输入密码');
    return;
  }
  if (!employeeNo.value) {
    showToast('请输入用户编号');
    return;
  }

  // 保存loading toast实例以便后续清除
  const loadingToast = showLoadingToast({
    message: '登录中...',
    forbidClick: true,
  });

  const params = {
    // phone: phone.value,
    // password: password.value,
    // appID: localStorage.getItem('APPID'),
    appID: appID.value,
    employeeNo: employeeNo.value,
    employeeName: employeeName.value,
    employeePass: employeePass.value,
    // weChatOpenID: localStorage.getItem('OpenID'),
    weChatOpenID: weChatOpenID.value,
  };
  console.log('登录参数:', JSON.stringify(params));
  // 登录/绑定
  await passageApi.getBindUser({
    appID: appID.value,
    employeeNo: employeeNo.value,
    employeeName: employeeName.value,
    employeePass: employeePass.value,
    // weChatOpenID: localStorage.getItem('OpenID'),
    weChatOpenID: weChatOpenID.value,
  }).then(res => {
    console.log('登录/绑定成功:', res);
    if (res) {
      try {
        userStore.fetchCardInfo().then(() => {
          console.log('登录---卡片信息获取成功', userStore.cardInfo);
        }).catch((error) => {
          console.log('卡片信息获取失败，将在首页再次尝试', error);
        });
        console.log('登录---卡片信息获取成功', userStore.cardInfo);
        // 确保passageApi.getBindUser请求成功且userStore.cardInfo有内容后才跳转
        if (userStore.cardInfo && Object.keys(userStore.cardInfo).length > 0) {
          // 清除loading toast，然后跳转
          loadingToast.close();
          setTimeout(() => {
            router.push({
              name: "home",
            });
          }, 1000);
        } else {
          // 如果没有cardInfo，也需要清除loading toast
          loadingToast.close();
        }
      } catch (error) {
        console.log('卡片信息获取失败，将在首页再次尝试', error);
        // 发生错误时也需要清除loading toast
        loadingToast.close();
      }
    } else {
      // 如果登录响应为空，也需要清除loading toast
      loadingToast.close();
      employeeNo.value = '';
      employeePass.value = '';
    }

  }).catch(error => {
    console.log('登录/绑定失败:', error);
    // 发生错误时清除loading toast并显示错误信息
    if (typeof loadingToast !== 'undefined') {
      loadingToast.close();
    }
    // showToast(error.message || '登录失败，请稍后重试');
  })

};

Answer 1

让【宝码香车】来帮您解答，本回答参考DeepSeek编写，并整理提供。

如果答案让您满意，请采纳、点赞、关注，非常感谢！
.
每日一句正能量，让它带给您好心情：把小日子过好，就是最大的幸福。
.

根据你的代码分析，Vue3+Vant的showFailToast显示时间很短的问题可能有以下几个原因：

问题分析

1. 页面跳转中断：在登录成功后，页面立即跳转导致Toast被中断
2. Toast实例冲突：可能存在多个Toast实例互相覆盖
3. 异步时序问题：请求响应和页面跳转的时序问题

解决方案

方案1：优化登录逻辑，确保Toast完整显示

const handleLogin = async () => {
  if (!employeePass.value) {
    showToast('请输入密码');
    return;
  }
  if (!employeeNo.value) {
    showToast('请输入用户编号');
    return;
  }


  const loadingToast = showLoadingToast({
    message: '登录中...',
    forbidClick: true,
  });


  try {
    const res = await passageApi.getBindUser({
      appID: appID.value,
      employeeNo: employeeNo.value,
      employeeName: employeeName.value,
      employeePass: employeePass.value,
      weChatOpenID: weChatOpenID.value,
    });
    
    console.log('登录/绑定成功:', res);
    
    if (res) {
      // 先清除loading，再获取卡片信息
      loadingToast.close();
      
      try {
        await userStore.fetchCardInfo();
        console.log('登录---卡片信息获取成功', userStore.cardInfo);
        
        // 延迟跳转，确保任何可能的Toast都能完整显示
        setTimeout(() => {
          router.push({ name: "home" });
        }, 1500);
        
      } catch (error) {
        console.log('卡片信息获取失败，将在首页再次尝试', error);
        // 即使获取卡片信息失败，也允许跳转
        setTimeout(() => {
          router.push({ name: "home" });
        }, 1500);
      }
    }
  } catch (error) {
    console.log('登录/绑定失败:', error);
    loadingToast.close();
    
    // 确保错误Toast能完整显示
    showFailToast({ 
      message: error.message || '登录失败，请稍后重试', 
      duration: 3000 
    });
  }
};

方案2：检查响应拦截器中的Toast调用

在响应拦截器中，确保Toast调用不会因为Promise链中断：

// 响应拦截器优化
service.interceptors.response.use(
  (response: AxiosResponse) => {
    const params = new URLSearchParams(window.location.search);
    const OpenID = params.get('OpenID');
    const APPID = params.get('APPID');
    
    // 保存OpenID和APPID的逻辑...
    
    const { Status, Message, Data } = response.data;
    
    if (Status > 0 || Status === 0) {
      return Data;
    } 
    else if (Status === -99) {
      // 使用setTimeout确保Toast能显示
      setTimeout(() => {
        showFailToast({ 
          message: '终端服务器正在维护或暂时不可用，请稍后再试', 
          duration: 5000 
        });
      }, 100);
      return Promise.reject(new Error('服务器异常'));
    }
    else if (Status === -403) {
      setTimeout(() => {
        showFailToast({ 
          message: Message || 'AppID信息错误 拒绝', 
          duration: 5000 
        });
      }, 100);
      return Promise.reject(new Error('AppID信息错误'));
    }
    else if (Status === -402) {
      setTimeout(() => {
        showFailToast({ 
          message: Message || 'OpenID信息错误 拒绝', 
          duration: 5000 
        });
      }, 100);
      return Promise.reject(new Error('OpenID信息错误'));
    } else {
      setTimeout(() => {
        showFailToast({ 
          message: Message || '操作失败', 
          duration: 5000 
        });
      }, 100);
      return Promise.reject(new Error(Message || '操作失败'));
    }
  },
  (error) => {
    // 处理网络错误等
    setTimeout(() => {
      showFailToast({ 
        message: '网络错误，请检查网络连接', 
        duration: 5000 
      });
    }, 100);
    return Promise.reject(error);
  }
);

方案3：使用全局Toast配置

在main.ts或入口文件中配置全局Toast默认时长：

import { Toast } from 'vant';


// 设置全局默认时长
Toast.setDefaultOptions({ 
  duration: 5000 
});

方案4：检查Vant版本和样式冲突

# 检查Vant版本
npm list vant


# 如果有问题，尝试重新安装
npm install vant@latest

建议

1. 优先采用方案1：主要问题很可能是页面跳转中断了Toast显示
2. 添加错误边界：确保所有可能的错误路径都能正确处理Toast
3. 统一Toast管理：考虑使用统一的Toast管理函数

问题应该能通过优化登录成功后的页面跳转时机来解决。