返回由具有模块模式函数的 XMLHttpRequest 解析的数据

Question

我在组合 javascript 回调和显示模块模式时遇到问题。我想要做的是 return 使用 carsData.getCars() 函数方法的 HTTP 响应文本。

基本上我想做的是：

return 从 xhr.onreadystatechange 函数到私有 getData 函数的数据
return 从 getData 函数到 public getCars 函数的数据（或者调用 getCars 函数 return 一个值)

我让它在同步 AJAX 模式下工作，但我知道这不是 javascript 开发中的最佳实践。

我试图让它与回调一起工作，但失败得很惨。甚至可以在 javascript 中完成吗？

P.S。为了学习目的，我在 Vanilla JS 中使用 XMLHttpRequest 而不是其他框架。

'use strict';
var carsData = (function() {
    var carsElement = document.getElementById('carsListing'),
        successHandler = function(data) {
            carsElement.innerHTML = data.data;
            //return data;
        },
        dataWrapper = "",
        getData = function(callback) {
            var url = 'data/cars.json',
                xhr = new XMLHttpRequest();    

            xhr.onreadystatechange = function() {
                var status;
                var data;

                if (xhr.readyState == 4) { // `DONE`
                    status = xhr.status;
                    if (status == 200) {
                        data = JSON.parse(xhr.responseText);
                        successHandler && successHandler(data);
                        callback(data);
                        return data;
                    }
                }
            };
            xhr.open('get', url, false); // synchronous js
            xhr.send();
            return xhr.onreadystatechange();
            //return 'xx';
        }

    return {
        getCars: function() {
            return getData(function(data){
              console.log(data); // Object {data: Array[5]}
            })
        }

    }
})();

Answer 1

没有。你不能这样做。我发现这就是为什么您通常会看到发送到 DOM 对象的结果。因为他们在那里等待答案。您的 return 声明，尽管看起来有悖常理（假设您来自非原型语言），但已经运行。似乎不会，但由于您知道的异步性质，它确实如此。您必须使用 Promises，或者您必须让回调对回调数据 "waiting" 做一些事情，就像您对 successdata.

所做的那样

返回由具有模块模式函数的 XMLHttpRequest 解析的数据

Returning data resolved by XMLHttpRequest with module pattern function

javascript

ajax

callback

revealing-module-pattern