1.1 Função de retorno de chamada
Função de retorno de chamada: passe a função A como parâmetro para chamar outra função B, então A é a função de retorno de chamada. [Recomendado: tutorial em vídeo sobre JavaScript]
Alguns exemplos chamados retornos de chamada
function Quantos cachorros você tem(fn){
fn('um cachorro')
}função contar cães(número){
console.log(quantidade)
}
Quantos cachorros você tem (conte cachorros) // um cachorroRetorno de chamada anônimo
function Quantos cachorros você tem(fn){
fn('um cachorro')
}
Quantos cachorros você tem (function(number){console.log(number)
}) // um cachorro Exemplos comuns
Funções de retorno de chamada são usadas em jQuery e retornos de chamada anônimos são usados aqui.
$("#btn").click(function(){
console.log('clique em mim')
})1.2 Inferno de retorno de chamada (desvantagem de retorno de chamada 1)
Inferno de retorno de chamada: refere-se à situação em que os retornos de chamada estão muito aninhados, tornando o código difícil de entender.
let info = []function Quantos cachorros você tem(fn){
fn('um cachorro')
}função Quantos gatos você tem(fn){
fn('um gato')
}função sabe(quantidade,retorno de chamada){
info.push(quantidade)
console.log(info) if(retorno de chamada){
ligar de volta()
}
}//Comece a chamar. Se houver mais algumas camadas do que isso, será difícil entender quantos cães você tem (function(number of dogs){
console.log(número de cachorros)
Entendi(número de cachorros, function(){
Quantos gatos você tem(function(número de gatos){
console.log(número de gatos)
Entendi (número de gatos)
})
})
})1.3 Como resolver o problema sem usar o Promise
Use funções nomeadas em vez de funções anônimas
let info = []function Quantos cachorros você tem(fn){
fn('um cachorro')
}função Quantos gatos você tem(fn){
fn('um gato')
}função sabe(quantidade,retorno de chamada){
info.push(quantidade)
console.log(info) if(retorno de chamada){
ligar de volta()
}
}função informa o número de gatos (número de gatos){
console.log(número de gatos)
Entendi (número de gatos)
}função continuar contando(){
Quantos gatos você tem (diga o número de gatos)
}função informa o número de cachorros (número de cachorros){
console.log(número de cachorros)
Entendi (número de cachorros, continue contando)
}
Quantos cachorros você tem (diga o número de cachorros) // Não parece estar muito melhor. . .1.4 Os métodos de retorno de chamada são diferentes e precisam ser lembrados separadamente (desvantagem de retorno de chamada 2)
readFile('C:\1.txt',function (error, data) { // retorno de chamada no método de arquivo de leitura node.js if(error) {
console.log('sucesso')
console.log(dados.toString())
} outro {
console.log('Falha ao ler o arquivo')
}
})
$.ajax({ //Callback url:'/2.txt' no método ajax em jQuery
sucesso: function(resposta) {
console.log('sucesso')
},
erro: função(){
console.log('falha')
}
})As promessas são uma solução para programação assíncrona que é mais razoável e poderosa do que as soluções tradicionais - retornos de chamada e eventos. Foi proposto e implementado pela primeira vez pela comunidade ES6, escreveu-o no padrão de linguagem, unificou seu uso e forneceu objetos Promise nativamente.
3.1 Princípio de implementação
ES6 estipula que o objeto Promise é um construtor usado para gerar instâncias Promise. Ao retornar uma instância do objeto Promise dentro da função, você pode usar as propriedades e métodos do Promise para a próxima etapa.
função nome da função(){ return new Promise(function(resolver, rejeitar) {
// ... algum código if (/* operação assíncrona bem-sucedida */){
resolve(value); // Chamado quando a operação assíncrona é bem-sucedida e passa o resultado como parâmetro } else {
rejeitar(error); // Chamado quando ocorre falha assíncrona, passando o erro como parâmetro }
})
}3.2 Lógica de chamada
Nem S1 nem E1 relataram um erro, execute S2 (resolva a execução, o sistema pensa que foi feito e nenhum erro é relatado)
Se S1 ou E1 reportar um erro, execute E2 (rejeite a execução, o sistema pensa que não foi feito e reporta um erro)
Entrada front-end (vue) para curso de domínio: entre no aprendizado
4.1 Propriedades e métodos de promessa
propriedade
Promise.prototype representa o método protótipo do construtor Promise
Promessa.prototype.then()
Devolva uma promessa. Requer no máximo dois parâmetros: as funções de retorno de chamada de sucesso e falha do Promise.
Promessa.prototype.catch()
Devolva uma promessa e lide com a rejeição. Equivalente a Promise.prototype.then(indefinido, onRejected)
Promessa.prototype.finalmente()
O método finalmente() retorna uma promessa. Depois de executar then() e catch(), a função de retorno de chamada especificada por finalmente será executada. Evite a situação em que a mesma instrução precise ser escrita uma vez em then() e catch().
Promessa.all(iterável)
Retorna uma instância Promise Depois que todas as promessas nos parâmetros iteráveis forem resolvidas, o retorno de chamada conclui a resolução.
Promise.race(iterável)
Retorna uma promessa, acompanhada do valor de retorno do objeto de promessa ou do motivo do erro para rejeição, desde que exista um objeto de promessa no iterável que "resolva" ou "rejeite".
Promessa.resolver()
Retorna um objeto Promise que resolve com o valor fornecido. Mas se esse valor for um thenable (ou seja, com um método then), a promessa retornada "seguirá" o objeto thenable e adotará seu estado final (referindo-se a resolvido/rejeitado/pendente/liquidado se o próprio valor recebido for); um objeto de promessa, então o objeto é retornado como o valor de retorno do método Promise.resolve, caso contrário, o objeto de promessa é retornado com este valor como o status de sucesso;
Promessa.rejeitar()
Retorna um objeto Promise com o parâmetro motivo da rejeição.
4.2 Reescreva o exemplo em callback hell no formato Promise
Você pode ver que depois de usar o Promise, a lógica se torna muito intuitiva e escrita de forma mais completa.
Quando Promise está aninhado em Promise, ou seja, quando Promise está encadeado - preste atenção à falha na transmissão de informações. Quando usamos a cadeia Promise, se cada etapa requer dados da etapa anterior, os parâmetros precisam ser passados com sucesso pela resolução. . Parâmetros, se falharem, passam parâmetros através de rejeição. Se você esquecer de passar parâmetros, não obterá o resultado desejado.
resolver retorna dados bem-sucedidos para o próximo retorno de chamada
Reject retorna dados com falha para o próximo retorno de chamada.
Passe um parâmetro para resolver aqui e altere-o para um exemplo de falha. Não passe parâmetros para rejeitar primeiro. Se falhar, o próximo retorno de chamada não obterá os dados.
Passe parâmetros para rejeitar
Podemos ver que mesmo que o retorno de chamada de falha seja passado, o próximo retorno de chamada de sucesso ainda será executado. Como não é conhecido () retorna indefinido por padrão, é equivalente à falha ter sido processada. o próximo retorno de chamada será implementado.
Altere para o esperado, ou seja, não será chamado caso falhe.
Forma abreviada para não invocar o fracasso
Depois que a situação acima for executada, o retorno de chamada de sucesso em .then (exceto para cães) não será executado. Vamos adicionar um retorno de chamada de falha para ver.
Você também pode retornar resolução para que retornos de chamada subsequentes bem-sucedidos possam ser executados.
4.3 Aplicação
Carregar a imagem grava o carregamento da imagem como uma promessa. Assim que o carregamento for concluído, o estado da promessa muda.
const preloadImage = função (caminho) {
return nova Promessa(função (resolver, rejeitar) {
imagem const = nova imagem();
imagem.onload = resolver;
imagem.onerror = rejeitar;
imagem.src = caminho;
});
};A combinação da função Generator e Promise (para detalhes, veja o link de referência, tutorial de Ruan Yifeng)
5.1 aguardar
caso de sucesso 
Use try catch em caso de falha
Use await com try catch, que é mais completo.
Objetos de promessa podem ser usados para transformar funções comuns em formulários de retorno de promessa para resolver o problema do inferno de retorno de chamada.
Entenda a lógica de chamada de sucesso e fracasso do Promise e possa ajustá-la com flexibilidade.
Compreenda o conhecimento central, use-o primeiro e integre e absorva lentamente o conhecimento.
O texto acima é o conteúdo detalhado do exemplo de análise do princípio e uso do ES6 Promise!
