javascript - 如何在第二个ajax调用之外获取值

标签 javascript ajax asynchronous

我有两个 API 调用:

  1. 第一次 API 调用获取 ISBN 列表。

  2. 第二个 API 调用从第一步中的 ISBN 列表中获取每个 ISBN 的信息。

第 1 步中的列表可能包含 50 个 ISBN,但在第 2 步中检查每个 ISBN 的信息时,如果缺少某些信息,我不想显示或计算该 ISBN。

我的最终目标是计算我拥有的 ISBN 总数和完整信息,但由于 Ajax 是异步的,我无法检索此信息。

let request = new XMLHttpRequest();
request.open("GET",requestHTML,true)
request.send();

request.onload = parseXML;

function parseXML(){
    const xmlText = request.responseText;
    const parser = new DOMParser();
    const xmlDoc = parser.parseFromString(xmlText,"text/xml");

    var isbns = xmlDoc.getElementsByTagName("isbn");

    let counter = 0;
    for(isbn of isbns){
        let isbnString = isbn.textContent;
        let isbnURL = `https://openlibrary.org/api/books?jscmd=data&format=json&bibkeys=ISBN:${isbnString}`;
        $.ajax({            
            type: 'GET',
            url: isbnURL,
            dataType: 'json',
            success: function(result){
                    ...
                    if(hasAllInfo){
                        $("#content_container").append(`<div class="book_container" id="${bookid}">`);
                        ...
                    }
                        counter ++;
            },
            error: function(){
                console.log('ERROR');
            }
        })
    }
}
console.log("Total books found with all information:" + counter);

我希望最后一行显示找到的 ISBN 总数,其中包含所有信息,但我得到的是 0

最佳答案

非常接近,您只需将 console.log 拉入您要递增计数器的步骤即可。

let request = new XMLHttpRequest();
request.open("GET",requestHTML,true)
request.send();

request.onload = parseXML;

function parseXML(){
    const xmlText = request.responseText;
    const parser = new DOMParser();
    const xmlDoc = parser.parseFromString(xmlText,"text/xml");

    var isbns = xmlDoc.getElementsByTagName("isbn");

    let counter = 0;
    for(isbn of isbns){
        let isbnString = isbn.textContent;
        let isbnURL = `https://openlibrary.org/api/books?jscmd=data&format=json&bibkeys=ISBN:${isbnString}`;
        $.ajax({            
            type: 'GET',
            url: isbnURL,
            dataType: 'json',
            success: function(result){
                    ...
                    if(hasAllInfo){
                        $("#content_container").append(`<div class="book_container" id="${bookid}">`);
                        ...
                    }
                    // changes here
                    if(++counter === isbns.length){
                      console.log("Total books found with all information:" + counter);
                    }
            },
            error: function(){
                console.log('ERROR');
            }
        })
    }
}

关于javascript - 如何在第二个ajax调用之外获取值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57262865/

相关文章:

c# - 部分 View 刷新后保存数据的 jQuery 对话框

javascript - 将格式不正确的 XML 文档转置为 HTML 无序列表

javascript - Node.js 异步请求超时?

javascript - 如何运行依赖于第一个 api 中设置的变量的 api?

javascript - 包含的功能同步运行

javascript - jquery 在鼠标悬停时淡入淡出

javascript - onclick自动弹窗代码

javascript - 使用 jQuery 和 Ajax 发送输入数组

javascript - 我如何在 Firebase Angularjs 中使用 $id 作为数字或新变量?

javascript - 设置全局变量但未得到预期结果