La interacción de las páginas web se está volviendo cada vez más compleja, y JavaScript también se está volviendo cada vez más operaciones asincrónicas. Por ejemplo, una solicitud AJAX común requiere respuesta a las operaciones cuando se completa la solicitud. La solicitud suele ser asincrónica. Durante el proceso de solicitud, el usuario puede realizar otras operaciones sin bloquear la página. Este efecto de interacción asíncrona es bastante amigable para el usuario. Pero para los desarrolladores, es muy hostil lidiar con este tipo de operación en grandes cantidades. Las operaciones completadas por solicitudes asíncronas deben estar predefinidas en la función de devolución de llamada, y se debe llamar a esta función después de completar la solicitud. Este método de programación asincrónica no lineal hará que los desarrolladores se sientan incómodos, y también trae muchos inconvenientes, aumentando el acoplamiento y la complejidad del código, y la organización del código será muy poco elegante, reduciendo en gran medida la mantenibilidad del código. La situación es más complicada. Si una operación tiene que esperar hasta que se completen múltiples solicitudes asincrónicas de AJAX antes de que se pueda realizar, la función de devolución de llamada se anidadará. Si varias capas necesitan ser anidadas, solo puede pedir bendiciones.
Echemos un vistazo a las siguientes funciones asincrónicas comunes.
La copia del código es la siguiente:
var showmsg = function () {
setTimeOut (function () {
alerta ('hola');
}, 5000);
};
Esto generalmente se hace si desea agregar una devolución de llamada a la función.
La copia del código es la siguiente:
var showmsg = function (devolución de llamada) {
setTimeOut (function () {
alerta ('hola');
// Agregar devolución de llamada aquí
llamar de vuelta();
}, 5000);
};
Si usa Easy.js Promise, el método de agregar devoluciones de llamada será mucho más elegante, siempre que necesite encapsular la función original en una instancia de promesa.
La copia del código es la siguiente:
var showmsg = function () {
// Construir instancia de promesa
Var promise = new E.Promise ();
setTimeOut (function () {
alerta ('hola');
// Cambiar el estado de la promesa
promet.resolve ('hecho');
}, 5000);
// volver a la instancia de promesa
promesa de regreso;
};
Hay 3 pasos clave para encapsular una función ordinaria en una instancia de promesa. El primer paso es construir una instancia de promesa dentro de la función. El segundo paso es cambiar el estado de la promesa a completarse después de ejecutar la función de implementación. El tercer paso es devolver esta instancia de promesa. Cada instancia de promesa tiene 3 estados, a saber, pendiente (no completado), resuelto (completado, exitoso) y rechazado (rechazado, fallido). Echemos un vistazo a cómo agregar devoluciones de llamada.
La copia del código es la siguiente:
showmsg (). entonces (function (str) {
// La devolución de llamada se agrega aquí
devolución de llamada (str);
});
Esto separa completamente la función de devolución de llamada de la función asincrónica original, y desde la perspectiva de la organización del código, es mucho más elegante. Resolve acepta un parámetro que puede transferir fácilmente los datos a la devolución de llamada agregada utilizando el método entonces.
Para las solicitudes de AJAX, Easy.js encapsula directamente el método AJAX en un objeto prometedor, y puede agregar directamente el método luego para devolver la llamada.
La copia del código es la siguiente:
E.AJAX ({
URL: 'test1.php',
Tipo: 'Get'
})
.Then (function () {
// Agregar una devolución de llamada con una solicitud exitosa
}, función(){
// Agregar una devolución de llamada que falló la solicitud
});
El método entonces acepta 2 funciones como parámetros. La primera función es una devolución de llamada completa, y la segunda es una devolución de llamada fallida.
¿Qué pasa si hay múltiples solicitudes AJAX mencionadas anteriormente? Entonces tienes que usar el método When. Este método puede aceptar múltiples instancias de promesa como parámetros.
La copia del código es la siguiente:
solicitudes var = E.When (E.AJAX ({
URL: 'test1.php',
Tipo: 'Get'
}), E.AJAX ({
URL: 'test2.php',
Tipo: 'Get'
}));
requests.then (function (arg1, arg2) {
console.log ('éxito:' + arg1 [0] + arg2 [0]);
}, función (arg1, arg2) {
console.log ('falla:' + arg1 + arg2);
});
El método When es almacenar múltiples instancias de promesa en una matriz y esperar hasta que se completen todas las instancias de promesa de la matriz antes de ejecutar la devolución de llamada completa. Una vez que se rechaza una instancia, la devolución de llamada rechazada se ejecuta inmediatamente.
El patrón de promesa es una de las especificaciones de CommonJS. Muchas bibliotecas de JavaScript convencionales tienen implementaciones correspondientes, como JQuery y Dojo, que han diferido para implementar estas funciones. Aquí todavía quiero quejarme de JQuery Difered. Dejando de lado su uso interno, este debería ser el módulo con la tasa de uso del usuario más baja, que tiene una cierta relación con su método de uso más complejo.