promise - pass - ES6 y alcance variable dentro de una promesa

pass variables between promises

Question

No estoy seguro de lo que me falta aquí.

Necesito obtener el resultado de los data en this.contact . this.contact . En este momento, estoy usando una variable de clase estática, pero parece sucio tener que hacer eso.

export class contactEdit {
static t; // static class var
constructor() {
this.id = null;
this.contact = null;
contactEdit.t = this;
}
activate(id) {
this.id = id;
let contact = this.contact; // scoped version of class var
return dpd.contacts.get(id).then(function(data) {
console.log(data);
contactEdit.t.contact = data; // this works
contact = data; // this doesn''t
});
}
}

Normalmente crearía un var contact dentro de la función activate() (funciona en la consola de Chrome) pero esto no parece funcionar en ES6.

Consola de Chrome:

var c = null;
undefined
c;
null
dpd.contacts.get(''a415fdc8f5a7184d'').then(function(data) {
c = data;
});
Object {}fail: (n)then: (e,t)__proto__: Object
c;
Object {firstName: "John", lastName: "Doe", id: "a415fdc8f5a7184d"}

Answer 1

Tienes que hacer dos cosas. Primero, use una función de flecha, y segundo, use `this.contact = data;

activate(id) {
this.id = id;
return dpd.contacts.get(id).then(data => {
console.log(data);
this.contact = data;
});
}

Usas una función de flecha porque trata con el problema " this " de JavaScript, donde esto se refiere al alcance léxico de la función, y no al objeto en el que estás actualmente. Usar una función de flecha asegura que this fuera de la función de flecha sea el lo mismo que this dentro de la función de flecha.

this.contact utilizar this.contact contact porque el contact es una propiedad de instancia de la clase.

Answer 2

El problema es que contact = data; actualizará el valor de la variable de contact local, pero no cambiará el valor de this.contact . En su lugar, debe actualizar la propiedad de contact contacto. El problema es que no tienes acceso a this dentro del núcleo de tu función.

Hay diferentes formas de resolver esto.

1- Puedes guardar el contexto de activate ( this ) en una variable en el cierre de activate para que puedas acceder a él dentro del núcleo de then .

activate(id) {
this.id = id;
let that = this;
return dpd.contacts.get(id).then(function(data) {
console.log(data);
that.contact = data;
});
}

2- Puede vincular la función a this para que pueda acceder a ella.

activate(id) {
this.id = id;
return dpd.contacts.get(id).then(function(data) {
console.log(data);
this.contact = data;
}.bind(this));
}

3- (recomendado con ES6) puede usar una función de flecha (las funciones de flecha conservan el contexto)

activate(id) {
this.id = id;
return dpd.contacts.get(id).then((data) => {
console.log(data);
this.contact = data;
});
}