¿Qué pasa si las llamadas API falsas aquí enviaron más nombres a la matriz? La función updateNames ya se llamaría antes de que se realizaran las llamadas a la API.

no se llamará a updateNames hasta que se completen ambas funciones callAPI# ; await hace que el código se bloquee (devolviendo el control al bucle de eventos) hasta que se completen ambas promesas (creadas explícitamente o implícitas cuando las funciones son async ).

Si las funciones en cuestión no devuelven promesas, ejecutándose sincrónicamente/con entusiasmo, entonces await Promise.all([...]) no tiene sentido (no hubo promesas involucradas), pero aún no hay riesgo de que se llame a updateNames antes de la callAPI# terminan las llamadas; o:

1. callAPI# devuelve una promesa (en cuyo caso, await bloquea la tarea actual hasta que se completa, devolviendo el control al bucle de eventos mientras espera), o
2. callAPI# no devuelve una promesa y todo el trabajo se realiza de inmediato

y en cualquier caso, no puede acceder a updateNames antes de que finalicen.

¿No me gustaría bloquear el tiempo de ejecución en este caso y hacerlo sincrónico?

Está bloqueando la llamada/tarea de función actual con await . Sin embargo, otras tareas programadas en el ciclo de eventos pueden ejecutarse mientras la await aún está bloqueada, y esa es la ventaja del procesamiento asíncrono. Todo lo aparentemente asíncrono en JavaScript comparte ese bucle de eventos, y si lo bloqueaste por completo (en lugar de await una llamada asíncrona), ninguno de ellos podría ejecutarse. Esto significa, por ejemplo:

1. Las llamadas setTimeout / setInterval no se activan
2. Las operaciones de dibujo de la interfaz de usuario no ocurren
3. La entrada del usuario está bloqueada
4. Todos los eventos y el código de manejo del observador se difieren

Las llamadas verdaderamente sincrónicas harían que todo eso (y más) esperara hasta que se completara la totalidad de foo . Esta es la razón por la cual el código asíncrono a veces se denomina "multitarea cooperativa"; el control nunca se arrebata a la tarea actual sin su consentimiento, como se vería en el código de subprocesos múltiples, sino que el control se devuelve al bucle de eventos de forma voluntaria (a través de await ) cada vez que una tarea se bloquea en espera de un procesamiento asíncrono o cuando se completa la tarea . Cuando la tarea asincrónica tiene un resultado, espera a que el bucle de eventos le devuelva el control y luego continúa donde lo dejó.

En su ejemplo, this.updateNames se ejecutará después de que se resuelvan sus llamadas API porque tiene la palabra clave await y es lo mismo que hacer:

 Promise.all([call1(), call2()]).then(() => { this.updateNames() })

Si tiene alguna duda, siempre puede intentar simular una llamada API con un setTimeout setTimeout y algunos console.log :

 const simulateAsync = () => { return new Promise(resolve => { setTimeout(() => { console.log("resolved"); resolve(); }, 100); }); }; async function test() { await Promise.all([simulateAsync(), simulateAsync()]); console.log("after"); } test();