yield puede considerarse que es el componente básico de await. yield toma el valor que se le ha dado y se lo pasa a la persona que llama. La persona que llama puede hacer lo que quiera con ese valor (1). Más tarde, la persona que llama puede devolver un valor al generador (a través de generator.next()) que se convierte en el resultado de la expresión yield (2), o un error que parecerá ser arrojado por la expresión yield (3).

async-await puede considerarse que utiliza yield. En (1) la persona que llama (es decir, el async-await conductor-similar para la función que ha publicado) envolverá el valor en una promesa utilizando un algoritmo similar a new Promise(r => r(value) (nota, no Promise.resolve, pero eso no es gran cosa). Entonces espera que la promesa se resuelva. Si cumple, pasa el valor cumplido de nuevo en (2). Si rechaza, arroja la razón de rechazo como un error en (3).

Así que la utilidad de async-await es esta maquinaria que utiliza yield para desenvolver el valor producido como una promesa y pasar su valor resuelto de nuevo, repitiendo hasta el la función devuelve su valor final.

¿Cuál es la diferencia entre la palabra clave await y la palabra clave yield?

La palabra clave await solo se usa en async function s, mientras que la palabra clave yield solo se usa en generator function* s. Y esas son obviamente diferentes también - una devuelve promesas, la otra devuelve generadores.

¿await siempre convierte algo en una promesa, mientras que yield no hace tal garantía?

Sí, await llamará a Promise.resolve en el valor esperado.

yield solo produce el valor fuera del generador.

Pruebe este programa de prueba que utilicé para entender await/async con promesas

Programa # 1: sin promesas no se ejecuta en secuencia

function functionA() {
    console.log('functionA called');
    setTimeout(function() {
        console.log('functionA timeout called');
        return 10;
    }, 15000);

}

function functionB(valueA) {
    console.log('functionB called');
    setTimeout(function() {
        console.log('functionB timeout called = ' + valueA);
        return 20 + valueA;
    }, 10000);
}

function functionC(valueA, valueB) {

    console.log('functionC called');
    setTimeout(function() {
        console.log('functionC timeout called = ' + valueA);
        return valueA + valueB;
    }, 10000);

}

async function executeAsyncTask() {
    const valueA = await functionA();
    const valueB = await functionB(valueA);
    return functionC(valueA, valueB);
}
console.log('program started');
executeAsyncTask().then(function(response) {
    console.log('response called = ' + response);
});
console.log('program ended');

Programa 2: con promesas:

function functionA() {
    return new Promise((resolve, reject) => {
        console.log('functionA called');
        setTimeout(function() {
            console.log('functionA timeout called');
            // return 10;
            return resolve(10);
        }, 15000);
    });   
}

function functionB(valueA) {
    return new Promise((resolve, reject) => {
        console.log('functionB called');
        setTimeout(function() {
            console.log('functionB timeout called = ' + valueA);
            return resolve(20 + valueA);
        }, 10000);

    });
}

function functionC(valueA, valueB) {
    return new Promise((resolve, reject) => {
        console.log('functionC called');
        setTimeout(function() {
            console.log('functionC timeout called = ' + valueA);
            return resolve(valueA + valueB);
        }, 10000);

    });
}

async function executeAsyncTask() {
    const valueA = await functionA();
    const valueB = await functionB(valueA);
    return functionC(valueA, valueB);
}
console.log('program started');
executeAsyncTask().then(function(response) {
    console.log('response called = ' + response);
});
console.log('program ended');

Tldr;

Utilice Async / Await el 99% de las veces sobre generadores. ¿Por qué?

1. Async / Await reemplaza directamente el flujo de trabajo más común de las cadenas de promesa permitiendo que el código sea declarado como si fuera sincrónico, simplificándolo dramáticamente.

2. Los generadores resumen el caso de uso en el que llamaría a una serie de operaciones asincrónicas que dependen unas de otras y que eventualmente estarán en un estado "hecho". El ejemplo más simple sería la búsqueda de resultados que eventualmente devuelva el último conjunto, pero solo llamaría a una página según sea necesario, no inmediatamente en sucesión.

3. Async / Await es en realidad una abstracción construida sobre generadores para facilitar el trabajo con promesas.

Ver una explicación muy detallada de Async / Await vs. Generators

En muchos sentidos, los generadores son un superconjunto de async/await. En este momento async/await tiene trazas de pila más limpias que co, la lib basada en generador similar a async/await más popular. Puede implementar su propio tipo de async / await usando generadores y agregar nuevas características, como soporte incorporado para yield en no promesas o construirlo en observables RxJS.

Así que, en resumen, los generadores le dan más flexibilidad y las bibliotecas basadas en generadores generalmente tienen más características. Pero async / await es un núcleo parte del lenguaje, está estandarizado y no cambiará bajo ti, y no necesitas una biblioteca para usarlo. Tengo una entrada de blog con más detalles sobre la diferencia entre async/await y generators.