저는이 환상적인 기사« Generators »를 읽고 있었는데 ,이 함수는 제너레이터 함수를 처리하기위한 도우미 함수 인이 함수를 명확하게 강조합니다.

function async(makeGenerator){
  return function () {
    var generator = makeGenerator.apply(this, arguments);

    function handle(result){
      // result => { done: [Boolean], value: [Object] }
      if (result.done) return Promise.resolve(result.value);

      return Promise.resolve(result.value).then(function (res){
        return handle(generator.next(res));
      }, function (err){
        return handle(generator.throw(err));
      });
    }

    try {
      return handle(generator.next());
    } catch (ex) {
      return Promise.reject(ex);
    }
  }
}

나는 async키워드가 async/ 로 구현 되는 방식과 다소 비슷하다고 가정 await합니다. 그렇다면 문제는 await키워드와 키워드 의 차이점이 도대체 무엇 yield일까요? 않는 await반면 항상 약속에 뭔가를 돌려 yield그러한 보증을하지 않습니다? 그것은 내 최선의 추측입니다!

당신은 또한 방법을 볼 수 있습니다 async/ await유사하다 yield그는 '부활'기능을 설명하는이 문서의 발전기 기능 비동기 ES7을 .

yield의 빌딩 블록으로 간주 될 수 있습니다 await. yield주어진 값을 받아 호출자에게 전달합니다. 그런 다음 호출자는 해당 값 (1)으로 원하는 모든 작업을 수행 할 수 있습니다. 나중에 호출자는 (2) 표현식 generator.next()의 결과가되는 생성자 (를 통해 )에 값을 다시 제공 yield하거나 yield(3) 표현식에 의해 throw되는 것처럼 보이는 오류를 제공 할 수 있습니다 .

async- await를 사용하는 것으로 간주 할 수 있습니다 yield. (즉, (1) 호출자에 async- await드라이버 - 당신이 게시 된 기능과 유사)와 유사한 알고리즘을 사용하여 약속의 값을 바꿈됩니다 new Promise(r => r(value)(참고, 하지 Promise.resolve ,하지만 그건 큰 문제가 아니다). 그런 다음 약속이 해결 될 때까지 기다립니다. 충족되면 충족 된 값을 (2)로 다시 전달합니다. 거부하면 (3)에서 오류로 거부 사유를 던집니다.

따라서 async- 의 유용성은 산출 된 값을 약속으로 풀고 해결 된 값을 다시 전달하여 함수가 최종 값을 반환 할 때까지 반복 await하는 데 사용 yield하는 이 기계입니다 .

글쎄요, async/ await와 발전기 사이에는 매우 밀접한 관계가 있다는 것이 밝혀졌습니다 . 그리고 저는 믿습니다 async/가 await항상 발전기에 건설 될 것입니다. Babel이 변환하는 방식을 살펴보면 async/ await:

Babel은 다음을 수행합니다.

this.it('is a test', async function () {

    const foo = await 3;
    const bar = await new Promise(resolve => resolve('7'));
    const baz = bar * foo;
    console.log(baz);

});

그리고 이것을 이렇게

function _asyncToGenerator(fn) {
    return function () {
        var gen = fn.apply(this, arguments);
        return new Promise(function (resolve, reject) {
            function step(key, arg) {
                try {
                    var info = gen[key](arg);
                    var value = info.value;
                } catch (error) {
                    reject(error);
                    return;
                }
                if (info.done) {
                    resolve(value);
                } else {
                    return Promise.resolve(value).then(function (value) {
                        return step("next", value);
                    }, function (err) {
                        return step("throw", err);
                    });
                }
            }

            return step("next");
        });
    };
}


this.it('is a test', _asyncToGenerator(function* () {   // << now it's a generator

    const foo = yield 3;    //  <<< now it's yield, not await
    const bar = yield new Promise(resolve => resolve(7));
    const baz = bar * foo;
    console.log(baz);

}));

당신은 수학을합니다.

이것은 async키워드가 단지 그 래퍼 함수 인 것처럼 보이게 하지만, 만약 그렇다면 await그냥으로 바뀌면 yield나중에 네이티브가 될 때 그림에 조금 더 많은 것이있을 것입니다.

이에 대한 자세한 설명은 https://www.promisejs.org/generators/ 에서 확인할 수 있습니다.

도대체 await키워드와 키워드 의 차이점은 무엇 yield입니까?

await키워드 만 사용되는 async function동안의 yield키워드가 발생에서만 사용되는 function*의. 그리고 그것들도 분명히 다릅니다. 하나는 약속을 반환하고 다른 하나는 생성자를 반환합니다.

않는 await반면 항상 약속에 뭔가를 돌려 yield그러한 보증을하지 않습니다?

예, 기다린 값을 await호출 Promise.resolve합니다.

yield 생성기 외부의 값을 산출합니다.

tl; dr

사용 async/ await발전기를 통해 시간의 99 %. 왜?

1. async/ await는 가장 일반적인 promise 체인 워크 플로를 직접 대체하여 코드가 동기식 인 것처럼 선언 할 수 있도록하여 대폭 단순화합니다.

2. 생성기는 서로 의존하고 결국 "완료"상태가되는 일련의 비동기 작업을 호출하는 사용 사례를 추상화합니다. 가장 간단한 예는 결국 마지막 세트를 반환하는 결과를 통해 페이징하는 것이지만 연속적으로 즉시 호출하지 않고 필요한 경우에만 페이지를 호출합니다.

3. async/ await사실은 promise 작업을 더 쉽게하기 위해 생성기 위에 구축 된 추상화입니다.

Async / Await vs. Generators에 대한 자세한 설명보기

내가 이해하는 데 사용되는이 테스트 프로그램을 시도 await/ async약속합니다.

프로그램 # 1 : 약속없이 순서대로 실행되지 않음

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');

프로그램 # 2 : 약속

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');

여러면에서 생성기는 async / await의 상위 집합입니다. 현재 async / await는 가장 인기있는 async / await 유사 생성기 기반 lib 인 co 보다 더 깨끗한 스택 추적을 제공 합니다. 생성기를 사용하여 고유 한 async / await를 구현 yield하고 비약 속에 대한 내장 지원 또는 RxJS Observable에 빌드하는 것과 같은 새로운 기능을 추가 할 수 있습니다.

즉, 제너레이터는 더 많은 유연성을 제공하며 제너레이터 기반 라이브러리는 일반적으로 더 많은 기능을 제공합니다. 그러나 async / await는 언어의 핵심 부분이며 표준화되어 있으며 변경되지 않으며 사용하는 데 라이브러리가 필요하지 않습니다. async / await 및 generators의 차이점에 대한 자세한 내용 이 포함 된 블로그 게시물 이 있습니다.