JS中一个方法同时发送两个ajax请求出现报错问题的解决方法

简介: JS中一个方法同时发送两个ajax请求出现报错问题的解决方法

目录

1、背景介绍

2、分析原因

3、解决办法


1、背景介绍


在实现前端显示后端数据时遇到这样一个问题:在js同一个方法中调用2个ajax,其中ajax1与ajax2之间没有联系,但是为了看效果需要同时请求数据显示,运行程序却报错,如下图ajax1是蓝色的线,路径规划;ajax2是红色的点,起止点附近的节点。

1.png

两个请求独立封装的,为了显示同时按串行请求2个ajax时,出现报错的信息如下:


1、前端页面未响应且控制台报错


已阻止跨源请求:同源策略禁止读取位于url1的远程资源。(原因:CORS请求失败)


已阻止跨源请求:同源策略禁止读取位于url2的远程资源。(原因:CORS请求失败)。


2、IDEA后台崩溃,错误信息


#

# A fatal error has been detected by the Java Runtime Environment:

#

#  SIGSEGV (0xb) at pc=0x00007f84985ce34a, pid=109590, tid=0x00007f84447d3700

#

# JRE version: Java(TM) SE Runtime Environment (8.0_221-b11) (build 1.8.0_221-b11)

# Java VM: Java HotSpot(TM) 64-Bit Server VM (25.221-b11 mixed mode linux-amd64 compressed oops)

# Problematic frame:

# C  [libc.so.6+0x7f34a]  fread+0x1a

#

# Failed to write core dump. Core dumps have been disabled. To enable core dumping, try "ulimit -c unlimited" before starting Java again

#

# An error report file with more information is saved as:

# /home/demo/hs_err_pid109590.log

#

# If you would like to submit a bug report, please visit:

#   Crash Report

# The crash happened outside the Java Virtual Machine in native code.

# See problematic frame for where to report the bug.

#


2、分析原因


从异步请求的执行原理来看,我们知道当一个异步请求发送时,浏览器不会处于锁死、等待的状态,从一个异步请求发送到获取响应结果的期间,浏览器还可以进行其它的操作。这就意味着多个异步请求的执行是并行的。


两个ajax异步请求冲突,因为异步问题在调用两个ajax异步时,其实相当于同时发送两个请求。执行的快与慢,就要看响应的数据量的大小及后台逻辑的复杂程度。


3、解决办法


当然针对这个问题而言还有很多解决办法,这里提供三种解决方案:


(1)Ajax2()方法的执行放到Ajax1()的success回调函数的最后一行。【由于两者没有联系该方法能够达到要求,但是逻辑上不对】


(2)Ajax1()的异步请求方法中,增加一个回调函数 :complete : Ajax2。【可尝试】


(3)把Ajax1()的异步设为同步:async : false。【本人采用的解决方法,的确解决了问题】


参考:https://blog.csdn.net/qq_34059693/article/details/83413559

目录
相关文章
|
2月前
|
Web App开发 存储 数据处理
Chrome 下载大文件报错!用 Streamsaver.js 完美填坑
本文探讨了Chrome下载大文件报“网络错误”的原因及解决方案。由于Chrome对Blob数据有大小限制,导致大文件下载失败。通过将responseType改为ArrayBuffer可临时解决1-2G文件问题,但超3G仍会崩溃。最佳方案是使用Streamsaver.js实现流式下载,边接收边保存,避免内存溢出,完美支持超大文件下载。
732 3
|
3月前
|
JavaScript 前端开发 开发者
Nest.js控制器深度解析:路由与请求处理的高级特性
以上就是对 NestJS 控制层高级特性深度解析:从基本概念到异步支持再到更复杂场景下拦截其与管道等功能性组件运用都有所涉及,希望能够帮助开发者更好地理解和运用 NestJS 进行高效开发工作。
349 15
|
6月前
|
JavaScript 前端开发 API
Node.js中发起HTTP请求的五种方式
以上五种方式,尽管只是冰山一角,但已经足以让编写Node.js HTTP请求的你,在连接世界的舞台上演奏出华丽的乐章。从原生的 `http`到现代的 `fetch`,每种方式都有独特的风格和表现力,让你的代码随着项目的节奏自由地舞动。
662 65
|
9月前
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
9月前
|
缓存 JavaScript 前端开发
mapbox没有token/token失效,地图闪烁后变空白,报错Error: A valid Mapbox access token is required to use Mapbox GL JS.
本博客介绍了mapbox如何去除token验证,暴力破解mapbox的token验证机制。一劳永逸解决mapbox地图闪现一下然后变成空白,报错Error: A valid Mapbox access token is required to use Mapbox GL JS.的方法,还介绍了类似问题的具体解决思路。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
缓存 JavaScript 中间件
优化Express.js应用程序性能:缓存策略、请求压缩和路由匹配
在开发Express.js应用时,采用合理的缓存策略、请求压缩及优化路由匹配可大幅提升性能。本文介绍如何利用`express.static`实现缓存、`compression`中间件压缩响应数据,并通过精确匹配、模块化路由及参数化路由提高路由处理效率,从而打造高效应用。
537 90
|
JavaScript
Node.js GET/POST请求
10月更文挑战第6天
184 2
Node.js GET/POST请求
|
JavaScript 前端开发 开发工具
【Azure Developer】使用JavaScript通过SDK进行monitor-query的client认证报错问题
AADSTS90002: Tenant 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' not found. Check to make sure you have the correct tenant ID and are signing into the correct cloud. Check with your subscription administrator, this may happen if there are no active subscriptions for the tenant.
127 1
|
缓存 JavaScript CDN
一次js请求一般情况下有哪些地方会有缓存处理?
一次js请求一般情况下有哪些地方会有缓存处理?
168 4
|
移动开发 前端开发 JavaScript
js之ajax |12-6
js之ajax |12-6