Vant Toast loading加载使用

最新推荐文章于 2025-05-14 17:04:03 发布

一个假的前端男

最新推荐文章于 2025-05-14 17:04:03 发布

阅读量3.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： H5

原文链接：https://blog.youkuaiyun.com/wgPython/article/details/108122835

H5 专栏收录该内容

12 篇文章

订阅专栏

这段代码展示了如何在前端使用axios进行表单提交，并在提交过程中显示加载提示。当请求成功时，清除加载提示并处理响应数据；若请求失败，同样清除加载提示并显示错误信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

methods: {
 // 提交表单
 onSubmit(value) {
     const toast = vant.Toast.loading({
         duration: 0, // 持续展示 toast
         forbidClick: true,
         message: "加载中..."
     });
     axios.post("http://127.0.0.1:8010/test").then(function (resp) {
         let res = resp.data;
         if (res.code == 200) {
             console.log("成功-清除加载");
             vant.Toast.clear();
         } else {
             _this.loadBtn = false;
             vant.Toast.fail(res.msg);
         }
     }).catch(function (error) {
         // 请求发送失败
         console.log("请求失败-清除加载");
         vant.Toast.clear();  // 清除加载
         vant.Toast.fail('网络不稳定');
     });
  }
}