ES6 지식을 정리한 ----async---- 비동기 트랙터

asyncIterator

ES2018은'Async Iterator'(Async Iterator)를 도입하여 비동기 조작에 원생적인 범람기 인터페이스를 제공한다. 즉, value과 done이라는 두 속성은 모두 비동기적으로 만들어진다.
비동기 트랙터의 가장 큰 문법적 특징은 바로 트랙터의 next 방법을 호출하고 되돌아오는 것은Promise 대상이다.

asyncIterator
.next()
.then(
  ({ value, done }) => /* ... */
);

대상의 비동기 트랙터 인터페이스는 Symbol.asyncIterator 속성에 배치됩니다.어떤 대상이든 Symbol.asyncIterator 속성이 값만 있으면 다른 단계로 옮겨다녀야 한다는 뜻이다.

const asyncIterable = createAsyncIterable(['a', 'b']);
const asyncIterator = asyncIterable[Symbol.asyncIterator]();

asyncIterator
.next()
.then(iterResult1 => {
  console.log(iterResult1); // { value: 'a', done: false }
  return asyncIterator.next();
})
.then(iterResult2 => {
  console.log(iterResult2); // { value: 'b', done: false }
  return asyncIterator.next();
})
.then(iterResult3 => {
  console.log(iterResult3); // { value: undefined, done: true }
});

비동기 트랙터와 동기 트랙터의 최종 행위는 일치하지만, 먼저 Promise 대상을 되돌려 중개로 삼을 뿐이다.
비동기 트랙터의 next 방법 때문에 Promise 대상을 되돌려줍니다.따라서 await 명령 뒤에 놓을 수 있다.

async function f() {
  const asyncIterable = createAsyncIterable(['a', 'b']);
  const asyncIterator = asyncIterable[Symbol.asyncIterator]();
  console.log(await asyncIterator.next());
  // { value: 'a', done: false }
  console.log(await asyncIterator.next());
  // { value: 'b', done: false }
  console.log(await asyncIterator.next());
  // { value: undefined, done: true }
}

비동기 트랙터의 next 방법은 연속적으로 호출할 수 있으며, 이전에 발생한 Promise 대상 resolve 이후에 호출할 필요가 없다.이 경우 next 방법이 누적되어 한 걸음 한 걸음 자동으로 운행된다.다음은 하나의 예로 모든 next 방법을 Promise.all 방법에 넣는다.

const asyncIterable = createAsyncIterable(['a', 'b']);
const asyncIterator = asyncIterable[Symbol.asyncIterator]();
const [{value: v1}, {value: v2}] = await Promise.all([
  asyncIterator.next(), asyncIterator.next()
]);

console.log(v1, v2); // a b

또 다른 방법은 모든 next 방법을 한꺼번에 호출한 다음에 await의 마지막 조작을 하는 것이다.

async function runner() {
  const writer = openFile('someFile.txt');
  writer.next('hello');
  writer.next('world');
  await writer.return();
}

runner();

for await...of

비동기식 Iterator 인터페이스를 스트리밍하는 데 사용됩니다.

async function f() {
  for await (const x of createAsyncIterable(['a', 'b'])) {
    console.log(x);
  }
}
// a
// b

for await...of 순환의 한 용도로 asyncIterable 조작을 배치한 비동기 인터페이스로 이 순환에 직접 넣을 수 있다.next 방법으로 되돌아오는 Promise 대상이 reject for await...of에 의해 잘못 보고되면 try...catch으로 포착된다.for await...of 순환도 동기화 트랙터에 사용할 수 있음을 주의하십시오.

비동기식 Generator 함수

비동기 플러그인 대상을 되돌려줍니다.
문법적으로 비동기적인 Generator 함수는 async 함수와 Generator 함수의 결합이다.

async function* gen() {
  yield 'hello';
}
const genObj = gen();
genObj.next().then(x => console.log(x));
// { value: 'hello', done: false }

비동기 트랙터의 설계 목적 중 하나는 바로 Generator 함수가 동기 조작과 비동기 조작을 처리할 때 같은 인터페이스를 사용할 수 있다는 것이다.
비동기식 Generator 함수는 for await...of 순환과 결합하여 사용할 수 있다.

async function* prefixLines(asyncIterable) {
  for await (const line of asyncIterable) {
    yield '> ' + line;
  }
}

일반적인 async 함수는 프로미스 대상을 되돌려주고, 비동기Generator 함수는 비동기Iterator 대상을 되돌려줍니다.
javascript는 현재 4가지 함수 형식으로 구성되어 있습니다:

일반 함수

async 함수

Generator 함수

비동기식 Generator 함수

만약 일련의 순서대로 실행되는 비동기적인 작업(예를 들어 파일을 읽고 새로운 내용을 쓰고 하드디스크에 저장하는 것)이라면 async 함수를 사용할 수 있다.
같은 데이터 구조를 만드는 일련의 비동기 동작 (예를 들어 한 줄 한 줄 파일을 읽는 것) 이라면 비동기Generator 함수를 사용할 수 있습니다.
동기식 데이터 구조 또는 비동기식 Generator 함수를 사용할 수 있습니다.

yield* 문

yield* 문장도 비동기 트랙터와 함께 사용할 수 있다.

async function* gen1() {
  yield 'a';
  yield 'b';
  return 2;
}

async function* gen2() {
  // result   2
  const result = yield* gen1();
}

동기화 Generator 함수와 마찬가지로 for await...of 순환은 yield*으로 전개됩니다.

(async function () {
  for await (const x of gen2()) {
    console.log(x);
  }
})();
// a
// b

 
전재 대상:https://www.cnblogs.com/adhehe/p/9685497.html