返回带有模块模式功能的XMLHttpRequest解析的数据 [英] Returning data resolved by XMLHttpRequest with module pattern function

问题描述

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

I have problem combining javascript callbacks and revealing module pattern. What I'm trying to do is to return the HTTP response text with the carsData.getCars() function method.

基本上我想做的是:

1. 将数据从xhr.onreadystatechange函数返回到私有getData函数
2. 将数据从getData函数返回到公共getCars函数(或调用getCars函数返回值)

1. return the data from xhr.onreadystatechange function to the private getData function
2. return the data from getData function to the public getCars function ( or call the getCars function returning a value)

我知道它可以与同步AJAX模式一起使用，但是我知道这不是JavaScript开发中的最佳实践.

I got it to work with the synchronous AJAX mode, but I'm aware it's not the best practice in javascript development.

我试图使其与回调一起使用，但失败了. 甚至可以用javascript做吗?

I tried to get it to work with callbacks but failed miserably. Is it even posible to do in javascript?

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

P.S. I use XMLHttpRequest in Vanilla JS instead of other frameworks for learning purposes.

'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]}
            })
        }

    }
})();

推荐答案

否.您无法以这种方式这样做.我发现这就是为什么您通常会看到将结果发送到DOM对象的原因.因为他们在那里等待答案.您的return语句似乎已经违反了直觉(假设您来自非原型语言)，这似乎已经违反了直觉.似乎不会，但是由于您所了解的异步特性而具有.您必须使用Promises，或者必须像使用successdata一样使回调对正在等待"回调数据的数据执行某些操作.

No. You cannot do it this way. I figured out that is why you typically see results sent to a DOM object. Because they are there waiting for the answer. Your return statement, as counter-intuitive as it seems (assuming you are coming from non-prototype languages), will have already run. It seems like it wouldn't but it has because of the async nature you are aware of. You have to use Promises or you have to have your callback doing something with the data that is "waiting" for the callback data like you did with successdata.

这篇关于返回带有模块模式功能的XMLHttpRequest解析的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！