prefacio
Con respecto al contenido de la asincronía, es básicamente el conocimiento requerido del front-end. Este artículo hablará sobre la comprensión básica de la asincronía, comprenderá el surgimiento de la asincronía y el uso básico de las promesas de las características de js single-threaded, y espero ser útil para todos.
de un solo subproceso y asíncrono
- JS es un lenguaje de subproceso único y solo puede hacer una cosa a la vez
- Los navegadores y los nodos ya son compatibles con los procesos de inicio de JS, como Web Worker
- La representación de JS y DOM comparte el mismo hilo, porque JS puede modificar la estructura DOM
Debido a que no puede atascarse cuando se encuentra en espera (solicitud de red, tarea cronometrada), debe ser asíncrono, lo que se llama en función del formulario de devolución de llamada de la función de devolución de llamada.
Tomemos un ejemplo de asíncrono y síncrono:
Asíncrono:
primero imprima 100, luego imprima 200 un segundo después, no espere durante el proceso de impresión, primero imprima 300
console.log (100)
setTimeout ( function(){
console.log ( 200)
},1000)
console.log (300)
Sincronización:
primero imprima 100, luego aparezca 200 y luego haga clic en confirmar antes de imprimir 300
console.log (100)
alert(200)
console.log (300)
Entonces, basado en JS, es un lenguaje de subproceso único, asincrónico no bloqueará la ejecución del código y la sincronización bloqueará la ejecución del código.
Escenarios de aplicaciones asincrónicas
¿Cuándo usarías la asincronía? Es decir, cuando necesitas esperar:
- Solicitudes de red, como la carga de imágenes ajax
- Tareas programadas, como setTime
Por ejemplo, en ajax:
imprima el inicio primero, luego ejecute la solicitud de red, imprima el final mientras espera e imprima data1 después de que la solicitud sea exitosa
console.log( 'start ' )
$.get( './data1.json' , function (data1) {
console.log (data1)
})
console.log ( 'end ')
Carga de imagen:
ejecute primero el inicio, luego imprima el final mientras espera que se cargue la imagen y, finalmente, imprima cargado cuando la imagen se cargue correctamente.
console.log ('start')
let img = document.createElement( 'img' )
img.onload = function () {
console.log( 'loaded' )
}
img.src = '/xxx. png'
console.log ( 'end' )
En el temporizador:
el principio es el mismo que el anterior, se menciona anteriormente
console. log (100)
setTimeout ( function(){
console. log (200)
},1000)
console. log (300)
Uso básico de Promises
Primero veamos el código:
1. Primero defina la función getData, luego devuelva una nueva Promesa y pase otra función dentro.La función tiene dos parámetros resolver y rechazar.
2. Cuando tenga éxito, devuelva los datos a través de resolve. err se ejecuta en caso de falla. Es decir, activará .then y .catch en el siguiente caso en consecuencia
function getData(url) {
return new Promise((resolve, reject) => {
$.ajax({
url,
success (data) {
resolve (data)
},
error(err) {
reject(err)
}
})
})
}
Si no entiende, no se apresure a ver cómo usarlo
1. Primero defina tres urls
2. .then es el método de la promesa anterior, y data1 es la información obtenida a través de la url
3. return getData(url2 ) y continuar con .then, este último es el mismo que el anterior, y finalmente .catch detecta el error
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))
El .then aquí es equivalente a conectarse en serie, retrocediendo capa por capa
Al final
Este artículo es una explicación básica de la asincronía. Hay muchas cosas que se pueden investigar sobre la asincronía. En el futuro, continuaré brindándoles soluciones a las promesas escritas a mano, async, await, etc., y luego resolveré esta entrevista. Pregunta , próxima actualización! !