我在Ionic中得到一个未定义的变量，我不确定为什么吗？

Question

I'm trying to encrypt and decrypt a simple text in Ionic. Here's my code:

encryptedData : any;

encryptData(data){
  this.aes
      .encrypt(this.secureKey, this.secureIV, data)
      .then(res => {
        console.log("Encrypted Data: " + res);
        this.encryptedData = res;
      })
      .catch(err => {
        console.log("Error encrypting data: " + err);
      });
 }

the data is a simple plain text and it gets encrypted as I can see from the logs:

However the variable encryptedData comes as null after setting the (res) data to it. What could I be doing wrong?

Answer 1

Welcome to the world of "this" in JavaScript.

Arrow functions are bound to the execution context - in this example, it will be invoked with some kind of "this" that comes from Promise internals.

You can enforce calling context by using regular function combined with "bind(...)".

Please, take a look at the following example.

Promise
      .resolve("new value")
      .then((res) => {
        this.myProp = res;
      });

Will not work, but this:

Promise
    .resolve("new value")
    .then(function(res){
        this.myProp = res;
    }.bind(this));

will.

Take a look at this jsfiddle which reproduces your problem (open browser's devtools to see console output) https://jsfiddle.net/mg7pjLz0/4/

Answer 2

It looks like encrypt() returns a Promise; in such a case, you are only able to use the return value inside the 'then' block. You should check, perhaps by doing console.log("Encrypted Data Assigned?: " + this.encryptedData); right after you assignment if the value gets assigned. If the value is printed, then maybe you are trying to use the value before the async function returns.