Question

我有四个功能可以处理我的应用程序的某个部分以获取照片网址。

在函数handleGetPhotoResponse中，警报中包含我的网址，一切看起来都应该如此。

问题出在函数handleGetUsersFurKidsResponse中。变量“fkimg”未定义。谁能告诉我哪里出错了？

要使用应用程序的这一部分，我会调用“getUsersFurKids”。

function handleGetPhotoResponse(responseText, size) {
    var photoDetails = JSON.parse(responseText);
    var thePhoto = photoDetails[size];
    alert(thePhoto);
    return thePhoto;
}

function getPhoto(id, size) {
    var url = "url-removed"+id;
    var request = new XMLHttpRequest();
    //Send the proper header information along with the request
    request.open("GET", url);
    request.onload = function() {
        if (request.status == 200) {
            return handleGetPhotoResponse(request.responseText, size);
        }
    };
    request.send(null);
}

// function to handle the response of getting a users fur kids
function handleGetUsersFurKidsResponse(responseText) {
    var ul = document.getElementById("furKidList");
    var furKids = JSON.parse(responseText);
    for(var i = 0; i<furKids.length; i++){
        var li = document.createElement("li");
        var fkimg = getPhoto(furKids[i].ui_id, 'small');
        li.innerHTML = "<a href=\"\"><img src=\""+fkimg+"\"> "+furKids[i].p_name;
        ul.appendChild(li);
    }
}

// function to get a users fur kids
function getUsersFurKids(id) {
    // api url for getting fur kids
    var url = "url-removed"+id;
    var request = new XMLHttpRequest();
    //Send the proper header information along with the request
    request.open("GET", url);
    request.onload = function() {
        if (request.status == 200) {
            handleGetUsersFurKidsResponse(request.responseText);
        }
    };
    request.send(null);
}

Answer 1

         // receive a callback---v
function getPhoto(furKid, size, callback) {
         //         ^---and the current furKid

        // use the ui_id------------v
    var url = "url-removed" + furKid.ui_id;
    var request = new XMLHttpRequest();

    request.open("GET", url);
    request.onload = function() {
        if (request.status == 200) {

         // Invoke the callback, and pass it the result of handleGetPhotoResponse
            callback(handleGetPhotoResponse(request.responseText, size), furKid.p_name);
                     // use the p_name-----------------------------------------^
        }
    };
    request.send(null);
}

function handleGetUsersFurKidsResponse(responseText) {
    var ul = document.getElementById("furKidList");
    var furKids = JSON.parse(responseText);
    for(var i = 0; i<furKids.length; i++){

            // pass a callback-----------------v
        getPhoto(furKids[i], 'small', function(fkimg, p_name) {
            var li = document.createElement("li");
            li.innerHTML = "<a href=\"\"><img src=\""+fkimg+"\"> "+ p_name;
            ul.appendChild(li);
        });
    }
}

Answer 2

您似乎并不了解getPhotos是一个异步函数。其中的onload处理程序在getPhoto函数本身返回并完成后很长一段时间被调用。因此，您无法从onload中检索到的getPhoto返回值。

相反，您必须将所有需要使用来自getPhoto的onload响应的代码放在onload处理程序本身内部（或从onload处理程序内部调用），因为只有在调用onload处理程序时才知道该数据。

这是异步编程在javsacript中的工作方式。

向getPhoto添加回调并从onload处理程序内部调用该回调，并将其从异步调用中获取的img传递给它。那么，只有这样，你才能使用那个img数据。

Javascript函数返回undefined

2 个答案: