JS Asynchronous Advancement 3: asíncrono, espera

asíncrono/espera

• Introducción a la gramática
• Relación con Promesas
• naturaleza asincrónica
• para... de

Hay muchas preguntas de entrevista asíncronas como

• async regresa directamente, ¿qué es?
• async devuelve la promesa directamente
• No se agrega ninguna promesa después de await
• Espera, tenemos que encontrar una regla.

Introducción a la gramática

Escribe de forma asíncrona de forma síncrona.

function loadImg(src) {
    const promise = new Promise((resolve, reject) => {
        const img = document.createElement('img')
        img.onload = () => {
            resolve(img)
        }
        img.onerror = () => {
            reject(new Error(`图片加载失败 ${src}`))
        }
        img.src = src
    })
    return promise
}

async function loadImg1() {
    const src1 = 'http://www.imooc.com/static/img/index/logo_new.png'
    const img1 = await loadImg(src1)
    return img1
}

async function loadImg2() {
    const src2 = 'https://avatars3.githubusercontent.com/u/9583120'
    const img2 = await loadImg(src2)
    return img2
}

(async function () {
    // 注意：await 必须放在 async 函数中，否则会报错
    try {
        // 加载第一张图片
        const img1 = await loadImg1()
        console.log(img1)
        // 加载第二张图片
        const img2 = await loadImg2()
        console.log(img2)
    } catch (ex) {
        console.error(ex)
    }
})()
复制代码

Relación con Promesas

• Los resultados devueltos por la función asíncrona son todos objetos de Promesa (si la función no devuelve una Promesa, se encapsulará automáticamente)

async function fn2() {
    return new Promise(() => {})
}
console.log( fn2() )

async function fn1() {
    return 100
}
console.log( fn1() ) // 相当于 Promise.resolve(100)
复制代码

• await seguido de un objeto Promise: bloqueará el código subsiguiente, esperará a que el estado se resuelva, luego obtendrá el resultado y continuará con la ejecución
• await seguido de objetos que no son Promise: regresará directamente

(async function () {
    const p1 = new Promise(() => {})
    await p1
    console.log('p1') // 不会执行
})()

(async function () {
    const p2 = Promise.resolve(100)
    const res = await p2
    console.log(res) // 100
})()

(async function () {
    const res = await 100
    console.log(res) // 100
})()

(async function () {
    const p3 = Promise.reject('some err')
    const res = await p3
    console.log(res) // 不会执行
})()
复制代码

• intentar... atrapar el estado de captura rechazada

(async function () {
    const p4 = Promise.reject('some err')
    try {
        const res = await p4
        console.log(res)
    } catch (ex) {
        console.error(ex)
    }
})()
复制代码

En resumen:

• Promesa de envoltura asíncrona
• aguardar manijas Promesa de éxito
• Try... catch handles Promesa fallas

naturaleza asincrónica

await es una forma sincrónica de escritura, pero la esencia sigue siendo una llamada asincrónica.

async function async1 () {
  console.log('async1 start')
  await async2()
  console.log('async1 end') // 关键在这一步，它相当于放在 callback 中，最后执行
}

async function async2 () {
  console.log('async2')
}

console.log('script start')
async1()
console.log('script end')
复制代码

Es decir, siempre que se encuentre await, el código siguiente equivale a colocarse en la devolución de llamada.

para... de

// 定时算乘法
function multi(num) {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(num * num)
        }, 1000)
    })
}

// // 使用 forEach ，是 1s 之后打印出所有结果，即 3 个值是一起被计算出来的
// function test1 () {
//     const nums = [1, 2, 3];
//     nums.forEach(async x => {
//         const res = await multi(x);
//         console.log(res);
//     })
// }
// test1();

// 使用 for...of ，可以让计算挨个串行执行
async function test2 () {
    const nums = [1, 2, 3];
    for (let x of nums) {
        // 在 for...of 循环体的内部，遇到 await 会挨个串行计算
        const res = await multi(x)
        console.log(res)
    }
}
test2()
复制代码

Ejecutar una función asíncrona devuelve un objeto Promise 

await es equivalente a then of Promise

try... catch captura excepciones en lugar de la captura de Promise

Interpretación de la imagen superior derecha: async devuelve Promise, await devuelve luego, y un error después de await finalizará la ejecución, que se puede capturar con try... catch