在Vue中,你可以使用JavaScript的Promise
和setTimeout
来实现这个需求。这里是一个基本的实现思路:
- 创建一个Promise,该Promise内部发起你的API请求(假设你使用的是
axios
)。 - 同时设置一个
setTimeout
来在2分钟后执行一个操作(比如路由跳转)。 - 如果API请求在2分钟内完成,你需要清除
setTimeout
设置的定时器,并处理请求的响应。 - 如果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' }) });