javascript - JavaScript(Vanilla，没有jQuery)-具有* Async * AJAX(XMLHttpRequest)调用的函数的行为与async相同？

Question

我有一个内容为tst.html的文件:

part two

(无标记或其他任何内容，仅用于演示)

然后通过 同步 AJAX( XMLHttpRequest)加载所述文件:

function someFunc() {
    var str = 'part one_';

    var x = new XMLHttpRequest();
    x.open('GET', 'tst.html', false);    // "false" for synchronous
    x.onreadystatechange = function() {
        if(x.readyState === 4) {
            switch(x.status) {
                case 200:
                    str += x.responseText.trim();
                    break;

                default:
                    return '';   // Or something
                    break;
            }
        }
    }
    x.send();

    str += '_part three';

    return str;
}

调用函数:

alert(someFunc());

// Returns "part one_part two_part three"

这是所需的行为。

但是，如果我将AJAX调用放入其自己的函数中:

function ajaxCall() {
    var x = new XMLHttpRequest();
    x.open('GET', 'tst.html', false);
    x.onreadystatechange = function() {
        if(x.readyState === 4) {
            switch(x.status) {
                case 200:
                    return x.responseText.trim();
                    break;

                default:
                    return '';
                    break;
            }
        }
    }

    x.send();
}

function someFunc() {
    var str = 'part one';

    str += ajaxCall();

    str += 'part three';

    return str;
}

然后调用它:

alert(someFunc());

// Returns "part one_undefined_part three"

该函数在AJAX有机会完成之前返回合并的字符串，这与它的异步表亲相同。

我一直在寻找类似于“同步AJAX功能”的东西，但是没有任何用处。

AJAX调用的最终用例在一组递归函数内部，进一步处理取决于AJAX返回。就像是:

function one(url) {
    var x = new XMLHttpRequest();
    x.open('GET', url, false);
    x.onreadystatechange = function() {
        return two(x.responseText.trim());
    }
    x.send();
}

function two(str) {
    var output;

    output += stuff;

    // ... parse through str
    // ... until match found

    if(isURL(match)) {                     // If `match` is a URL
        output += one(match);
    }else if(isFormattedString(match)) {   // if `match` is a string
        output += two(match);
    }

    output += more stuff;

    // More processing of output    

    return output;
}

var final = one(url);

在上面的示例中:

系统始终使用URL(one(url))来启动

one()返回一个字符串，该字符串本身就是two(str)的开头参数

在two()中，解析器可能会遇到

其他URL或

可解析的字符串。

根据功能的不同，这两个函数之一称为

输出被添加到系统

的最终结果中

来自 one()的回调也不会对此起作用，因为我仍然需要在 return中包含最终的 two()。

function one(url, callback) {
    // ... AJAX stuff
    {
        callback(two(x.responseText));
    }
}

function two(str) {
    // ... same as previous

    // The following doesn't work, because then `two()` no longer has a `return`
    // ... and any other code (i.e. for !isURL cases) will still continue to execute
    if(isURL(match)) {
        one(match, function(result) {
            output += result;

            // ... more processing

            return output;
        });
    }else if(...) {
        // ... same as previous
    }

    // ... more stuffs
}

我发现的唯一的另一件事是 deferred ，但是我不确定它是否可以与此一起工作。

有没有一种方法可以强制JavaScript将其像其他同步函数一样对待，在同步函数中，执行代码将停止直到该函数完成为止？我不清楚为什么还没有，特别是AJAX请求被声明为异步。

提前致谢。

Answer 1

我喜欢您冗长而详细的问题(希望每个人都尽力而为!)，但从本质上讲，可以归结为:

function ajaxCall() {
    var x = new XMLHttpRequest();
    x.open('GET', 'tst.html', false);
    x.onreadystatechange = function() {
        if(x.readyState === 4) {
            switch(x.status) {
                case 200:
                    return x.responseText.trim();
                    break;

                default:
                    return '';
                    break;
            }
        }
    }

    x.send();
}

您的 return语句是 onreadystatechange的返回，而不是您期望的 ajaxCall。它与原始文件的唯一不同之处在于原始文件只是连接字符串。它与将其移至其自己的功能无关。

不要使用同步ajax!了解异步函数如何工作，尤其是 How do I return the response from an asynchronous call?