How to access 'this' from a function in a promise chain in JavaScript?

Question

If I replace '=>' with 'function' in the following JavaScript code

            fetch(sendUrl, {
                method: "post",
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                },
                body: ...
            }).then(response => {
                if (response.status == 200) {
                    return response.json();
                }
                else {
                    this.actionMessage = "Cannot get the response from the server. ': " + response.statusText + "'";
                    this.status = "error";
                }
            }).then ...

so it becomes

            fetch(sendUrl, {
                method: "post",
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                },
                body: ...
            }).then(function(response) {
                if (response.status == 200) {
                    return response.json();
                }
                else {
                    this.actionMessage = "Cannot get the response from the server. ': " + response.statusText + "'";
                    this.status = "error";
                }
            }).then ...

'this' becomes undefined inside the function and I am getting an error like 'Unable to set a property of undefined or null reference'.

How to make this work?

(I need to replace replace '=>' with 'function', because looks like IE does not understand '=>').

Use http://babeljs.io to make it work on IE. Don't write bad code just because some browsers can't understand it, write modern code and let your computer transpile it to something opder browser do understand. — Jonas Wilms, Oct 21 '18 at 12:13
@JonasWilms does babeljs help when a browser does not support 'fetch' ? — Dmitriano, Oct 21 '18 at 12:51

score 1 · Accepted Answer · answered Oct 21 '18 at 12:12

1

You can bind this

function() {
  // contents
}

to

(function() {
  // contents
}).bind(this)

answered Oct 21 '18 at 12:12

ZeroCho

1,358
10
23

How to access 'this' from a function in a promise chain in JavaScript?

1 Answers1