javascript - xhr.onload的传递结果

Question

这应该是一个非常简单的概念，但我就是不明白。在 Titanium 应用程序中，我有一个由多个窗口使用的数据数组，我的 xhr 结果需要传递到应用程序命名空间的顶层才能添加到数组中。我可以成功解析 onload 函数内的 JSON 响应，但我想将数据代码与 UI 生成分开。

这是一个简化的 app.js 版本，以便我能够理解这个概念。不，我不会污染我的真实应用程序中的全局命名空间。

Titanium.UI.setBackgroundColor('#000');
var myArray = [];
var xhr = Titanium.Network.createHTTPClient();
xhr.onload = function() {
    myArray = JSON.parse(this.responseText);
    // var data = JSON.parse(this.responseText); // no help
    // myArray.push(data); // no help
    // return myArray; // no help
};
xhr.onerror = function() {
    Titanium.UI.createAlertDialog({ message:"Something has gone terrible wrong."});
};
xhr.open('GET','http://myapp.com/data.json');
xhr.send();
var win = Ti.UI.createWindow();
var view = Titanium.UI.createView({
    backgroundColor:'green'
});
var caption = myArray[2].caption;
var label = Ti.UI.createLabel({
    color:'white',
    text:caption,
    textAlign:'center'
});
view.add(label); 
win.add(view);
win.open();

感谢您的耐心等待!

编辑

从用户的 Angular 来看，这会产生正确的结果，但我想访问 onload 函数范围之外的数组。我不想将 UI 代码与 API 调用混合在一起。

xhr.onload = function() {
    myArray = JSON.parse(this.responseText);
    var caption = myArray[2].caption;
    var label = Ti.UI.createLabel({
        color:'white',
        text:caption,
        textAlign:'center'
    });
    view.add(label); 
};

Answer 1

代码正在异步运行。该标签正在尝试在 xhr.onload 开始之前生成。

您应该从代码的 onload 方法触发一个事件。

该事件将在应用程序的 UI 部分有一个监听器，它将提供 http 代码与 UI 代码的适当分离；像这样的事情

xhr.onload = function() {
    myArray = Ti.App.fireEvent("app.updateLabel",
                      {"responseText":this.responseText});
};

在您的用户界面中，查看代码

Ti.App.addEventListener("app.updateLabel",function(data) {
    myArray = JSON.parse(data.responseText);
    var caption = myArray[2].caption;
    var label = Ti.UI.createLabel({
        color:'white',
        text:caption,
        textAlign:'center'
    });
    view.add(label); 
});

有关 appcelerator documentation 的事件的更多信息

我有一些关于 my blog, 的例子http://blog.clearlyinnovative.com ，还有