Introducción
Funciones callback
Las funciones callback son funciones que se pasan como argumentos.
Este patrón de programación crea una secuencia de llamadas a funciones, tanto en la programación síncrona como en la asíncrona.
Escribir una función callback no es distinto de escribir una función; sin embargo, la función callback debe coincidir con la firma que define la función que la llama.
const squareLength = 5;
// Caller function takes a callback function
function applyToSquare(callback) {
return callback(squareLength);
}
// Callback must expect the possible argument from the calling function
function areaOfSquare(number) {
return number * number;
}
applyToSquare(areaOfSquare); // => 25
También puedes escribir los callbacks como una expresión de función, una expresión de función anónima o una expresión de función flecha:
applyToSquare(function squarePerimeter(side) {
return side * 4;
});
applyToSquare(function (side) {
return side * 4;
});
applyToSquare((side) => {
return side * 4;
});
Instrucciones
Estás creando un nuevo portal en línea para que tus clientes pidan su fruta fresca directamente del tendero.
El tendero tiene una API que puedes usar para ver si tiene el inventario que tus clientes desean.
Necesitas crear una pequeña biblioteca de funciones para interactuar con la API del tendero.
1. Notifica a tu cliente cuando su pedido fue exitoso
El portal debe notificar a tu cliente si su pedido fue exitoso.
Define la función de callback onSuccess que se llamará si el pedido fue exitoso porque el tendero tenía suficiente fruta en existencia.
Esta función debe invocar la función notify importada, pasando { message: 'SUCCESS' } para avisarle a tu cliente que su pedido fue exitoso.
onSuccess();
// => `notify` called with `{ message: 'SUCCESS' }`
2. Notifica a tu cliente cuando su pedido no fue exitoso
El portal debe notificar a tu cliente si su pedido no tuvo éxito.
Define la función de callback onError que se llamará si el pedido no tuvo éxito porque el tendero no tiene la fruta en existencia o porque hubo un error.
Esta función debe invocar la función notify importada, pasando { message: 'ERROR' } para avisarle a tu cliente que su pedido no tuvo éxito.
onError();
// => `notify` called with `{ message: 'ERROR' }`
3. Crea un envoltorio de API para envolver la función de pedido de la API del tendero
Los pedidos de fruta se hacen a través de la API del tendero mediante la función order que se te proporciona.
Esta función recibe tres argumentos: una consulta, que contiene la variety y la quantity de la fruta solicitada, una función de callback que se invoca cuando el pedido tiene éxito, y una función de callback que se invoca cuando el pedido encuentra un error.
Quieres aislar tu base de código de posibles cambios externos y decides envolver la llamada a la función order dentro de una nueva función llamada orderFromGrocer.
Implementa la función orderFromGrocer que intenta hacer un pedido mediante una llamada a la función order de la API del tendero, asegurándote de reenviar los argumentos que se pasan a orderFromGrocer a la llamada a la API.
La consulta tiene la forma de un objeto:
const query = {
variety: string,
quantity: number,
};
orderFromGrocer(
{ variety: 'pear', quantity: 12 },
exampleSuccessCallback,
exampleErrorCallback,
);
// => `order` was called with the query and the callbacks
4. Simplifica el manejo de los pedidos realizados
Tus clientes ya pueden hacer pedidos de fruta a través de tu portal, sin embargo, notas que invocas la función orderFromGrocer en muchos lugares distintos de tu base de código, y cada vez tienes que pasar una query y las dos funciones callback como argumentos.
Al ver una oportunidad para refactorizar tu código, piensas que sería más simple si pudieras hacer un pedido con solo pasar la variety y la quantity de la fruta requerida.
Define la función auxiliar postOrder que toma variety y quantity como argumentos e intenta hacer un pedido con el tendero.
postOrder('peach', 100);
// => order placed for 100 peaches
Ejercicio de aprendizaje
