Entendendo as funções de retorno de chamada em JavaScript: um guia para iniciantes

Os retornos de chamada são um dos primeiros conceitos que você encontrará ao aprender JavaScript, especialmente ao lidar com eventos, temporizadores e solicitações de rede. Um retorno de chamada é simplesmente uma função que você passa para outra função para que possa ser chamada posteriormente. Embora a ideia seja simples, o uso de chamadas de chamadas ajuda a escrever um código mais claro e confiável e prepará -lo para entender as promessas e assíncronas/aguardar. What You’ll Learn What callbacks are and why they’re useful The difference between synchronous and asynchronous callbacks How to write and use callbacks in everyday scenarios (events, timers, array methods) How Node.js style “error-first” callbacks work Common pitfalls (eg, callback hell, multiple calls, lost this) and how to avoid them How callbacks relate to Promises and async/await What Is a Callback? Um retorno de chamada uma função fornecida como um argumento para outra função. A função de recebimento escolhe quando executá -la. Função Greet (Nome, Formatter) {// Formatter é o retorno de chamada const formatted = Formatter (nome); console.log (`Olá, $ {formatted}!`); } função toupper (text) {return text.ToupPercase (); } cumprimenta (“Sabedoria”, toupper); // → Olá, sabedoria! Digite o modo de saída do modo de tela cheia aqui, o TOUPPER é passado para o cumprimento. Greet usa o retorno de chamada para alterar o nome antes de imprimi -lo. Os retornos de chamada síncronos vs assíncronos são executados imediatamente, durante a execução da função atual.

[1, 2, 3].MAP (função dupla (n) {// retorno de chamada síncrona retorna n * 2;}); Digite o modo de saída do modo de tela completa Esses retornos de chamada são acionados posteriormente, após a conclusão de tarefas como chamadas de rede ou tempo limite. console.log (“A”); setTimeout (() => {// console de retorno de chamada assíncrono (“b (após 1s)”);}, 1000); console.log (“c”); // Ordem: A, C, B Digite o modo de tela cheia de tela cheia Javascript depende de retornos de chamada assíncronos para apoiar sua natureza não bloqueadora no navegador e no Node.js. Padrões de retorno de chamada diários Documents.getElementById (“btn”). AddEventListener (“clique”, function handleclick () {console.log (“botão clicado!”);}); Digite os temporizadores do modo de tela cheia da tela cheia Settimeout (() => console.log (“é executado uma vez após 500ms”), 500); const id = setInterval (() => console.log (“repete a cada segundo”), 1000); // ClearInterval (ID) para parar de entrar no modo de tela cheia Sair da tela cheia MODE MODE MÉTODOS CONST NUMS = [1, 2, 3, 4, 5]; const Evens = nums.Filter (n => n % 2 === 0); // retorno de chamada decide manter ou soltar quadrados const = nums.map (n => n * 2); // O retorno de chamada transforma nums.ForEach (n => console.log (n)); // O retorno de chamada executa o efeito lateral, digite o modo de saída de tela cheia, esses embutidos tornam os padrões funcionais naturais e concisos. Node.js “Erro-Primeiro” Retornos de chamada Muitas APIs Node.js (e Bibliotecas Antigas) Use a Convenção de Erro-Primeira: O retorno de chamada recebe um erro como o primeiro argumento (se houver) e o resultado como o segundo. fs.readfile (“data.txt”, “utf8”, function (err, content) {if (err) {console.error (“falhou ao ler o arquivo:”, err); return;} console.log (“Conteúdo do arquivo:”, conteúdo);}); Digite o modo de saída do modo de tela completa Por que: o chamador pode lidar com o sucesso e a falha em um lugar. Armadilhas comuns (e como evitá -las) O código do inferno de retorno de chamada (ninho profundo) com muitos retornos de chamada aninhados geralmente é ilegível e difícil de trabalhar. getUser (id, user => {getorders (user.id, ordens => {getOrderDetails (pedidos[0]detalhes => {// … mais ninho …}); }); }); Digite o modo de saída do modo de tela cheia Evite: Extrair funções nomeadas ou mover para promessas/assíncronas/aguarde. função ondetails (detalhes) { / * … * /} função ONORDERS (Ordens) {getOrderDetails (pedidos[0]ondetails); } function onUser (usuário) {getorders (user.id, onorders); } getUser (id, onUser); Digite o modo de tela completa Sair do modo de tela completa múltipla ou ausente Invocações que um retorno de chamada pode ser chamado mais de uma vez ou não; Ambos são bugs. Evite: Guarde com bandeiras ou use utilitários únicos. function Dotask (retorno de chamada) {let chamado = false; função uma vez (err, resultado) {if (chamado) return; chamado = true; retorno de chamada (err, resultado); } // Ligue uma vez (…) exatamente uma vez em todos os caminhos de código} Digite o modo de saída do modo de tela cheia perdeu esse contexto ao passar os métodos de objeto como retornos de chamada, isso pode ser perdido. const contat = {value: 0, inc () {this.value ++; }}; setTimeout (contador.inc, 100); // ‘isto’ é indefinido. setTimeout (contador.inc.bind (contador), 100); // Correto Digite o modo de tela completa Sair do modo de tela cheia inversão de controle com retornos de chamada, você controla a mão para outra função/biblioteca. Quando um retorno de chamada se comporta inesperadamente, por exemplo, executando mais de uma vez, seu programa pode falhar. Para evitar isso, use bibliotecas confiáveis que apliquem a execução previsível. De retornos de chamada a promessas e assíncronas/aguardam ferramentas modernas como promessas e assíncronas/aguardam os retornos de chamada, oferecendo código assíncrono mais legível. // envolver um retorno de chamada em uma função de promessa ReadFilep (Path, coding = “utf8”) {retorna nova promessa ((resolver, rejeitar) => {fs.readfile (caminho, codificação, (err, dados) => {if (err) rejeitar (err); else resolver (dados);});}); } // Uso com async/wait (async () => {try {const data = aguart readFilep (“data.txt”); console.log (data);} catch (e) {console.error (e);}}); Digite o modo de saída do modo de tela completa Takeaway: retornos de chamada fornecem a base que torna as promessas de aprendizado e as síncicas/aguardam muito mais diretas. Lista de verificação de práticas recomendadas preferem retornos de chamada nomeados para obter legibilidade e reutilização Mantenha as funções de retorno de chamada pequeno e único no node.js, siga o padrão de erro de primeiro erro, verifique se os retornos de chamada são chamados exatamente uma vez em todos os caminhos de código, evitam o ninho profundo: extrações de funções ou switch para a classe de fúmulos ou a classificação de fúria. O retorno de chamada você para compartilhar comportamento, reagir a eventos e gerenciar tarefas assíncronas. Quando você aprender seus padrões centrais, evite erros comuns e veja como eles se vinculam a promessas e assíncronos/aguardam, seu javascript se tornará mais limpo, mais confiável e pronto para uso do mundo real no navegador e no Node.js. Você pode me alcançar via LinkedIn

Fonte