当前位置: 首页 > news >正文

前端发起请求,后端模型需处理很久,怎样设置前端直接完成请求响应,后端计算完在返回结果给前端?

在这种情况下,可以采用异步处理的方式来解决。具体步骤如下:

  1. 前端发起请求:前端向后端发送请求,但是不等待后端处理完成而是立即得到响应。

  2. 后端异步处理:后端接收到请求后,不立即进行处理,而是将请求放入队列中等待处理。然后,后端使用异步任务(如异步函数、线程、进程等)来处理这些请求。

  3. 处理完成后响应:当后端处理完请求后,再将结果返回给前端。这可以通过后端将处理结果存储在某个地方(如数据库、缓存等)中,然后前端再次发起请求来获取结果

前端Vue、后端Java为例: 

在这种情况下,你可以使用异步处理来解决这个问题。具体而言,你可以在后端使用异步任务来处理长时间运行的任务,而前端则可以通过轮询或者长连接等方式来获取处理结果。下面是一个基本的实现示例:

Java

1.Java_Controller

import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;@RestController
public class RequestController {@PostMapping("/request")public String handleRequest(@RequestBody RequestData requestData) {// 异步处理请求,并立即返回响应asyncProcessRequest(requestData);return "Request received and is being processed.";}// 异步处理请求的方法private void asyncProcessRequest(RequestData requestData) {// 这里使用异步任务来处理请求AsyncTask asyncTask = new AsyncTask(requestData);new Thread(asyncTask).start();}
}

2.异步任务类:实现具体的异步处理逻辑。

public class AsyncTask implements Runnable {private final RequestData requestData;public AsyncTask(RequestData requestData) {this.requestData = requestData;}@Overridepublic void run() {// 长时间运行的处理逻辑// 这里可以是调用后端模型的处理过程// 处理完成后,将结果存储在某个地方,如数据库或缓存中}
}

前端(Vue.js)

Vue组件:在Vue组件中发起请求,并使用轮询或者长连接等方式获取处理结果。

<template><div><button @click="handleRequest">发起请求</button><p>{{ responseMessage }}</p></div>
</template><script>
export default {data() {return {responseMessage: ''}},methods: {handleRequest() {fetch('/request', {method: 'POST',headers: {'Content-Type': 'application/json',},body: JSON.stringify({ /* 请求数据 */ }),}).then(response => response.text()).then(data => {this.responseMessage = data;// 轮询或者使用长连接等方式获取处理结果this.pollForResult();}).catch(error => {console.error('发生错误:', error);});},pollForResult() {// 轮询或者使用长连接等方式获取处理结果// 这里使用setTimeout模拟轮询setTimeout(() => {fetch('/result') // 假设后端提供了获取处理结果的接口.then(response => response.json()).then(data => {// 处理后端返回的处理结果console.log('处理结果:', data);}).catch(error => {console.error('获取结果时发生错误:', error);}).finally(() => {// 继续轮询this.pollForResult();});}, 5000); // 5秒轮询一次}}
}
</script>

总结:后端使用Java Spring Boot框架来处理请求,并使用异步任务来处理长时间运行的任务。前端使用Vue.js来发起请求,并使用轮询方式来获取处理结果。需要注意的是,轮询方式可能会增加服务器的负载,你可以根据具体情况来选择最适合的方式。

(chatgpt提供的思路)

相关文章:

  • js【详解】event loop(事件循环/事件轮询)
  • 智能电视(如小米电视)安装应用(当贝市场、浏览器)、去开机广告
  • 数据库讲解(MySQL版)(超详细)【第一章】
  • 应用内存分析
  • STM32 | 零基础 STM32 第一天
  • Dubbo基础入门二
  • 功能测试+自动化测试代码覆盖率统计
  • C#,煎饼排序问题(Pancake Sorting Problem)算法与源代码
  • #QT(串口助手-界面)
  • 多线程环境中使用UdpClient,适当的同步机制
  • php-webdriver 通过队列的方式实现工作流
  • 刷题第11天
  • 985硕的4家大厂实习与校招经历专题分享(part2)
  • 测试常用的Linux命令
  • 中医把脉笔记
  • 【391天】每日项目总结系列128(2018.03.03)
  • 【译】理解JavaScript:new 关键字
  • 【跃迁之路】【519天】程序员高效学习方法论探索系列(实验阶段276-2018.07.09)...
  • 2019年如何成为全栈工程师?
  • emacs初体验
  • go语言学习初探(一)
  • maya建模与骨骼动画快速实现人工鱼
  • miaov-React 最佳入门
  • RedisSerializer之JdkSerializationRedisSerializer分析
  • supervisor 永不挂掉的进程 安装以及使用
  • SwizzleMethod 黑魔法
  • Vim Clutch | 面向脚踏板编程……
  • vue数据传递--我有特殊的实现技巧
  • 给新手的新浪微博 SDK 集成教程【一】
  • 互联网大裁员:Java程序员失工作,焉知不能进ali?
  • 记一次删除Git记录中的大文件的过程
  • 排序算法学习笔记
  • 前端相关框架总和
  • 强力优化Rancher k8s中国区的使用体验
  • 通过来模仿稀土掘金个人页面的布局来学习使用CoordinatorLayout
  • 微信小程序:实现悬浮返回和分享按钮
  • 异步
  • #QT(TCP网络编程-服务端)
  • #常见电池型号介绍 常见电池尺寸是多少【详解】
  • $refs 、$nextTic、动态组件、name的使用
  • (1)(1.9) MSP (version 4.2)
  • (173)FPGA约束:单周期时序分析或默认时序分析
  • (Ruby)Ubuntu12.04安装Rails环境
  • (二)【Jmeter】专栏实战项目靶场drupal部署
  • (附源码)spring boot基于小程序酒店疫情系统 毕业设计 091931
  • (附源码)计算机毕业设计ssm基于Internet快递柜管理系统
  • (附源码)小程序儿童艺术培训机构教育管理小程序 毕业设计 201740
  • (三) diretfbrc详解
  • (四)Tiki-taka算法(TTA)求解无人机三维路径规划研究(MATLAB)
  • (四)模仿学习-完成后台管理页面查询
  • *2 echo、printf、mkdir命令的应用
  • .a文件和.so文件
  • .gitignore文件—git忽略文件
  • .MSSQLSERVER 导入导出 命令集--堪称经典,值得借鉴!
  • .NET DataGridView数据绑定说明