Promise – cálculos diferidos y asíncronos

@serverSerrverlesskiy

Promise es un objeto que contiene el valor futuro de una operación asíncrona. Por ejemplo, si solicita algunos datos del servidor, la promesa nos promete obtener estos datos, que podemos usar en el futuro.

math

Al principio, la promesa tiene el estado pending, luego uno de: fulfilled (exitoso) o rejected(fracaso).

estados de promesa

Pending - La promesa está pendiente si el resultado no está listo. Es decir, esperar a que se complete algo (por ejemplo, que se complete una operación asincrónica).
Fulfilled - La promesa se resuelve si el resultado está disponible. Es decir, algo completó su ejecución (por ejemplo, una operación asíncrona) y todo fue exitoso.
Rejected - Promesa rechazada si ocurrió un error durante la ejecución.

Video

Creación de promesas

Más

El objeto Promise se crea usando la nueva palabra clave🗝️ y su constructor. El constructor Promise toma un argumento, una devolución de llamada, también conocida como función ejecutor⚙️, que toma 2 devoluciones de llamada, resolve y reject.

La función ejecutiva⚙️ se ejecuta inmediatamente después de la creación de la promesa. Se hace una promesa para ser cumplida con una llamada a resolve() y rechazada con reject().

const promise = new Promise((resolve, reject) => {
  if (allWentWell) {
    resolve('¡Todo salió a la perfección!')
  } else {
    reject('Algo salió mal')
  }
})

resolve() y reject() toman un argumento, que puede ser una cadena, un número, un booleano, una matriz o un objeto.

Para proporcionar una función⚙️ con la funcionalidad⚙️ de las promesas, solo necesita devolver un objeto Promise en ella:

function myAsyncFunction(url) {
  return new Promise((resolve, reject) => {
    // Código de función
  })
}

Promesa de uso

Ayuda

Las promesas se usan con los métodos then() y catch().

###después

El método then se usa para ejecutar funciones ⚙️ en un resultado positivo y negativo de una promesa.

Lanzamiento

Sintaxis del método then:

promise.then(
  function (result) {
    /*manejar el éxito*/
  },
  function (error) {
    /* manejará el error */
  }
)

El primer argumento 1️⃣ del método then es una función⚙️ que se ejecuta cuando la promesa pasa al estado "éxito" y obtiene el resultado.

El segundo argumento then es una función⚙️ que se ejecuta cuando la promesa pasa al estado "fallido" y recibe un error.

Error

Un ejemplo del método then:

let promise = new Promise(function (resolve, reject) {
  setTimeout(() => resolve('done!'), 1000)
})

// resolve ejecutará la primera función pasada a .then
promise.then(
  result => alert(result), // mostrará "hecho!" en un segundo
  error => alert(error) // No comenzará
)

А в случае ошибки в промисе – выполнится вторая:

let promise = new Promise(function (resolve, reject) {
  setTimeout(() => reject(new Error('Whoops!')), 1000)
})

// reject ejecutará la segunda función pasada a .then
promise.then(
  result => alert(result), // No comenzará
  error => alert(error) // mostrará "Error: ¡Ups!" después de un segundo
)

Si necesita mostrar solo el resultado de una ejecución exitosa, entonces solo se puede pasar una función a then⚙️:

let promise = new Promise(resolve => {
  setTimeout(() => resolve('done!'), 1000)
})

promise.then(alert) // mostrará "done!" después de un segundo

catch

Catch

El método catch se utiliza para detectar errores. Se puede usar en lugar del método then para mostrar mensajes de error sobre errores.

Sintaxis del método catch:

let promise = new Promise((resolve, reject) => {
  setTimeout(() => reject(new Error('¡Error!')), 1000)
})

promise.catch(alert) // mostrará "Error: ¡Error!" después de un segundo

promise.all

Este método toma una matriz de promesas y devuelve una nueva promesa, que se cumplirá cuando todas las promesas dentro de la matriz se cumplan o se rechacen tan pronto como se cumpla una promesa que se rechace.

Regresar

Por ejemplo:

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise1 cumplida')
  }, 2000)
})
const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise2 cumplida')
  }, 1500)
})
Promise.all([promise1, promise2])
  .then(data => console.log(data[0], data[1]))
  .catch(error => console.log(error))

Aquí, el argumento dentro de then() es una matriz que contiene los valores prometidos en el mismo orden en que se pasaron a Promise.all().

¿Problemas?

Problema

Escribe en Discord o Telegram chat y suscríbete a nuestras noticias

Campamento JavaScript

Preguntas:

Pregunta

¿Cuál es el nombre del método que se llama cuando la promesa es exitosa?

reject
resolve

¿Qué método se puede usar para verificar el cumplimiento de todas las promesas en una matriz?

promise.all
promise.race

¿Qué método se utiliza para detectar errores en las promesas?

then
catch

Para comprender cuánto ha aprendido esta lección, realice una prueba en la aplicación móvil de nuestra escuela sobre este tema o en nuestro bot de Telegram.

Campamento JS