Función para esperar algo

por Halí - publicado: octubre 09, 2021
JavaScriptFunciones

En este artículo quiero mostrarte algunas cosas acerca del lenguaje de programación JavaScript mediante el uso de una función que servirá para «esperar».

Índice

Funciones de alto orden

Si sabes que son las funciones de alto orden, puedes saltarte esta parte

Las funciones de alto orden son por definición funciones que reciben como parámetro funciones o que devuelven funciones.

Aquí hay algunos ejemplos de funciones de alto orden:

Funciones como parámetro

const fun = (callback) => {
  const value = 3
  callback(value)
}

fun((val) => {
  console.log(val) // 3
})

Funciones como valor de retorno

const fun = (param) => {
  return () => {
    console.log(param)
  }
}

const log = fun(3)

log() // 3

Tienen usos específicos y particulares, en este caso usaremos el primer tipo, las que reciben funciones cómo parámetro.

Repetición

En cualquier caso (consumiendo una API) necesitamos esperar pero debemos hacerlo mientras preguntamos de vez en vez, particularmente cuando no hay un mecanismo de webhook que nos avise o notifique del cambio de estado.

Así, podemos hacer llamadas cada cierto tiempo, con setInterval, de esta forma:

setInterval(() => {
  APICall() // Llamada a la API
}, waitTime) // Tiempo a esperar

Ahora bien, cuando el resultado es el deseado, debemos detener la repetición de llamadas, de esta forma:

const interval = setInterval(() => {
  APICall().then(() => {
    // Condición de parada
    if (condition) {
      clearInterval(interval) // Detener la repetición
    }
  })
}, waitTime)

Ahora si queremos devolver un valor, podemos envolver este código en una Promesa.

Promesas

Si sabes que son las promesas, puedes saltarte esta parte Las promesas son objetos que representan el resultado exitoso o fallido de una operación asíncrona.

Una promesa se construye de manera sencilla, solamente recibe una función que tiene dos parámetros, resolve y reject (ambos funciones) que renombraremos para mayor facilidad resolve -> good, reject -> bad, así:

new Promise((good, bad) => {})

En el cuerpo de la función, podemos llamar libremente a estas dos funciones, good cuando el resultado es exitoso y bad cuando es fallido. Algo muy interesante de las promesas es que pueden ser llamadas en una función asíncrona, o no.

Para obtener el valor resultado de una promesa, contamos con el método then, y el método catch.

then recibe una función con un parámetro que es el valor que le pasamos al método good.

catch recibe una función con un parámetro que es el valor que le pasamos al método bad.

new Promise((good, bad) => {
  good("Nice")
}).then((param) => {
  console.log(param) // Nice
})

new Promise((good, bad) => {
  bad("Not nice")
}).catch((param) => {
  console.log(param) // Not nice
})

Pero podemos usar await si usamos la promesa dentro de una función asíncrona. El costo extra que tenemos que pagar es que para el catch, debemos usar un bloque try...catch.

const nice = await new Promise((good, bad) => {
  good("Nice")
})

try {
  await new Promise((good, bad) => {
    bad("Error")
  })
} catch (error) {
  console.log(error) // Error
}

Así, podemos usar las promesas para la función que «espera».

const value = await new Promise((good) => {
  const interval = setInterval(() => {
    APICall().then(() => {
      if (condition) {
        clearInterval(interval)
        return good("Nice") // Devolver algún valor
      }
    })
  }, waitTime)
})

console.log(value) // Nice

Por último para reutilizar esta función y no tener que escribirla en todos lados, podemos usar más funciones de alto orden.

Resultado

El resultado final es algo así:

function waitFor({ condition, callback, message = "", waitTime = 1000 } = {}) {
  return new Promise((resolve) => {
    if (condition()) return resolve(condition())
    if (message.length) console.log(message)

    const interval = setInterval(() => {
      const stop = (result) => {
        clearInterval(interval)
        return resolve(result)
      }

      callback(stop)
    }, waitTime)
  })
}

Ahora procedo a explicar la función.

Como parámetros tenemos dos funciones, una de condición y una de callback o llamada atrás, un mensaje que se mostrará en la primera iteración y un tiempo de espera.

Devolvemos la promesa en la que solo necesitamos el parámetro resolve (que llamabamos good), en la primera línea de la promesa, comprobamos que la condición se cumpla y de ser así devolvemos ese valor.

En caso contrario continuamos y procedemos a imprimir el mensaje (en caso de que exista), y luego continuamos con las repeticiones.

En la repetición, creamos la función stop para detener las repeticiones y devolver el valor necesario, y por último llamamos a la función callback con la función stop como parámetro.

Uso

Implementé un servidor de prueba para regresar un valor numérico aleatorio entre el 1 y el 10, y la siguiente función hace llamadas hasta encontrar exactamente el número 6.

import axios from "axios"
import { waitFor } from "./src/waitFor.js"

const fun = async () => {
  const url = "http://localhost:3001/number"
  const {
    data: { number },
  } = await axios.get(url)
  console.log({ number })

  const result = await waitFor({
    message: "Waiting...",
    condition: () => (number === 6 ? { number } : false),
    callback: (stop) => {
      axios.get(url).then(({ data: { number } }) => {
        if (number === 6) stop({ number })
        console.log({ number })
      })
    },
  })
}

fun()

Pero es mejor un vídeo para mostrar cómo funciona.

Adiós 👋🏽

Tweet