jquery 我如何从多 AJAX 请求的函数中返回正确的值?[副本]

f3temu5u  于 2023-06-22  发布在  jQuery
关注(0)|答案(3)|浏览(126)

此问题已在此处有答案

How do I return the response from an asynchronous call?(42答案)
14天前关闭
我有一个函数,它有嵌套的两 AJAX 调用。我想在第二 AJAX 调用成功时返回一个值。我想是因为函数结束了,但是ajaxs调用还没有结束。但我没有解决它。
我准备了一个示例代码如下:

var patato = function(){
            $.ajax({
                type: 'POST',
                url: 'https://jsonplaceholder.typicode.com/posts',
                dataType: 'json',
                data: {
                    title: 'foo',
                    body: 'bar',
                    userId: 1,
                },
                success:function(res){
                    console.log("Work 1")
                    $.ajax({
                        type: 'POST',
                        url: 'https://jsonplaceholder.typicode.com/posts',
                        dataType: 'json',
                        data: {
                            title: 'foo',
                            body: 'bar',
                            userId: 1,
                        },
                        success:function(res){
                            console.log("Work 2")
                            return true;
                        }
                    })
                }
            })
            console.log("Çalıştı 3")
        }
        var patatos = patato();
        if(patatos) {
            console.log("Patato true")
        }else{
            console.log("Patato false")
        }
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
7nbnzgx9

7nbnzgx91#

你的函数应该返回一个promise,因为你正在做一些异步工作(获取)。
另外,我强烈建议使用async/await来简化逻辑并提高可读性/可维护性:

async function patato() {

    console.log("Çalıştı 3")

    const res = await $.ajax({
        type: 'POST',
        url: 'https://jsonplaceholder.typicode.com/posts',
        dataType: 'json',
        data: {
            title: 'foo',
            body: 'bar',
            userId: 1,
        }
    });

    console.log("Work 1")

    //use res if needed...

    const res2 = await $.ajax({
        type: 'POST',
        url: 'https://jsonplaceholder.typicode.com/posts',
        dataType: 'json',
        data: {
            title: 'foo',
            body: 'bar',
            userId: 1,
        },
    });

    console.log("Work 2")

    //use res2 if needed...

    return true;

}

patato().then(patato => console.log(`Patato ${patato}`));
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
vmdwslir

vmdwslir2#

如果第二个作业不需要第一个作业的输出,也可以并行运行两个 AJAX 作业:

async function patato() {

    console.log("Çalıştı 3")
    await $.when( $.ajax({type:'POST',url: 'https://jsonplaceholder.typicode.com/posts',
                         dataType:'json',data: {title: 'foo1',body: 'bar1',userId: 1}}),
                  $.ajax({type: 'POST',url: 'https://jsonplaceholder.typicode.com/posts',
                         dataType:'json',data: {title: 'foo2',body: 'bar2',userId: 2}})
    ).done(function([r1],[r2]){console.log("Both AJAX jobs are finished.",r1,r2)})
    console.log("End of patato.");
    return true;
}

patato().then(pa => console.log(`Patato returns ${pa}`));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
v09wglhw

v09wglhw3#

我想提的第一件事是,如果第二个请求不需要第一个请求的响应,那么顺序请求就没有多大意义了。在这一点上,我假设您有一个用例,需要一个接一个地执行两个API调用。
这里有两个选项:使用回调或async/await语法。在这里,你可以找到一个很好的例子来说明这两种用法:How to return an Ajax result using async/await?
对于您的特定示例,以下是您如何使用回调来执行此操作:

const patato = function(){
            return $.ajax({
                type: 'POST',
                url: 'https://jsonplaceholder.typicode.com/posts',
                dataType: 'json',
                data: {
                    title: 'foo',
                    body: 'bar',
                    userId: 1,
                }
            }).then(function(res1){ 
                console.log("Work 1")
                    return $.ajax({
                        type: 'POST',
                        url: 'https://jsonplaceholder.typicode.com/posts',
                        dataType: 'json',
                        data: {
                            title: 'foo',
                            body: 'bar',
                            userId: 1,
                        }
                    }).then(function(res2){
                        console.log("Work 2")
                        return res1 && res2;
                    })
            })
        }
        patato().then(patatos => {
          if(patatos) {
              console.log(patatos)
          }else {
              console.log("Patato false")
          }
        })
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>

或者你也可以使用async/await语法(在我看来,这比回调语法更容易理解):

const patato = async function(){
            console.log("Work 1");
            const res1 = await $.ajax({
                type: 'POST',
                url: 'https://jsonplaceholder.typicode.com/posts',
                dataType: 'json',
                data: {
                    title: 'foo',
                    body: 'bar',
                    userId: 1,
                }
            });

            console.log("Work 2");
            const res2 = await $.ajax({
                type: 'POST',
                url: 'https://jsonplaceholder.typicode.com/posts',
                dataType: 'json',
                data: {
                    title: 'foo',
                    body: 'bar',
                    userId: 1,
                }
            });
            return res1 && res2;

        }
        async function test() {
            let result = await patato();
            console.log(result);
        }
        test();
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>

相关问题