prefácio
Em relação ao conteúdo de assincronia, é basicamente o conhecimento necessário do front end. Este artigo vai falar sobre o entendimento básico de assincronia, entender o surgimento de assincronia e o uso básico de promessas a partir das características do js single-thread, e esperança para ser útil a todos.
single-thread e assíncrono
- JS é uma linguagem de thread único e só pode fazer uma coisa de cada vez
- Navegadores e nodejs já suportam processos de inicialização JS, como Web Worker
- A renderização JS e DOM compartilham o mesmo encadeamento, porque JS pode modificar a estrutura DOM
Como ele não pode ficar preso quando encontra espera (solicitação de rede, tarefa cronometrada), ele precisa ser assíncrono, que é chamado com base no formulário de retorno de chamada da função de retorno de chamada.
Vamos dar um exemplo de assíncrono e síncrono:
Assíncrono:
primeiro imprima 100, depois imprima 200 um segundo depois, não espere durante o processo de impressão, primeiro imprima 300
console.log (100)
setTimeout ( function(){
console.log ( 200)
},1000)
console.log (300)
Sincronização:
primeiro imprima 100, depois pop-up 200 e clique em confirmar antes de imprimir 300
console.log (100)
alert(200)
console.log (300)
Portanto, com base em JS, é uma linguagem de thread único, assíncrona não bloqueará a execução do código e a sincronização bloqueará a execução do código
Cenários de aplicativos assíncronos
Quando você usaria assincronia? Ou seja, quando você precisa esperar:
- Solicitações de rede, como carregamento de imagem ajax
- Tarefas agendadas, como setTime
Por exemplo, em ajax:
imprima o início primeiro, depois execute a solicitação de rede, imprima o final enquanto espera e imprima os dados1 após a solicitação ser bem-sucedida
console.log( 'start ' )
$.get( './data1.json' , function (data1) {
console.log (data1)
})
console.log ( 'end ')
Carregamento de imagem:
execute o início primeiro, depois imprima o final enquanto aguarda o carregamento da imagem e, finalmente, imprima o carregamento quando a imagem for carregada com sucesso
console.log ('start')
let img = document.createElement( 'img' )
img.onload = function () {
console.log( 'loaded' )
}
img.src = '/xxx. png'
console.log ( 'end' )
No temporizador:
o princípio é o mesmo que o acima, é mencionado acima
console. log (100)
setTimeout ( function(){
console. log (200)
},1000)
console. log (300)
Uso básico de Promessas
Vejamos primeiro o código:
1. Primeiro defina a função getData, depois retorne uma nova Promise e passe outra função dentro A função tem dois parâmetros resolve e rejeita.
2. Quando bem-sucedido, retorne os dados por meio de resolução. err é executado em caso de falha. Ou seja, ele acionará .then e .catch no seguinte caso de acordo
function getData(url) {
return new Promise((resolve, reject) => {
$.ajax({
url,
success (data) {
resolve (data)
},
error(err) {
reject(err)
}
})
})
}
Se você não entendeu, não se apresse em ver como usar
1. Primeiro defina três urls
2. .then é o método na promessa acima, e data1 são os dados obtidos através da url
3. return getData(url2 ) e continue com .then, o último é o mesmo que o acima, e finalmente .catch pega o erro
const url1 = '/data1.json'
const url2 = '/ data2. json'
const url3 = '/ data3.json '
getData(url1) .then ( data1 => {
console.log (data1)
return getData(url2)
}).then(data2 => {
console.log(data2)
return getData(url3)
}).then(data3 => {
console.log (data3)
}).catch(err =>console.error(err))
O .then aqui é equivalente a conectar em série, retrocedendo camada por camada
Finalmente
Este artigo é uma explicação básica sobre assincronia. Há muitas coisas que podem ser investigadas sobre assincronia. No futuro, continuarei trazendo soluções para promessas manuscritas, assíncronas, esperas etc., e então resolverei esta entrevista. Pergunta , próxima atualização! !