Uso de la promesa de JavaScript

La programación sincrónica es generalmente fácil de depurar y mantener, sin embargo, la programación asincrónica generalmente proporciona un mejor rendimiento y una mayor flexibilidad. La característica más importante de Asynchronous es que no hay necesidad de esperar. Las "promesas" se convirtieron gradualmente en la parte más importante de JavaScript, y una gran cantidad de nuevas API han comenzado a implementar el principio de promesa. ¡Echemos un vistazo a qué es la promesa, y su API y uso!

Estado de promesas

La API xmlhttprequest es asíncrona, pero no utiliza la API de promesa. Pero hay muchas API de JavaScript nativas que usan promesa:

*API de la batería

*Fetch API (un reemplazo para XHR)

*API de servicio de servicio

Las promesas solo se volverán más populares y comunes en el futuro, y es muy importante que todos los desarrolladores frontales lo usen. Otra cosa que vale la pena señalar es que Node.js es una plataforma basada en promesas (es obvio que la promesa es una característica central de ello).

El uso de promesas es más simple de lo que piensas: ¡si solía usar SetTimeout para controlar las tareas asíncronas!

Uso básico de promesas

El nuevo constructor Promise () se puede utilizar en tareas asincrónicas tradicionales, al igual que el uso anterior de SetTimeOut y XMLHTTPREQUEST. Se genera una nueva promesa utilizando la nueva palabra clave. Al mismo tiempo, estas promesas proporcionan funciones de resolución y rechazo para permitirnos realizar operaciones de devolución de llamada:

 var p = new Promise (function (resolve, rechazar) {// hacer una tarea async tarea async y luego ... if (/ * buena condición */) {resolve ('ssucese!');} else {rechazar ('falla!');}}); p.then (function () {/ * haz algo con el resultado */}). Catch (function () {/ * error */})

Los programadores pueden llamar manualmente la resolución y rechazar funciones dentro de la función de devolución de llamada de acuerdo con la situación de ejecución. Aquí hay un ejemplo más realista que convierte una llamada xmlhttprequest a una tarea basada en promesas:

 // de las promesas de Jake Archibald y de regreso: // http://www.html5rocks.com/en/tutorials/es6/promises/#toc-promising-xmlhttprequestfunction get (url) {// devuelve una nueva promesa. return new Promise (function (resolve, rechazar) {// Do las cosas habituales de xhr var req = new xmlhttprequest (); req.open ('get', url); req.onload = function () {// Esto se llama incluso en 404 etc //. } else {// de lo contrario con el texto de estado // que será un error significativo Rechazo (Error (Req.StatusText)); console.log ("éxito!", respuesta);}, función (error) {console.error ("falló!", error);});

Promise.resolve () y promise.reject () se puede llamar directamente. A veces, cuando determinamos que la promesa no necesita ser ejecutada, no necesitamos usarlo nuevo para crear un objeto de promesa, pero podemos llamar directamente a Promise.resolve () y promesa.reject (). Por ejemplo:

 var userCache = {}; function getUserDetail (nombre de usuario) {// En ambos casos, almacenado en caché o no, se devolverá una promesa si (userCache [username]) {// devuelve una promesa sin la "nueva" palabra clave devuelve promet.resolve (userCache [username]); } // Use la API de Fetch para obtener la información // Fetch Devuelve un prometedor return fetch ('users/' + username + '.json') .then (function (resultado) {userCache [username] = resultado; return resultado;}) .Catch (function () {tirar un nuevo error ('no se pudo encontrar el usuario:' + username);};}

Debido a que la promesa definitivamente volverá, podemos usar los métodos de entonces y capturar para manejar el valor de retorno.

Luego método

Todas las instancias de objeto de promesa tienen un método entonces, que se utiliza para interactuar con esta promesa. Primero, el método entonces llamará a la función resolve () de forma predeterminada:

 New Promise (function (resolve, rechazar) {// una acción simulada de async usando setTimeout setTimeOut (function () {resolve (10);}, 3000);}). Entonces (function (resultado) {console.log (resultado);}); // desde la consola: // 10 de la consola

Entonces, el tiempo de activación de la acción de devolución de llamada es que se ejecuta la promesa. También podemos realizar operaciones de devolución de llamada en el método concatenado:

 New Promise (function (resolve, rechazar) {// una acción simulada de async usando setTimeOt setTimeOut (function () {resolve (10);}, 3000);}). Entonces (function (num) {console.log ('primero entonces:', num); return num * 2;}). Entonces (function (num) {console.log ('último:', num); return num * 2;}). Luego (function (num) {console.log ('último:', num); num * 2; }). entonces (function (num) {console.log ('last entonces:', num);}); // Desde la consola: // primero entonces: 10 // segundo y luego: 20 // último: 40

Encontrará que cada llamada tomará el valor de retorno del anterior y luego llamará como parámetro.

Si se ha ejecutado una promesa y se llama nuevamente el único, la acción de devolución de llamada se ejecutará nuevamente. Si la función de devolución de llamada de rechazo se ejecuta en esta promesa, y el método entonces se llama, la función de devolución de llamada no se ejecutará.

método de captura

Catch Cuando se rechaza una promesa (rechazada), se ejecutará el método de captura:

 New Promise (function (resolve, rechazar) {// una acción simulada de async usando setTimeout setTimeOut (function () {rechazar ('ded!');}, 3000);}). Entonces (function (e) {console.log ('ded', e);}). Catch (function (e) {console.log ('captación:', e);}); // ¡Hecho!'

Por lo general, manejamos el resultado de la falla de ejecución en el método de rechazo, y ejecutamos la excepción del resultado en la captura:

rechazar (error ('no se pudieron encontrar los datos'));

Promesa. Todo método

A menudo hay un escenario en el que llamamos asincrónicamente: necesitamos llamar a múltiples operaciones asíncronas al mismo tiempo, pero esperamos que solo realicemos la operación de respuesta después de que se completen todas las operaciones, este es el papel de promesa. La promesa. Todo el método puede recibir múltiples promesas como parámetros, en forma de una matriz, y la función de devolución de llamada se llamará después de que todas estas promesas se ejecuten con éxito.

 Promise.all ([promise1, promise2]). Entonces (función (resultados) {// ambas promesas resueltas}). Catch (function (error) {// Una o más promesas fueron rechazadas});

Un buen ejemplo de uso de promesa. Todo es realizar múltiples operaciones de AJAX (a través de Fetch) llamadas:

 var request1 = fetch ('/users.json'); var request2 = fetch ('/artates.json'); promise.all ([request1, request2]). Entonces (function (resultados) {// ambas promesas hechas!});

También podemos realizar una combinación de API de Fetch and Battery State, porque todas devuelven promesas:

 Promise.all ([fetch ('/users.json'), navigator.getBattery ()]). Entonces (function (resultados) {// ambas promesas hechas!});

Una vez que se llama a la función de rechazo en la promesa, la ejecución se rechaza y no se puede completar normalmente, la situación será un poco complicada. Una vez que se rechaza la promesa, el método de captura atrapará la primera función de rechazo ejecutada:

 var req1 = new Promise (function (resolve, rechazar) {// una acción de async simulada usando setTimeOut setTimeOut (function () {resolve ('primero!');}, 4000);}); var req2 = new promise (function (resolve, rechazar) {// a la acción de asycio utilizando setTimeOut setTimeOut (function () {rechazo ('segundo');}; 3000);}); promise.all ([req1, req2]). Entonces (function (resultados) {console.log ('entonces:', one);}). Catch (function (err) {console.log ('catch:', err);}); // de la consola: // Catch: segundo!

Promise. Todo es una interfaz muy importante y jugará un papel importante en muchas API de promesa recién nacidas.

Promesa.

Promise.race es una función interesante: no espera que todas las promesas se resuelvan o rechacen, pero en todas las promesas, disparará mientras finalice una ejecución:

 var req1 = new promise (function (resolve, rechazar) {// una acción de async simulada usando setTimeOT setTimeOut (function () {resolve ('primero!');}, 8000);}); var req2 = new promise (function (resolve, rechazar) {// una acción de async usando setTimeOut setTimeOut (function () {resolve ('segundo);};}; 3000);}); promet.race ([req1, req2]). Entonces (función (uno) {console.log ('entonces:', one);}). Catch (function (uno, dos) {console.log ('catch:', uno);}); // de la consola: // luego: segundo!

Un escenario útil es descargar recursos de múltiples servidores de espejo. Una vez que uno regresa, las otras devoluciones no se procesan.

Aprender a usar promesas

Las promesas han sido un tema muy candente en los últimos años, e incluso se ha retirado de JavaScript para convertirse en una arquitectura del idioma. Creo que pronto veremos más y más API de JavaScript que utilizarán patrones basados en la promesa.

Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.