Es posible que haya escuchado promesas, y mucha gente está hablando de ello, lo usa, pero no sabe por qué son tan especiales. ¿No puedes usar devoluciones de llamada? ¿Qué es especial? En este artículo, echemos un vistazo a cuáles son las promesas y cómo usarlas para escribir un código JavaScript más elegante.
Promesas fáciles de leer
Por ejemplo, queremos obtener algunos datos de la API de Hipsterjesus y agregar estos datos a nuestra página. Los datos de respuesta de estas API son los siguientes:
{"texto": "<p> lorem ipsum ... </p>", "params": {"paras": 4, "tipo": "hipster-latin"}}Para usar devoluciones de llamada, generalmente escribimos algo como lo siguiente:
$ .getjson ('http://hipsterjesus.com/api/', function (data) {$ ('cuerpo'). append (data.text);});Si tiene experiencia usando jQuery, reconocerá que creamos una solicitud GET y queremos que la respuesta sea JSON. También pasamos una función de devolución de llamada para aceptar el JSON de la respuesta para agregar los datos al documento.
Otra forma de escribir es usar el objeto de promesa devuelto por el método GetJson. Puede unir una devolución de llamada directamente a este objeto de retorno.
var promise = $ .getjson ('http://hipsterjesus.com/api/'); promet.done (function (data) {$ ('body'). append (data.Text);});En el ejemplo de devolución de llamada anterior, agrega el resultado de la solicitud API al documento cuando la respuesta es exitosa. Pero, ¿qué sucede cuando falla la respuesta? Podemos unir un procesador fallido en nuestra promesa.
var promise = $ .getjson ('http://hipsterjesus.com/api/'); promise.done (function (data) {$ ('body'). append (data.text);}); promet.fail (function () {$ ('body'). append ('<p> oh no, algo salió mal! </p>);});La mayoría de las personas eliminan la variable de promesa, que es más concisa y puede ver la función del código de un vistazo.
$ .getjson ('http://hipsterjesus.com/api/') .done (function (data) {$ ('body'). append (data.text);}). fail (function () {$ ('body'). append ('<p> oh no, algo salió mal! </p>');});JQuery también contiene un controlador de eventos que ocurre todo el tiempo, y será llamado independientemente del éxito o el fracaso de la solicitud.
$ .getjson ('http://hipsterjesus.com/api/') .done (function (data) {$ ('body'). append (data.text);}). fail (function () {$ ('body'). append ('<p> oh no, algo mal! </p>'); otrt). Always (function () {$ ((''). ¡Promesa que esto siempre se agregará!. </p> ');Al usar promesas, el orden de las devoluciones de llamada es como se esperaba. Podemos asegurarnos de que la devolución de llamada normal se llame primero, luego la devolución de llamada fallida y, finalmente, la devolución de llamada que sigue sucediendo.
Mejor API
Por ejemplo, queremos crear un objeto encapsulado de la API Hipsterjesus. Agregaremos un método: HTML, que devuelve datos HTML de la API. A diferencia de la configuración de un procesador de devolución de llamada para analizar las solicitudes, podemos hacer que el método devuelva un objeto prometedor.
var hipsterjesus = {html: function () {return $ .getjson ('http://hipsterjesus.com/api/') .then (function (data) {return data.Text;}); }};Esto es genial, por lo que podemos evitar el objeto de promesa sin preocuparnos por cuándo o cómo analizar su valor. Cualquier código que requiera un valor de devolución de promesa se puede registrar con una devolución de llamada de respuesta exitosa.
El método entonces nos permite modificar el resultado de la promesa y pasarla al siguiente procesador en la cadena. Esto significa que ahora podemos usar la nueva API como esta:
Hipsterjesus.html (). Done (función (html) {$ ("cuerpo"). append (html);});Hasta hace poco, AngularJS tiene una característica asesina, donde las plantillas pueden estar directamente a las promesas. En el controlador de Angular, como este:
$ scope.hipsteripsum = $ http.get ('http://hipsterjesus.com/api/');De esta manera, es muy fácil de escribir {{hipsteripsum.text}} en la plantilla. Cuando la promesa se resuelve, Angular no necesita actualizar automáticamente la vista. Desafortunadamente, el equipo angular ha abandonado esta característica. Ahora se puede habilitar llamando a $ parseProvider.unwrapromises (verdadero). Espero que Angular ya tenga esta característica incluida en otros marcos (lo vigilaré).
Llamada en cadena
La mejor parte de la promesa es que puedes unirlos. Por ejemplo, queremos agregar un método a una API que devuelva una matriz.
var hipsterjesus = {html: function () {return $ .getjson ('http://hipsterjesus.com/api/') .then (function (data) {return data.Text;}); }, párrafos: function () {return this.html (). entonces (function (html) {return html.replace (/<[^>]+>/g, "") .split ("");}); }};Utilizamos este método HTML en el método anterior, lo usamos en el método de párrafos. Debido a que el valor de retorno de la función de devolución de llamada prometía se pasa a la siguiente devolución de llamada en la cadena, somos libres de crear pequeños métodos funcionales para cambiar los datos al pasarlos a través de ellos.
Podemos conectar promesas en cualquier momento que sea necesario. Agreguemos uno.
var hipsterjesus = {html: function () {return $ .getjson ('http://hipsterjesus.com/api/') .then (function (data) {return data.Text;}); }, párrafos: function () {return this.html (). entonces (function (html) {return html.replace (/<[^>]+>/g, "") .split ("");}); }, oraciones: function () {return this.paragraphs (). entonces (function (párrafos) {return [] .concat.apply ([], párrafo.map (function (párrafo) {return párrafo.split ( /. /);});}); }};Múltiples llamadas
Quizás la característica más destacada de la promesa es la capacidad de llamar a múltiples API. ¿Qué sucede si necesita crear dos llamadas API al mismo tiempo cuando usa una devolución de llamada? Podrías escribir esto:
var firstData = null; var SecondData = NULL; VAR ResponseCallback = function () {if (! FirstData ||! SecundData) return; // hacer algo} $. get ("http://example.com/first", function (data) {firstData = data; resphipeCallback ();}); $ .get ("http://example.com/second", function (data) {SecundData = data; ResponseCallback ();});Esto es mucho más fácil de usar Promise:
var firstpromise = $ .get ("http://example.com/first"); var SecondPromise = $ .get ("http://example.com/second"); $ .When (FirstPromise, SecondPromise) .Done (function (FirstData, SecondData) {// Do Something});Aquí usamos el método When para vincularlo a un procesador que se llama cuando ambas solicitudes se completan.
en conclusión
Esto es prometedor. Espero que pienses de inmediato en algunas cosas terribles que se pueden lograr con promesa. ¿Qué es lo que más te gusta de usarlos? ¡Cuéntame en los comentarios!
*Nota: Para simplificar, este artículo utiliza la ejecución retrasada de jQuery. Existen diferencias sutiles entre el objeto diferido jQuery y las promesas/especificaciones A+, que es más estándar.
El artículo anterior Cómo usar las promesas para escribir un código JavaScript más elegante es todo el contenido que comparto con usted. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.