Introdução
Funções de callback
As funções de callback são funções passadas como argumentos.
Este padrão de programação cria uma sequência de chamadas de funções, tanto na programação síncrona como na assíncrona.
Escrever uma função de callback não é diferente de escrever uma função; no entanto, a função de callback tem de corresponder à assinatura definida pela função que a chama.
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
Também podes escrever callbacks como expressão de função, expressão de função anónima ou expressão de função arrow:
applyToSquare(function squarePerimeter(side) {
return side * 4;
});
applyToSquare(function (side) {
return side * 4;
});
applyToSquare((side) => {
return side * 4;
});
Instruções
Estás a criar um novo portal online para que os teus clientes possam encomendar fruta fresca diretamente ao merceeiro.
O merceeiro tem uma API que podes usar para verificar se está disponível o inventário pretendido pelos teus clientes.
Precisas de criar uma pequena biblioteca de funções para interagir com a API do merceeiro.
1. Notifica o teu cliente quando a encomenda for bem-sucedida
O portal deve notificar o teu cliente se a encomenda foi bem-sucedida.
Define a função de callback onSuccess que será chamada se a encomenda tiver corrido bem por o merceeiro ter fruta suficiente em stock.
Esta função deve invocar a função notify importada, passando { message: 'SUCCESS' } para informar o teu cliente de que a encomenda foi bem-sucedida.
onSuccess();
// => `notify` called with `{ message: 'SUCCESS' }`
2. Notifica o teu cliente quando a encomenda não for bem-sucedida
O portal deve notificar o teu cliente se a encomenda não foi bem-sucedida.
Define a função de callback onError que será chamada se a encomenda não tiver corrido bem porque o merceeiro não tem a fruta em stock ou porque ocorreu um erro.
Esta função deve invocar a função notify importada, passando { message: 'ERROR' } para informar o teu cliente de que a encomenda não foi bem-sucedida.
onError();
// => `notify` called with `{ message: 'ERROR' }`
3. Cria um wrapper para a API que envolve a função de encomenda do merceeiro
As encomendas de fruta são feitas através da API do merceeiro, por meio da função order fornecida.
Esta função recebe três argumentos: uma consulta, que contém a variety e a quantity de fruta pedida, uma função de callback a invocar quando a encomenda é bem-sucedida, e uma função de callback a invocar quando a encomenda dá erro.
Queres isolar a tua base de código de potenciais alterações externas e decides envolver a chamada à função order numa nova função com o nome orderFromGrocer.
Implementa a função orderFromGrocer que tenta fazer uma encomenda através de uma chamada à função order da API do merceeiro, certificando-te de que passas os argumentos recebidos por orderFromGrocer para a chamada à API.
A consulta tem a forma de um 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 o tratamento das encomendas efetuadas
Os teus clientes já conseguem fazer encomendas de fruta através do teu portal, mas reparas que estás a invocar a função orderFromGrocer em muitos sítios diferentes da tua base de código, tendo sempre de passar uma query e as duas funções de callback como argumentos.
Ao veres aí uma oportunidade de refatorar o teu código, achas que seria mais simples fazer uma encomenda passando apenas a variety e a quantity de fruta necessárias.
Define a função auxiliar postOrder que recebe variety e quantity como argumentos e tenta fazer uma encomenda ao merceeiro.
postOrder('peach', 100);
// => order placed for 100 peaches
Exercício de aprendizagem
