Cómo usar Promise para controlar el proceso asincrónico de un bucle for
1. Definición
La promesa es una abstracción de la programación asincrónica. Es un objeto proxy que representa el valor devuelto por una función o la excepción lanzada por una función que debe procesarse de forma asincrónica. En otras palabras, el objeto de promesa representa una operación asincrónica, que puede separar el objeto asincrónico y la función de devolución de llamada, y vincular la función de devolución de llamada a la operación asincrónica mediante el método entonces.
Sigue la promesa/especificación A común de JS.
1. Estado
La promesa tiene tres estados: pendiente (por resolver, este también es el estado de inicialización), cumplida (completada) y rechazada (rechazada).
2. Interfaz
La única interfaz que entonces es el método de promesa requiere 2 parámetros, a saber, resolveHandler yceivedHandler. Y devuelve un objeto de promesa para admitir llamadas en cadena.
El constructor de la promesa acepta un parámetro de función y el formato del parámetro es una tarea asincrónica fija. Aquí hay un ejemplo:
función enviarXHR(resolver, rechazar){
.var xhr = new XMLHttpRequest();
xhr.open('get', 'QueryUser', true);
xhr.onload = function(){
if((xhr.status gt;= 200 amp; amp; xhr.status lt; 300) || xhr.status === 304){
resolve(xhr.responseText) ;
p>}else{
rechazar(nuevo Error(xhr.statusText));
}
};
xhr.onerror = function(){
rechazar(nuevo Error(xhr.statusText));
}
xhr.send( null)
}
2. Implementación
Para implementar el objeto de promesa, primero debe considerar varias cuestiones:
1. la implementación debe implementarse en el constructor de la promesa. El estado del objeto y la función de devolución de llamada se eliminan, y la función de devolución de llamada se puede ejecutar normalmente después de la separación.
2. Cómo implementar llamadas en cadena y administrar el estado.
El primero es el constructor:
p>
//Definición de macro global
var PENDIENTE = 0;
var CUMPLIDO = 1;
var RECHAZADO = 2;
//Constructor de promesa
función Promesa(fn){
var self = this;
self.state = PENDING; // Estado de inicialización
self.value = null; // Variable de objeto para almacenar resultados asincrónicos
self.handlers = []; // Función de devolución de llamada de almacenamiento, la función de devolución de llamada fallida no se guarda aquí porque es un domo
//Se procesa después de que la tarea asincrónica sea exitosa, esta no es una función de devolución de llamada
cumplir(resultado){
if(self.state === PENDIENTE){
self.state = CUMPLIDO;
self.value = resultado;
for(var i=0; ilt; self.handlers.length ;i ){
self.handlers[i](resultado);
}
}
}
// Manejo después de una falla de tarea asincrónica,
función rechazar(err){
if(self.state === PENDIENTE){
self.state = RECHAZADO;
self.value = err;
}
}
fnamp;amp;fn(cumplir,rechazar);
};
El constructor acepta una función asincrónica y la ejecuta, modificando el estado y el resultado del objeto de promesa.
Método de función de devolución de llamada entonces:
//Use el método entonces para agregar una función de devolución de llamada y use el resultado de la función de devolución de llamada return como parámetro de resolución de la promesa de devolución
Promise.prototype.then = function(onResolved, onRejected){
var self = this;
return new Promise(función(resolver, rechazar){
var onResolvedFade = function(val){
var ret = onResolved?onResolved(val): val; // Este paso es principalmente para encadenar la función de devolución de llamada exitosa pasada en el método then. return Parámetros de resultado
if(Promise.isPromise(ret)){//Cuando el valor de retorno de la función de devolución de llamada también es una promesa
ret.then(function(val){
resolver(val);
});
}
más{
resolver(ret)
}
};
var onRejectedFade = function(val){
var ret = onRejected?onRejected(val): val;
rechazar(ret);
};
self.handlers.push(onResolvedFade);
if(self. _status === CUMPLIDO ){
onResolvedFade(self._value);
}
if(self._status === RECHAZADO){
onRejectedFade (self._value);
}
});
}
Código de prueba:
función async(valor){
var pms = new Promise(función(resolver, rechazar){
setTimeout(función(){
resolver(valor);
}, 1000);
});
devolver pms;
async( 1).entonces(función(
resultado){
console.log('el resultado es ', resultado); //el resultado es 2
devolver resultado
}). (función(resultado){
console.log( resultado); //2
});