如何从打字稿中的回调函数中获取数据

时间:2015-12-29 13:10:09

标签: typescript

我想从回调函数中获取xml数据,并将数据发送到Xml Data Class中的另一个函数。 我在哪里必须返回要在回调函数之外使用的数据?

该类负责读取XML文件
export class XmlData 
{
    private path: string;

    constructor(path: string) {
        this.path = path;
    }

    public getXml(callback: Function): void {

        var request = new XMLHttpRequest();
        request.onreadystatechange = function () {
            if ((request.readyState == 4) && (request.status < 400)) {
                callback(request.responseXML);
            }
        };
        request.open("GET", this.path, true);
        request.send();
    }

    public callbackData(data: XmlDocument): void {
        var xml = new XmlDocument(data);
        var xmlData: Element = xml.documentElement;
    }

    public reloadXml() {
        this.getXml(this.callbackData);
    }
}
 这是主app类调用XmlData类
/// <reference path="XmlData.ts" />    
class App {

    private xmldata :XmlData;
    constructor() {
        this.xmldata = new XmlData("xml.xml");       
    }
    dosome(): void {
        this.xmldata.reloadXml();
    }
}

2 个答案:

答案 0 :(得分:0)

我认为应该是这样的

export class XmlData 
{
    private path: string;
    private xmlData: Element; //xml data on class level
    private listeners: Function[] = [];//array of poreccess listeners

    constructor(path: string) {
        this.path = path;
    }

    public get data(): Element { //getter of data
        return this.xmlData;
    } 

    public addListener(listener: Function) {
        this.listeners.push(listener);
    }

    public getXml(callback: Function): void {

        var request = new XMLHttpRequest();
        request.onreadystatechange = function () {
            if ((request.readyState == 4) && (request.status < 400)) {
                callback(request.responseXML);
            }
        };
        request.open("GET", this.path, true);
        request.send();
    }

    public callbackData(data: XmlDocument): void {
        var xml = new XmlDocument(data);
        this.xmlData = xml.documentElement;

        this.listeners.forEach((it)=>it()); // when reload operation has done then invoke all listeners
    }

    public reloadXml() {
        this.getXml(this.callbackData.bind(this)); // bind your callback to current object
    }
}

所以,在主应用程序中你应该像这样使用它

/// <reference path="XmlData.ts" />    
class App {

    private xmldata :XmlData;
    constructor() {
        this.xmldata = new XmlData("xml.xml");   
        this.xmldata.addListener(()=>this.onXmlReloaded()); // here we add some listener to xmldata loader  
    }

    private onXmlReloaded(){ // here we process received data outside of xmldata class
      let receivedData =  this.xmldata.data;
      //some code here
    }        

    dosome(): void {
        this.xmldata.reloadXml();
    }
}

答案 1 :(得分:0)

我发现问题不是你的建议,而是它的样子

public callbackData(data: XmlDocument): void {
        var xml = new XmlDocument(data);
        this.xmlData = xml.documentElement;
        //this.listeners.forEach((it) => it());
        DockContainer.prototype.abc(this.xmlData);        

}

public abc(data: any) {
            console.log(data);
}

如果你想要访问同一个类中的另一个函数,需要指定这个函数的完整路径