Vue前端发起promise请求,若请求2分钟之内能完成就直接完成,若两分钟之后还未完成就直接路由跳转到其他页面

在Vue中,你可以使用JavaScript的PromisesetTimeout来实现这个需求。这里是一个基本的实现思路:

  1. 创建一个Promise,该Promise内部发起你的API请求(假设你使用的是axios)。
  2. 同时设置一个setTimeout来在2分钟后执行一个操作(比如路由跳转)。
  3. 如果API请求在2分钟内完成,你需要清除setTimeout设置的定时器,并处理请求的响应。
  4. 如果API请求在2分钟后仍未完成,则执行setTimeout中的操作(路由跳转)。

以下是一个示例代码:

import axios from 'axios';  
import router from './router'; // 假设你有一个router实例  function timedRequest(url, timeout = 120000) { // 120000毫秒 = 2分钟  // 创建一个Promise  return new Promise((resolve, reject) => {  // 发起API请求  const xhr = axios.get(url);  // 设置定时器  const timer = setTimeout(() => {  // 清除请求(如果可能的话,但axios没有直接的方法)  // xhr.abort(); // 注意:axios的cancel token可以用来取消请求,但这里为了简化,我们直接路由跳转  // 路由跳转到其他页面  router.push('/other-page');  // 拒绝Promise,表示请求超时  reject(new Error('Request timed out'));  }, timeout);  // 监听请求完成  xhr.then(response => {  // 清除定时器  clearTimeout(timer);  // 处理请求响应  resolve(response.data);  }).catch(error => {  // 清除定时器  clearTimeout(timer);  // 处理请求错误  reject(error);  });  });  
}  // 使用示例  
timedRequest('https://api.example.com/data').then(data => {  console.log('Request succeeded:', data);  
}).catch(error => {  console.error('Request failed:', error);  
});

注意

  • 上面的代码示例使用了axios进行API请求,但请注意,axios并没有直接提供取消请求的方法。不过,你可以使用axios的CancelToken来实现请求取消的功能。
  • 在上面的代码中,我没有真正取消axios请求(即xhr.abort()),因为这会涉及到更复杂的取消逻辑(如使用CancelToken)。但在这里,我们直接选择路由跳转到其他页面,并在跳转前拒绝Promise。
  • 根据你的实际需求,你可能需要调整路由跳转的逻辑(比如显示一个提示消息给用户)。
        // 设置定时器时间const timer = setTimeout(() => {that.endLoading();this.$modal.msgSuccess("模型计算时间较长,可继续执行其他操作,后续进行刷新获取运行状态");// 手动强制路由跳转到状态管理页面this.$tab.closeOpenPage({path: '/run/own' })}, 120000);//同步任务this.startLoading();//前端发请求complete(this.taskForm).then(response => {//两分钟之前执行完,无需手动调整跳转页面clearTimeout(timer)that.endLoading();this.$modal.msgSuccess(response.msg);//在状态管理中查看流程运转情况this.$tab.closeOpenPage({path: '/run/own' })});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/28510.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

面向对象初级的内存分布图

1.一个对象的内存图 2.二个对象的内存图 3.二个引用指向同一个对象 4.this的内存布局图 创建了一个Student类的对象s1,因为有new,所有在堆区开辟了一些内存空间,比如把这些内存空间的地址值叫001 形参name是竹小玲, 也就是对象s调用method方法的地址值, this表示方法调用者的地…

怎么不使用springboot Helper或Spring Initializr来创建spring项目

1. 创建项目目录结构 首先,创建项目的基本目录结构。一个典型的 Maven 项目结构如下: my-spring-project ├── src │ ├── main │ │ ├── java │ │ │ └── com │ │ │ └── example │ │ │ └…

前端 CSS 经典:好用的 CSS 选择器

