Escreva na frente
Declaração
Antes de tudo, este blog é mais subjetivo e representa apenas opiniões pessoais.Se você tem opiniões diferentes ou acha que este artigo está errado, você pode deixar uma mensagem ou adicionar meu WeChat 15011177648
Habilidades básicas necessárias
assíncrono, aguardar os novos recursos es2017 (ES8), mas também a promessa de açúcar sintático, quer aprender assíncrona, esperam, então você precisa entender a promessa de uso
portal: Promise Use
Para a realização do princípio da Promise, você pode ir e ver o meu blog anterior
Portal: Princípio da promessa
Uma breve introdução ao assíncrono e à espera
- Uma função modificada pela palavra-chave assíncrona deve retornar um objeto de promessa
<script>
(async function getPromise() {
let pro = ajax();
console.log(pro)
})()
async function ajax() {
return 1
}
</script>
- Se essa função for modificada por aguardar novamente, retorne o PromiseValue da promessa
<script>
(async function getPromise() {
let pro = await ajax();
console.log(pro)
})()
async function ajax() {
return 1
}
</script>
- assíncrono e aguardar são o açúcar sintático de uma promessa, as duas maneiras a seguir são iguais
<script>
(async function () {
await request();
console.log('后续处理')
})()
async function request() {
return new Promise((resolve, reject) => {
ajax('', () => {
resolve()
console.log('请求完成')
})
})
}
function ajax(remark, cb = () => { }) {
$.ajax({
url: `https://developer.duyiedu.com/edu/groupChat/getMsgList?remark=${remark}`,
method: 'get',
success: cb
})
}
</script>
<script>
(function () {
new Promise((resolve, reject) => {
ajax('', () => {
resolve()
console.log('请求完成')
})
}).then(() => {
console.log('后续处理');
})
})()
function ajax(remark, cb = () => { }) {
$.ajax({
url: `https://developer.duyiedu.com/edu/groupChat/getMsgList?remark=${remark}`,
method: 'get',
success: cb
})
}
</script>
Com assíncrono e aguardando, o processamento assíncrono se torna mais elegante e fácil de ler
Assíncrono e aguardar são diferentes dos métodos de processamento assíncrono anteriores
Eu acho que a maior diferença entre o método de processamento assíncrono de assíncrono e o método de processamento assíncrono anterior é a posição da função de retorno de chamada.
No esquema de processamento assíncrono anterior, a função de retorno de chamada foi passada para a função de processamento assíncrono como parâmetro
. Ao usar o assíncrono, a função de retorno de chamada se parece diretamente com A função síncrona é escrita na função anterior e, em
seguida, o método de chamada anterior se torna uma chamada tradicional.Assíncrona e aguardar são chamadas de chamadas assíncronas
Exemplo: Chamada Tradicional
<body>
<div>
<span>两个接口依次调用：</span>
<button id="twoAPI">click me</button>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$('#twoAPI').click(() => {
test1()
})
function test1() {
ajax('no1', () => {
test2()
})
}
function test2() {
ajax('no2')
}
function ajax(remark, cb = () => { }) {
$.ajax({
url: `https://developer.duyiedu.com/edu/groupChat/getMsgList?remark=${remark}`,
method: 'get',
success: cb
})
}
</script>
Tempo de chamada da interface:
chamada assíncrona
<body>
<div>
<span>两个接口依次调用：</span>
<button id="twoAPI">click me</button>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$('#twoAPI').click(async function() {
await test1();
test2()
})
function test1() {
return new Promise((resolve, reject) => {
ajax('no1', () => resolve())
})
}
function test2() {
return new Promise((resolve, reject) => {
ajax('no2', () => resolve())
})
}
function ajax(remark, cb = () => {}) {
$.ajax({
url: `https://developer.duyiedu.com/edu/groupChat/getMsgList?remark=${remark}`,
method: 'get',
success: cb
})
}
</script>
O tempo de invocação da interface é
mostrado na figura.Pode- se ver que os resultados dos dois métodos são os mesmos e as duas interfaces são chamadas em seqüência.Quais são as críticas ao método tradicional? Como é resolvida a palavra-chave assíncrona?
Quais são as críticas aos pedidos assíncronos tradicionais? Como resolver async?
Descentralização lógica
Por exemplo,
existe uma lógica que precisa chamar três interfaces em sequência (a ação de ir trabalhar precisa se levantar, vestir roupas e sair por vez)
Escrita tradicional
<body>
<div>
<span>上班</span>
<button id="GoToWork">click me</button>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$('#GoToWork').click(() => {
getUp()
})
function getUp() {
ajax('getUp', () => {
getDressed()
})
}
function getDressed() {
ajax('getDressed', () => {
goOut()
})
}
function goOut() {
ajax('getDressed', () => {
console.log('上班去了')
})
}
function ajax(remark, cb = () => { }) {
$.ajax({
url: `https://developer.duyiedu.com/edu/groupChat/getMsgList?remark=${remark}`,
method: 'get',
success: cb
})
}
</script>
Quando quisermos ler essa lógica mais tarde, primeiro examinaremos a função de evento click do botão e veremos que precisamos nos
levantar antes de começar a trabalhar, mas termina quando nos levantamos? Não necessariamente, precisamos encontrar a função de despertar para ver se a função de despertar faz mais alguma coisa e, em seguida, descobriremos que a função de despertar também chama a função de vestir,
mas ela terminou depois de colocar as roupas? Não necessariamente, precisamos encontrar a função de curativo para ver se a função de curativo faz outras coisas, e então descobriremos que a função de curativo também chama a função de saída,
mas ela termina quando saímos? Não necessariamente, precisamos encontrar a função de saída, verificar se a função de saída faz mais alguma coisa e, finalmente, descobrir que, após a conclusão da chamada da função de saída, a frase "Ir para o trabalho" é impressa e agora está realmente concluída.
Nesse caso, três coisas são feitas depois que um botão é clicado. A lógica dessas três coisas é dispersa. Se você a ler, precisará encontrá-las uma a uma. É mais problemático. No exemplo atual, o código ainda é relativamente pequeno. No caso de exibição, O número de linhas de código pode ser dezenas ou centenas de linhas, e funções e funções não são necessariamente próximas umas das outras, portanto, em casos reais, é mais difícil ler do que isso.
Combinado com o sistema POS: no sistema de caixa registradora que nosso grupo está desenvolvendo, existem muitos exemplos. Por exemplo, uma ordem de venda em lote é emitida por uma ordem de venda em lote. No momento, uma ordem de venda em lote foi selecionada. Quero substituir a ordem de venda em lote. , Você precisa chamar a tabela temporária vazia por vez, associar o novo formulário de aprovação e obter as informações da tabela temporária em três etapas
assíncrono
Em seguida, use async para transformar essa lógica
<body>
<div>
<span>上班</span>
<button id="GoToWork">click me</button>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$('#GoToWork').click(async () => {
await getUp()
await getDressed()
await goOut()
console.log('上班去了')
})
function getUp() {
return new Promise((resolve) => {
ajax('getUp', () => resolve())
})
}
function getDressed() {
return new Promise((resolve) => {
ajax('getDressed', () => resolve())
})
}
function goOut() {
return new Promise((resolve) => {
ajax('goOut', () => resolve())
})
}
function ajax(remark, cb = () => { }) {
$.ajax({
url: `https://developer.duyiedu.com/edu/groupChat/getMsgList?remark=${remark}`,
method: 'get',
success: cb
})
}
</script>
Após essa transformação, quando olharmos novamente para a lógica, precisamos apenas olhar para o evento click para saber exatamente o que aconteceu
depois de clicar no botão.A lógica e a ordem são claras à primeira vista, economizando muito tempo para encontrar o código.
Não atende ao princípio da responsabilidade única, há um problema com a semântica
Escrita tradicional
Ou o exemplo acima, vamos dar uma olhada no método getUp.No nome da função, esse método é para se levantar, mas o que exatamente esse método faz?
Primeiro chame o método de levantar, depois chame o método de vestir, depois chame o método e, finalmente, imprima uma frase "Vá para o trabalho".
Portanto, de acordo com a semântica, esse método deve ser chamado de getUpAndGetDressedAndGoOut
porque esse método faz essas três coisas em vez de uma coisa: por
outro lado, se é chamado de getUp, deve fazer apenas uma coisa para se levantar, ou seja, se levantar, mas faz Mais de uma coisa é mais contraditória
assíncrono
O método de gravação assíncrona basicamente resolve esse problema, os métodos são originalmente separados e um método faz apenas uma coisa
Inflexível
No método tradicional, chamar getUp significa chamar o método de vestir e sair após a conclusão de getUp.E se quisermos apenas chamar o método de ativação?
Escrita tradicional
Existem duas soluções
- Adicionar parâmetros
<body>
<div>
<span>上班</span>
<button id="GoToWork">click me</button>
</div>
<div>
<span>只是起床</span>
<button id="onlyGetUp">click me</button>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$('#GoToWork').click(() => {
getUp(true)
})
$('#onlyGetUp').click(() => {
getUp(false)
})
function getUp(flag) {
ajax('getUp', () => {
flag && getDressed()
})
}
function getDressed() {
ajax('getDressed', () => {
goOut()
})
}
function goOut() {
ajax('getDressed', () => {
console.log('上班去了')
})
}
function ajax(remark, cb = () => { }) {
$.ajax({
url: `https://developer.duyiedu.com/edu/groupChat/getMsgList?remark=${remark}`,
method: 'get',
success: cb
})
}
</script>
Você pode determinar se deseja executar o processamento subsequente adicionando parâmetros, mas isso aumentará a complexidade do código
- Reescrever uma função
<body>
<div>
<span>上班</span>
<button id="GoToWork">click me</button>
</div>
<div>
<span>只是起床</span>
<button id="onlyGetUp">click me</button>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$('#GoToWork').click(() => {
getUp()
})
$('#onlyGetUp').click(() => {
onlyGetUp()
})
function onlyGetUp() {
ajax('getUp')
}
function getUp() {
ajax('getUp', () => {
getDressed()
})
}
function getDressed() {
ajax('getDressed', () => {
goOut()
})
}
function goOut() {
ajax('getDressed', () => {
console.log('上班去了')
})
}
function ajax(remark, cb = () => { }) {
$.ajax({
url: `https://developer.duyiedu.com/edu/groupChat/getMsgList?remark=${remark}`,
method: 'get',
success: cb
})
}
</script>
Isso também pode atender a esses requisitos, mas adicionar um novo método aumentará a redundância desnecessária.
assíncrono
De fato, no método assíncrono, o método é como um componente, chamado quando necessário e não chamado quando não é necessário.Neste trabalho, desde que não chame outros métodos
<body>
<div>
<span>上班</span>
<button id="GoToWork">click me</button>
</div>
<div>
<span>只是起床</span>
<button id="onlyGetUp">click me</button>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$('#GoToWork').click(async () => {
await getUp()
await getDressed()
await goOut()
console.log('上班去了')
})
$('#onlyGetUp').click(async () => {
await getUp()
})
function getUp() {
return new Promise((resolve) => {
ajax('getUp', () => resolve())
})
}
function getDressed() {
return new Promise((resolve) => {
ajax('getDressed', () => resolve())
})
}
function goOut() {
return new Promise((resolve) => {
ajax('goOut', () => resolve())
})
}
function ajax(remark, cb = () => { }) {
$.ajax({
url: `https://developer.duyiedu.com/edu/groupChat/getMsgList?remark=${remark}`,
method: 'get',
success: cb
})
}
</script>
Não adicione parâmetros nem reescreva métodos
Quando as duas interfaces são chamadas ao mesmo tempo, e as operações subsequentes são concluídas após a conclusão de ambas.
Exemplo: Mergulhe os pés e beba leite antes de ir para a cama enquanto vai para a cama
Escrita tradicional
O método de gravação tradicional é mais árduo ao executar esse tipo de processamento.Toda vez que uma interface é chamada, é necessário julgar se outras interfaces foram concluídas.O
método de gravação é o seguinte
<body>
<div>
<span>睡觉</span>
<button id="sleep">click me</button>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$('#sleep').click(() => {
drinkMilk()
footBath()
})
let resultArr = [null, null]
function drinkMilk() {
ajax('drinkMilk', (res) => {
resultArr[0] = res;
for (let i = 0; i < resultArr.length; i++) {
if (!resultArr[i]) {
return
}
}
goToBed()
})
}
function footBath() {
ajax('footBath', (res) => {
resultArr[1] = res;
for (let i = 0; i < resultArr.length; i++) {
if (!resultArr[i]) {
return
}
}
goToBed()
})
}
function goToBed() {
ajax('goOut')
}
function ajax(remark, cb = () => { }) {
$.ajax({
url: `https://developer.duyiedu.com/edu/groupChat/getMsgList?remark=${remark}`,
method: 'get',
success: cb
})
}
</script>
O tempo de solicitação é conforme mostrado na figura.No
entanto, se você deseja perseguir uma série de TV antes de ir para a cama, precisa adicionar uma nova função.O retorno de chamada da nova função também precisa fazer um loop do resultadoArr.Neste caso, causa muita redundância.
assíncrono
assíncrono pode ser implementado usando o método estático do Promise
<body>
<div>
<span>睡觉</span>
<button id="sleep">click me</button>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$('#sleep').click(() => {
Promise.all([drinkMilk(), footBath()]).then(() => {
goToBed()
})
})
function drinkMilk() {
return new Promise((resolve) => {
ajax('drinkMilk', (res) => {
resolve(res)
})
})
}
function footBath() {
return new Promise((resolve) => {
ajax('footBath', (res) => {
resolve(res)
})
})
}
function goToBed() {
ajax('goOut')
}
function ajax(remark, cb = () => { }) {
$.ajax({
url: `https://developer.duyiedu.com/edu/groupChat/getMsgList?remark=${remark}`,
method: 'get',
success: cb
})
}
</script>
Dessa forma, não é necessário percorrer a lista de resultados do loop
e o sistema de POS sempre que a solicitação for concluída : no sistema de caixa registradora do POS que nosso grupo está desenvolvendo, é assim que se imprime o pequeno tíquete. Antes de executar o método de impressão, é necessário solicitar as informações e a configuração do pedido, Imprimir após a conclusão de ambas as solicitações
Sumário
Em resumo, desde que a gravação de async não altere o nome da interface e a lógica de processamento subsequente, não há necessidade de alterar a função que iniciou a solicitação. Nas chamadas tradicionais, há muitas lógicas que não estão relacionadas à interface que afetarão a interface.
Ao mesmo tempo, o assíncrono pode operar de forma assíncrona. Torna-se uma operação semelhante à sincronização, o que reduz a dificuldade de ler o código e também resolve o problema do inferno de retorno de chamada
Portanto, não é demais dizer que a espera assíncrona é a melhor solução de processamento assíncrono
OK, este é todo o conteúdo deste blog. Se você gosta do conteúdo do meu blog, curta e preste atenção, nós o veremos no próximo blog
