understanding - then javascript
¿Por qué el valor no está definido en.then() encadenado a Promise? (5)
Como su valor de datos es el valor de retorno del último
.then()
, su último
.then()
no tiene un valor de retorno válido.
Por lo tanto, puede agregar el valor de retorno en la última función
.then()
.
Dado
function doStuff(n /* `n` is expected to be a positive number */) {
return new Promise(function(resolve, reject) {
setTimeout(function() {
resolve(n * 10)
}, Math.floor(Math.random() * 1000))
})
.then(function(result) {
if (result > 100) {
console.log(result + " is greater than 100")
} else {
console.log(result + " is not greater than 100");
}
})
}
doStuff(9)
.then(function(data) {
console.log(data) // `undefined`, why?
})
¿Por qué los
data
undefined
están
undefined
en
.then()
encadenados a
doStuff()
call?
El doStuff está devolviendo la
Promise
.
Pero, su última función
then
no devuelve ningún valor, por lo tanto, los
data
vienen como
undefined
.
En las promesas, el valor de los argumentos de la siguiente función es el valor devuelto de la función anterior.
function doStuff(n /* `n` is expected to be a positive number */) {
return new Promise(function(resolve, reject) {
setTimeout(function() {
resolve(n * 10)
}, Math.floor(Math.random() * 1000))
})
.then(function(result) {
if (result > 100) {
console.log(result + " is greater than 100")
} else {
console.log(result + " is not greater than 100");
}
return result;
})
}
doStuff(9)
.then(function(data) {
console.log(data) // `90`
})
El problema se enfrentaba:
return
(new Promise(..)) //the promise we want to return
.then(()=>undefined) // the promise were actually returning, which resolves to undefined
Como ya habrás notado, luego devuelve una nueva promesa. Esto tiene una buena razón, facilita el encadenamiento de promesas, por ejemplo:
getUser()//an asynchronous action
.then(user=>login(user))//then if we get the user,promise to log in
.then(token=>console.log("logged in,token is "+token) //then if we logged in, log it
.catch(error=>"login failed");//catch all errors from above
Pero esto también crea la pequeña trampa que enfrentamos. La solución podría ser devolver la promesa original y no la nueva promesa devuelta automáticamente por .then (), ya que esto se resuelve como indefinido, ya que la función interna no devuelve algo explícitamente:
//what were doing:
Promise.resolve(n*10)//the original promise resolves to n*10
.then(a=>undefined)//the then gets n*10 passed as a, but returns undefined
.then(b=>console.log(b));//b will be undefined :0
//what we want:
var promise=Promise.resolve(n*10);
promise.then(a=>undefined);//a is n*10, this resolves to undefined
promise.then(b=>console.log(b));//but this still logs n*10, as its the original promise :)
Entonces, como puede ver, para devolver la promesa original, simplemente la almacenamos en una variable, luego le asignamos un controlador .then, y todavía tenemos una referencia a la promesa original a la que podemos asignar otros controladores (o devolver).
En acción:
function doStuff(n /* `n` is expected to be a number */) {
//create a new promise and store it
var promise=new Promise(function(resolve, reject) {
setTimeout(function() {
resolve(n * 10)
},1000);
});
//add a then handler to this promise
promise.then(result=>console.log(result + " is "+result<100?"not":""+" greater than 100"));
//return the original one
return promise;
}
doStuff(9).then(function(data) {
console.log(data) //not undefined, as original promise
})
No está devolviendo el resultado del .then () encadenado a la Promesa. Necesita agregar el resultado de retorno; a .then ()
Porque no se
return
ninguna
Promise
u otro valor desde
.then()
encadenado al constructor
Promise
.
Tenga en cuenta que
.then()
devuelve un nuevo objeto
Promise
.
La solución es
return
un valor u otra llamada de función que
return
un valor o
Promise
de
.then()
.
function doStuff(n /* `n` is expected to be a positive number */) {
return new Promise(function(resolve, reject) {
setTimeout(function() {
resolve(n * 10)
}, Math.floor(Math.random() * 1000))
})
.then(function(result) {
if (result > 100) {
console.log(result + " is greater than 100")
} else {
console.log(result + " is not greater than 100");
}
// `return` `result` or other value here
// to avoid `undefined` at chained `.then()`
return result
})
}
doStuff(9)
.then(function(data) {
console.log("data is: " + data) // `data` is not `undefined`
});