1. focus-within 当前选中元素及当前选中元素的后代元素有没有聚焦。 .focus:focus-within {background: #fff; } 2. has span 的兄弟元素 input 有自定义属性 data-required 的设置样式 .label span:has( input[data-required])::after {content: *,color: red } 3. fir…

Shell 学习笔记 - 导读 + 变量定义

初识 Shell 本章学习目标 了解什么是 Shell了解 Shell 的版本及用途掌握 Shell 变量的用法 导读( 了解 \color{cyan}{了解} 了解) 现在的人们使用的操作系统(Windows、Android、iOS 等)都带有图形化界面,简单直观&…

赶紧收藏!2024 年最常见 20道并发编程面试题(十)

上一篇地址:赶紧收藏!2024 年最常见 20道并发编程面试题(九)-CSDN博客 十九、什么是不可变对象?为什么它们在并发编程中很有用? 不可变对象(Immutable Object)是指一旦创建后&…

网络安全 - DDoS 攻击原理 + 实验

DDoS 攻击 什么是 DDoS 进攻 D D o S \color{cyan}{DDoS} DDoS(Distributed Denial of Service,分布式拒绝服务)攻击是一种通过多个计算机系统同时向目标系统发送大量请求,消耗其资源,使其无法正常服务的攻击方式。DD…

三、树和割集

文章目录 1、树1.1 树的定义1.2 树的性质1.3 极小连通图1.4 树的中心1.5 生成树1.5.1 最小生成树 2、 割点和桥THE END 1、树 1.1 树的定义 \qquad 定义: 一个连通的无圈的图称为树。 \qquad 只有一个顶点的树叫做平凡树。 \qquad 树中度为1的节点称为叶子结点。…

蒙特卡洛估计举例

计算期望 E q ( x 1 ∣ x 0 ) [ log ⁡ p θ ( x 0 ∣ x 1 ) ] \mathbb{E}_{q(x_1|x_0)}[\log p_\theta(x_0|x_1)] Eq(x1​∣x0​)​[logpθ​(x0​∣x1​)] 需要知道分布 q ( x 1 ∣ x 0 ) q(x_1|x_0) q(x1​∣x0​) 和函数 log ⁡ p θ ( x 0 ∣ x 1 ) \log p_\theta(x_0|…

IPNV6

特征——升级点: 1、全球单播地址 ----IPV4地址下的公有地址 V6下没 nat 2、可聚合性 (IANA组织对全球的地址进行合理分配) 3、多宿主——一个物理接口可以同时拥有多个不同网段的IPV6地址;但不同接口不能在同一网段 4、自动配置 1&#xff…

举例说明 如何判断Spark作业的瓶颈

首先看哪个Job执行时间长: 例如下图中明显Job 2时间执行最长,这个对rdd作业是直观有效的。 对于sql作业可能不准确,sql需要关注stage的详情耗时。 然后看执行时间长的Job中哪个stage执行时间长: 明显stage 7和stage 13执行时间长&…

Kafka内外网分流配置listeners和advertised.listeners

问题背景: Kafka部署在内网,内网Java服务会使用Kafka收发消息,另外,Java服务会与其他第三方系统使用kafka实现数据同步,也就是外网也会发送消息到kafka,外网IP做了端口映射到了内网,advertised…

经验分享,如何去除文本中的空格

有时候我们需要去掉一窜文本中的空格,这里分享一个好用的免费网站,可实现在线去除 网址:http://www.txttool.com/t/?idMzM4 使用截图:

CloudFlare 里如何设置参数传递的 301 重定向

自从接到【哈哈,笑死我了都,黔驴技穷了都!】一文里提到的代维客户订单,这两天明月就一直在加班加点的重新部署着客户的四个服务器,因为有三个都是 WordPress+WooCommerce 式的电商平台,很是有些费时费力,好在现在基本都搞定了,剩下的就是些细节方面的优化、调整了。期间…

力扣231. 2 的幂(位运算)

Problem: 231. 2 的幂 文章目录 题目描述思路及解法复杂度Code 题目描述 思路及解法 1.若为0和负数则直接返回false; 2.利用一个标志数mask令其为一,不断的算术左移同时和n做与(&)运算,统计n中二进制位为1的个数&a…

HTTP-代理

HTTP-代理 web代理服务器是网络的中间实体,代理位于客户端和服务器之间,扮演者中间人的角色,在各端点之间来回传递http报文 web的中间实体 web上的代理服务器是代表客户端完成事务处理的中间人,如果没有web代理,htt…

(4)SDL渲染开发

SDL渲染开发 1. SDL简介2. 环境搭建2.1 windows2.2 Linux 3. SDL子系统3.1 eg1 创建窗口 4:SDL显示4.1 显示图片4.2 绘制长方形显示 5. SDL事件6. SDL多线程6.1 接口演示6.2 yuv显示6.3 pcm播放 1. SDL简介 SDL(Simple DirectMedia Layer)是一…

导出excle表

文章目录 导出excle表需求场景引入依赖具体代码 导出excle表 需求场景 假设我们有一个需求,现在数据库中有一些用户信息,我们想要把这些信息导出到excle表格中,然后存储到本地磁盘中。要求:excle表格的第一行需要有黄色背景&…

2024-06-11 Unity Shader 开发入门5 —— CG 语法

文章目录 1 CG 语法基础1.1 CG 结构1.2 数据类型1.2.1 基础数据类型1.2.2 复合数据类型1.2.3 特殊数据类型 1.3 操作符1.3.1 Swizzle 操作符1.3.2 向量/矩阵转换 1.4 运算符1.5 流程控制语句1.6 函数1.6.1 有返回值的函数1.6.2 有返回值的函数 2 顶点/片元着色器2.1 着色器结构…

ClickHouse数据库对比、适用场景与入门指南

本文全面对比了ClickHouse与其他数据库(如StarRocks、HBase、MySQL、Hive、Elasticsearch等)的性能、功能、适用场景,并提供了ClickHouse的教学入门指南,旨在帮助读者选择合适的数据库产品并快速掌握ClickHouse的使用。 文章目录 …

2千泰中英泰语词汇对照含MP3真人读音

越来越多的人到泰国旅游,今天这一份数据就是服务于此,包含了2000条泰语的日常生活词汇,并且每条记录都含有真人发音MP3对应。 有分100个章节,每个章节共有20条记录,非常适合一章节一章节的学习,具体章节有&…