在异步javascript调用中设置变量

时间:2018-08-20 12:48:01

标签: jquery asynchronous-javascript

我有一个类x的对象C。应该通过调用x.myval来设置属性x.load(),该属性又应从异步ajax调用中获取其数据。

class C {
    constructor() {
        this.myval = "hello";
    }
    load() {
        return $.ajax({
            type: "GET",
            url: "file.txt",
            // suppress "xml not well-formed error in firefox", 
            beforeSend: function(xhr){
                if (xhr.overrideMimeType) { xhr.overrideMimeType("text/plain"); }
            },
            contentType: "text/plain",
            dataType: "text",
            success: function(text) {
                this.myval = text;
            }
        });
    }
}

var x = new C();
$.when(x.load()).done(function(a1,a2) {
    console.log(x.text); //should print the content of file.txt
});

我收到错误this.myval is undefined,显然是因为this设置为jquery-this的{​​{1}}。

我也尝试过:

$

但这引发了一个异常class C { constructor() { this.myval = "hello"; } load() { var callback = function callbackClosure(mythis) {return function(text) { this.myval = text; }}(this); return $.ajax({ type: "GET", url: "file.txt", // suppress "xml not well-formed error in firefox", beforeSend: function(xhr){ if (xhr.overrideMimeType) { xhr.overrideMimeType("text/plain"); } }, contentType: "text/plain", dataType: "text", success: callback }); } } var x = new C(); $.when(x.load()).done(function(a1,a2) { console.log(x.text); //should print the content of file.txt });

1 个答案:

答案 0 :(得分:1)

this在此行中未引用您的实例:

success: function(text) {
    this.myval = text;
}

您可以在外部方法中创建一个引用您的实例的临时变量,如下所示:

load() {
    var that = this;
    return $.ajax({
        type: "GET",
        url: "file.txt",
        // suppress "xml not well-formed error in firefox", 
        beforeSend: function(xhr){
            if (xhr.overrideMimeType) { xhr.overrideMimeType("text/plain"); }
        },
        contentType: "text/plain",
        dataType: "text",
        success: function(text) {
            that.myval = text;
        }
    });
}

或者,您可以使用箭头功能:

load() {
    return $.ajax({
        type: "GET",
        url: "file.txt",
        // suppress "xml not well-formed error in firefox", 
        beforeSend: function(xhr){
            if (xhr.overrideMimeType) { xhr.overrideMimeType("text/plain"); }
        },
        contentType: "text/plain",
        dataType: "text",
        success: (text) => {
            this.myval = text;
        }
    });
}