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天前
|
前端开发 JavaScript
前端 js 经典:数组常用方法总结
前端 js 经典:数组常用方法总结
12 0
|
1天前
|
移动开发 JavaScript iOS开发
WKWebView和js互调方法的实现
WKWebView和js互调方法的实现
3 0
|
2天前
|
JavaScript 前端开发
Symbol在JavaScript中还有哪些内置的Symbol可以用于定义特定的方法或属性
Symbol在JavaScript中还有哪些内置的Symbol可以用于定义特定的方法或属性
|
2天前
|
前端开发 JavaScript
前端 JS 经典:数组去重万能方法
前端 JS 经典:数组去重万能方法
7 0
|
2天前
|
前端开发 JavaScript 流计算
前端 js 经典:字符串超全方法总结
前端 js 经典:字符串超全方法总结
11 0
|
4天前
|
前端开发 JavaScript 开发者
JavaScript中的异步编程方法总结
在JavaScript开发中,处理异步操作是非常常见的情况。本文将总结JavaScript中常用的异步编程方法,包括Callback、Promise、Async/Await等,分析其优缺点,并提供使用建议。
|
5天前
|
缓存 前端开发 JavaScript
React和Next.js开发常见的HTTP请求方法
React和Next.js开发常见的HTTP请求方法
9 0
|
5天前
|
前端开发 JavaScript
前端 JS 经典:Math 常用方法汇总
前端 JS 经典:Math 常用方法汇总
10 0
|
5天前
|
前端开发 JavaScript
前端 js 经典:Object 常用原生方法
前端 js 经典:Object 常用原生方法
11 2
|
5天前
|
前端开发 JavaScript
前端 js 经典:array 原生方法
前端 js 经典:array 原生方法
11 1