.bind (это) не работает внутри xhr addEventListener

Question

.bind(this) не работает внутри ответа от запроса xhr

Я пытался переместить .bind(this) почти в любое место, которое мог подумать, но оно все еще не работает

В конечном итогеМне просто нужно захватить this.obj.id

upload(blob8) {
    var data = new FormData();
    data.append("file", blob8);

    var xhr = new XMLHttpRequest();
    xhr.withCredentials = true;

    xhr.open(
      "POST",
      "URL"
    );
    xhr.setRequestHeader("Authorization", `Bearer ${this.state.accessToken}`); //<--- IS WORKING
    // xhr.setRequestHeader("Content-Type", "application/octet-stream");

    xhr.send(data);

    xhr.addEventListener("readystatechange", function() {
      if (this.readyState === 4) {
        console.log(this.responseText);
        this.obj = JSON.parse(this.responseText);
        console.log(this.obj);
        console.log(this.obj.id);
        this.uploadMetaData(this.obj.id).bind(this);  // <------- NOT WORKING
      } else {
        console.log("there is an error here");
      }
    });
  }

Answer 1

Редактировать:

Я пропустил, что обратный вызов ссылается на два разных this контекста. Два возможных способа решить эту проблему:

upload() {
    var that = this;
    xhr.addEventListener("readystatechange", function() {
        that.uploadMetaData(this.obj.id); 
    });
}

или

upload() {
    var boundUploadMetaData = this.uploadMetaData.bind(this);
    xhr.addEventListener("readystatechange", function() {
        boundUploadMetaData(this.obj.id); 
    });
}

Оба будут вызывать uploadMetaData с upload() this, в то время как обратный вызов все еще ссылается на xhr объект this.

В качестве альтернативы, я не думаю, что вам вообще нужно ссылаться на xhr объекта this:

xhr.addEventListener("readystatechange", function() {
    if (xhr.readyState === 4) {
        var res = JSON.parse(xhr.responseText);
        this.uploadMetaData(res.id);
    } else {
        console.log("there is an error here");
    }
}.bind(this));

Оригинальный ответ :

Если предположить, что это не метод для класса ES2015 (похоже, что это не так, если ссылка this в upload() верна), потребуется обратный вызов для "readystatechange"быть привязанным к внешним методам (upload()) this.

Вы должны быть в состоянии сделать одно из следующих действий:

xhr.addEventListener("readystatechange", function() {
  // callback body   
}.bind(this));

или, если можетеиспользуйте синтаксис ES2015, затем

xhr.addEventListener("readystatechange", () => {
  // callback body   
});

, поскольку выражения функций стрелок связывают this по своей лексической области видимости.