async 함수

5464 단어

1. async 구문

  • async 함수 자체 실행기.async 함수의 실행은 일반 함수와 똑같다
  • await는 뒤에 뒤따르는 표현식이 결과를 기다려야 한다는 것을 나타낸다
  • yield 명령 뒤에는 Thunk 함수나 Promise 대상만 있고, async 함수의 await 명령 뒤에는 Promise 대상과 원시 유형의 값(수치, 문자열과 볼 값, 그러나 이것은 동기화 작업과 같다)이 있을 수 있다.
  • generator 반환값은iterator이고 async 반환값은promise
  • 이다.

    2. 사용법


    함수가 실행될 때, await를 만나면 먼저 되돌아오고, 비동기적인 조작이 완성될 때까지 기다린 다음에 함수 체내 뒤의 문장을 실행한다.50ms 이후 Hello World 출력
         function timeout(ms) {
            return new Promise((resolve) => {
               setTimeout(resolve, ms);
            });
         }
    
        async function asyncPrint(value, ms) {
           await timeout(ms);
           console.log(value);
        }
    
        asyncPrint('hello world', 50);
    

    3. 문법

  • promise 대상을 되돌려줍니다.async 내부는 then 방법으로 함수를 리셋하는 매개 변수로만 되돌아옵니다. async function f () {return'hello world ';f().then(v => console.log(v))//"hello world"
  • async 함수 내부에서 오류가 발생하면 되돌아오는 Promise 대상이 Reject 상태가 됩니다.던진 오류 대상은catch 방법의 리셋 함수에 의해 수신됩니다.
  • async 함수에서 되돌아오는 Promise 대상은 내부의 모든 await 명령 뒤에 있는 Promise 대상이 실행될 때까지 기다려야 상태 변화가 발생합니다.return 문장이나 버퍼링 오류가 발생하지 않는 한.await
  • await 명령 뒤에는 Promise 객체가 있습니다.만약 그렇지 않다면, 즉시 Resolve의 Promise 대상으로 전환될 것입니다.
  • await 명령 뒤에 있는 Promise 대상이 Reject 상태로 바뀌면 Reject의 매개 변수는catch 방법의 리셋 함수에 의해 수신됩니다.await 문장 뒤에 있는 Promise가 Reject로 바뀌면 async 함수 전체가 실행을 중단합니다.비동기식 오류 방지 방법
  • async에서try-catch 블록
  • 사용
  • await 처리 후promise.promise 뒤에catch 처리 추가
  • 4. 주의점

  • 여러 개의 await 명령 뒤에 있는 비동기 동작은 계발 관계가 없으면 동시에 촉발하는 것이 좋습니다.
      //  
     let [foo, bar] = await Promise.all([getFoo(), getBar()]);
    
     //  
    let fooPromise = getFoo();
    let barPromise = getBar();
    let foo = await fooPromise;
    let bar = await barPromise;
    
  • await 명령은 async 함수에만 사용할 수 있으며 일반 함수에만 사용하면 오류가 발생합니다.

  • 5. 비동기식 운영 순서


    URL 세트를 원격으로 읽은 다음 읽는 순서대로 결과를 출력합니다.promise 방식
    function logInOrder(urls) {
      //  URL
      const textPromises = urls.map(url => {
        return fetch(url).then(response => response.text());
      });
    
     //      reduce promise 
     textPromises.reduce((chain, textPromise) => {
         return chain.then(() => textPromise)
            .then(text => console.log(text));
         }, Promise.resolve());
      }
    

    async 병행 실현
     async function logInOrder(urls) {
       //  URL
         const textPromises = urls.map(async url => {
         const response = await fetch(url);
         return response.text();
       });
    
        //  
       for (const textPromise of textPromises) {
           console.log(await textPromise);
       }
     }
    

    총괄:array.map(callback) 동시 실행

    6. 비동기 트랙터


    문제:iterator 플러그인에서,next 방법은 동기화되어야 하며, 호출하기만 하면 즉시 값을 되돌려야 합니다.즉,next 방법을 실행하면value와done 두 속성을 동기화해야 한다는 것이다.만약 지침이 동기화 조작을 가리키고 있다면 당연히 문제가 없지만 비동기화 조작에 대해서는 그다지 적합하지 않다.비동기 반복기
  • 플러그인의next 방법을 호출하여 프로미스 대상을 되돌려줍니다.
  • then 방법으로 이 Promise 대상의 상태를 Resolve 이후의 리셋 함수로 지정할 수 있습니다.
  • 리셋 함수의 매개 변수는value와done 두 속성을 가진 대상이다.
     asyncIterator
       .next()
       .then(
           ({ value, done }) => /* ... */
      );
    

  • 비동기 트랙터가 사실 두 번의 값을 되돌려 주었다.처음 호출할 때 Promise 대상을 되돌려줍니다.Promise 대상이 Resolve가 되면 현재 데이터 구성원 정보를 표시하는 대상을 되돌려줍니다.이것은 비동기 트랙터와 동기 트랙터의 최종 행위는 일치하지만 먼저 Promise 대상으로 돌아가 중개로 삼을 뿐이라는 것이다.
    비동기 플러그인의next 방법은 연속적으로 호출할 수 있으며, 이전에 생성된 Promise 대상resolve 이후에 호출할 필요가 없습니다.이런 상황에서next 방법은 누적되어 자동적으로 한 걸음 한 걸음 순서대로 운행된다.
  • promise를 사용합니다.all()
    const asyncGenObj = createAsyncIterable(['a', 'b']);
    const [{value: v1}, {value: v2}] = await Promise.all([
       asyncGenObj.next(), asyncGenObj.next()
    ]);
    
    console.log(v1, v2); // a b
    
  • next를 연속으로 호출하고 마지막으로await로 동의 처리
    const writer = openFile('someFile.txt');
    writer.next('hello');
    writer.next('world');
    await writer.return();
    
  • 7. 비동기적인iterator 인터페이스 for await-of

  • Symbol에 비동기식 범람기 배포.iterator에서 비동기적인 몇 개는 Symbol에 배치됩니다.asyncIterator에서예, 여기서 req는 asyncIterable 객체입니다.만약 next 방법이 되돌아오는 Promise 대상이 Reject에 의해, for await에 의해...of 오류 보고,try로...catch 포착.
     let body = '';
    
     async function f() {
     for await(const data of req) body += data;
        const parsed = JSON.parse(body);
        console.log('got', parsed);
    }
    

  • 8. 비동기식 Generator 함수


    비동기식 Generator 함수는 async 함수와 Generator 함수의 결합 예 1:
       async function* gen() {
          yield 'hello';
        }
       const genObj = gen();
       genObj.next().then(x => console.log(x));
       // { value: 'hello', done: false }
    

    예2:
         async function* readLines(path) {
           let file = await fileOpen(path);
    
           try {
             while (!file.EOF) {
               yield await file.readLine();
             }
          } finally {
            await file.close();
          }
       }
    

    await 명령은 외부 조작으로 인한 값을 함수 내부에 입력하는 데 사용되며, yield 명령은 함수 내부의 값을 yield로 출력한 후 비동기 트랙터를 연결하는 데 사용됩니다 *
          async function* gen1() {
             yield 'a';
             yield 'b';
             return 2;
           }
    
           async function* gen2() {
                // result   2
           const result = yield* gen1();
            }
    

    for await-of 순환을 사용하면gen1의 yield가 펼쳐집니다
     (async function () {
         for await (const x of gen2()) {
         console.log(x);
         }
       })();
      // a
      // b

    좋은 웹페이지 즐겨찾기