原生JS 解决ajax return返回undefined问题思路

待我称王封你为后i 2023-06-07 05:35 11阅读 0赞

事件原因：

在整合前端逻辑的时候，发现很多js都写了ajax的请求，由于都是走的json，所以基本格式几乎是一致的，所以想把所有需要调用ajax请求的js文件同一调用一个封装好的ajax请求函数，统一请求接口；

产生问题：

由于很多方法都在调用ajax，数据的处理基本都是根据ajax响应数据写的独立的方法，所以需要得到ajax的返回数据，由于把ajax请求统一了，因此功能处理函数需要得到ajax的数据，这里就需要一个从ajax 的return数据

问题：

如果直接在ajax里面return，会得到undefined未定的的数据包

想要得到返回数据包并return出来的方向：

1、在ajax方法中定义一个array，然后把数据push到array中，return array就能得到数据

2、把ajas的open()中的true改为false，让ajax的异步请求改为同步请求，然后就能直接return数据了

3、采用回调函数，把ajax方法封装一个函数入口，然后把处理函数直接放进去

而我使用的则是回调函数方法，原因是：第一种，数据形式可能会被破坏，本来的json变成了list，第二种取消了异步，对于等待较长的函数性能影响较大，第三种保留异步的形式，同时直接把数据处理函数放进去，性能影响最小，数据格式没变；

未测试部分：由于没有用到回调函数是否需要返回值的功能，未测试回调函数是否要return；

回调函数用法：

function a(){
    处理函数
    }
    
    function ajax(indata1,indata2){
    ajax封装函数:
    indata2();
    }
    
    
    使用：
    ajax(url,a);

这最后ajax（url,a）这里就是使用ajax的回调函数；这样实际上的形式是：

function ajax(){
    url;
    function a(){
    处理函数
    };
    }

注意点，再调用回调函数的时候，ajax(url,a)不要写成ajax(url,a());否则会报错undefined；

为什么ajax直接return会报错undefined？

主要是js的执行计划和一般的后台变成语言不太一样，java python等后端语言执行顺序都是严格按照代码顺序执行的，而js为了保障浏览器的高性能，会对函数进行异步执行，简单的说来就是js能明确高性能执行的函数会顺序执行，比如for，if等，对于有延时函数等一些异步的函数，会同时执行该函数后面的代码，由于ajax请求是异步的，所以再return ajax的时候，还未得到数据就返回了ajax，这时候就会得到undefined的返回值；

发表评论取消回复

表情：

评论列表（有 0 条评论，11人围观）

还没有评论，来说两句吧...

相关阅读

相关原生js实现Ajax

一般来说，大家可能都会习惯用JQuery提供的Ajax方法，但是用原生的js怎么去实现Ajax方法呢？ JQuery提供的Ajax方法： $.ajax({

╰+哭是因爲堅強的太久メ/ 2023年10月18日 10:17/ 0 赞/ 151 阅读

相关原生JS 解决ajax return返回undefined问题思路

事件原因：在整合前端逻辑的时候，发现很多js都写了ajax的请求，由于都是走的json，所以基本格式几乎是一致的，所以想把所有需要调用ajax请求的js文件同一调用一个封装

待我称王封你为后i/ 2023年06月07日 05:35/ 0 赞/ 12 阅读

相关 ajax原生js写法

[参考][Link 1] 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

柔光的暖阳◎/ 2022年09月21日 11:43/ 0 赞/ 227 阅读

相关原生ajax POST,解决Undefined index

原生ajax ,POST请求： var xhr=new XMLHttpRequest(); xhr.open('POST','test.php',tr

我会带着你远行/ 2022年07月13日 07:07/ 0 赞/ 157 阅读

相关 ajax val.返回值都是undefined

先看js代码 ![这里写图片描述][70] 百度了很多，发现问题并不在参数，也不需要设置异步禁止：async: false，查看了一下网页源代码，返现了问题所在

系统管理员/ 2022年05月17日 11:37/ 0 赞/ 221 阅读

相关原生JS Ajax请求

传统方法的缺点: 传统的web交互是用户触发一个http请求服务器,然后服务器收到之后,在做出响应到用户,并且返回一个新的页面,每当服务器处理客户端提交的请求时,客户都只能

ゝ一纸荒年。/ 2022年05月11日 09:20/ 0 赞/ 317 阅读

相关 ajax请求成功，但是return的参数为undefined

如何解决ajax请求成功，但是返回的参数是undefined ajax一般是异步请求，即使写了return返回需要的参数，异步请求还没有及时成功，就return了这就造成了

野性酷女/ 2021年12月15日 19:34/ 0 赞/ 840 阅读

相关原生JS实现Ajax

> 前言 > > 这篇文章将给大家详细介绍一下，与JQuery对照用原生的js怎么去实现Ajax。 <table style="border:0px so

迷南。/ 2021年09月29日 08:02/ 0 赞/ 453 阅读

相关原生js 封装ajax

这是自己封装的ajax ，分享一下：直接上代码文件夹 ![70][] index.html ![70 1][] ![70 2][]

不念不忘少年蓝@/ 2021年09月15日 07:50/ 0 赞/ 500 阅读

相关原生js实现ajax

Ajax的原理：简单来说就是通过XmlHttpRequest对象向服务器发异步请求，从服务器获得数据，然后用 javascript 来操作DOM更新页面的技术。一般来

短命女/ 2021年08月13日 20:32/ 0 赞/ 508 阅读