Promise, que es un gran problema, pertenece a la verdad. Lo entiendo y puedo usarlo, pero siempre siento que no lo entiendo completamente. Encontré un video
sobre Bilibili, que resolvió mis años de dudas.
Bilibili link
Síncrono: envíe la solicitud -> espere a que el servidor procese -> el navegador del cliente no puede hacer nada durante este período. ) -> se completa el procesamiento
simulación uno
function one (){
return 'I am one';
}
function two () {
setTimeout(()=>{
return 'I am two';
},3000);
}
function three () {
return 'I am three';
}
console.log(one())
console.log(two())
console.log(three())
- Las solicitudes de datos de fondo son todas asíncronas, mientras que JS es de un solo subproceso. Aquí, la función de temporización se usa para simular la solicitud, y se encontrará que la salida se ejecutará antes de que se complete la solicitud, lo que resultará en la salida de undefined
simulación dos
function one (){
return 'I am one';
}
function two () {
return new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve ('I am two');
},3000);
})
}
function three () {
return 'I am three';
}
console.log(one())
console.log(two())
console.log(three())
Aquí, debido a que aún es ejecutado directamente por un solo subproceso, el objeto de promesa se genera sin esperar el estado de éxito de la promesa, y el objeto de promesa está en estado pendiente en este momento.
simulación tres
function one (){
return 'I am one';
}
function two () {
return new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve ('I am two');
},3000);
})
}
function three () {
return 'I am three';
}
console.log(one())
console.log(await two())
console.log(three())
Con await, cuando se ejecuta el código, await devuelve un resultado antes de continuar con la ejecución hacia abajo.
Aquí saldrá primero I am oney luego esperará tres segundos antes de salir.I am two I am three
- La solución inicial es usar el método de función de devolución de llamada para pasar operaciones posteriores, de modo que se pueda ejecutar otra lógica después de obtener los datos.
- Pero demasiadas devoluciones de llamada conducirán a un infierno de devolución de llamada, que es difícil de mantener. La principal contribución de la promesa es resolver el infierno de devolución de llamada y hacer que el código de solicitud sea más conciso. Después de agregar async, será más cómodo escribir.
un punto notable
Recordé que en la entrevista anterior, un entrevistador me preguntó por qué tenía que escribir a mano el objeto de promesa cuando usaba promesa. El await devuelto era el objeto de promesa. No pensé en eso en ese momento. Mirando hacia atrás ahora... Afortunadamente, no fui
a la descripción de await en el MDN de esa compañía
Si el valor no es una Promesa, await convierte el valor en una Promesa normalmente resuelta y luego espera su resultado.
async function f2() {
var y = await 20;
console.log(y);
}f2();
//输出20
Lo que await regresa es el objeto de promesa. Esta oración es correcta, pero echemos un vistazo en combinación con el desarrollo real.
Use temporizadores para simular solicitudes asincrónicas. El escenario es que necesita obtener el resultado devuelto por la interfaz antes de continuar. al siguiente paso.
async function f2() {
var y = await two();
console.log(y); // 20
console.log('下一步')
}
function two () {
setTimeout(()=>{
return 'I am two';
},3000);
}
f2()
//输出 undefined
// 下一步
El resultado devuelto de esta manera no está definido.Si la solicitud asincrónica no se encapsula manualmente y await la procesa automáticamente, el efecto de bloqueo de await no aparecerá y los datos seguirán sin estar disponibles.
La forma correcta de escribir es:
async function f2() {
var y = await two();
console.log(y); // 20
console.log('下一步')
}
function two () {
return new Promise(resolve=>{
setTimeout(()=>{
resolve( 'I am two')
},3000);
})
}
f2()
//等待三秒后
//输出 I am two
// 下一步
Discurso de la entrevista:
JS tiene un solo subproceso, pero las solicitudes en segundo plano se ejecutan de forma asíncrona. En el desarrollo, a menudo se encuentra que la lógica necesaria debe ejecutarse después de obtener los datos de la interfaz.
Por supuesto, aquí se puede usar una función de devolución de llamada, pero si la cantidad de código es demasiado grande, será difícil de mantener y formará un infierno de devolución de llamada.
El uso de la función de promesa con async await puede resolver perfectamente este tipo de problema. En
un determinado paso, configure await para esperar el objeto de promesa devuelto y realice una solicitud asíncrona en la promesa.
Utilice el método síncrono para escribir de forma asíncrona y de alta capacidad de mantenimiento.