Javascript에서 async/await가 작동하는 방식에 대한 자세한 설명

관련 추천: "javascript 비디오 튜토리얼"

async/await는 ES7의 중요한 기능 중 하나이며 현재 커뮤니티에서 뛰어난 비동기 솔루션으로 인정받고 있습니다. 현재 async/await 기능은 stage 3에서 권장 사항입니다. 이 글을 읽기 전에 async/await가 어떻게 작동하는지 알아보시기 바랍니다. 생성기 및 수율 ES6 관련 지식을 기다리고 있습니다. async/await를 자세히 소개하기 전에 현재 ES6의 더 나은 비동기 처리 방법을 검토해 보겠습니다. 다음 예에서 데이터 요청은 Node.js의 요청 모듈을 사용하고 데이터 인터페이스는 예제 데모로

Github v3 api document

에서 제공하는 repo 코드 저장소 세부 정보 API를 사용합니다. Promise의 비동기 처리

Node.js의 비동기 IO는 높은 동시성에 대한 좋은 지원을 제공하지만 "콜백"을 재앙으로 만들고 쉽게 콜백 지옥을 초래할 수 있습니다. 명명된 함수를 사용하는 것과 같은 전통적인 방법을 사용하면 중첩 수준 수를 줄이고 코드를 더 명확하게 만들 수 있습니다. 그러나 이로 인해 명명된 함수의 정의를 찾으려면 ctrl + f를 자주 사용해야 하므로 IDE 창이 자주 위아래로 점프하게 됩니다. Promise를 사용한 후에는 중첩 수준 수가 매우 줄어들 수 있습니다. 또한 Promise의 구현은 상태 머신을 사용하며, 함수 내에서 일련의 코드 로직을 순차적 체인으로 실행할 수 있어 프로세스를 잘 제어할 수 있습니다. 다음은 Promise 사용의 예입니다.

const request = require('request');
// 请求的url和header
const options = {
  url: 'https://api.github.com/repos/cpselvis/zhihu-crawler',
  headers: {
    'User-Agent': 'request'
  }
};
// 获取仓库信息
const getRepoData = () => {
  return new Promise((resolve, reject) => {
    request(options, (err, res, body) => {
      if (err) {
        reject(err);
      }
      resolve(body);
    });
  });
};

getRepoData()
  .then((result) => console.log(result);)
  .catch((reason) => console.error(reason););

// 此处如果是多个Promise顺序执行的话，如下：
// 每个then里面去执行下一个promise
// getRepoData()
//   .then((value2) => {return promise2})
//   .then((value3) => {return promise3})
//   .then((x) => console.log(x))

그러나 Promise에는 여전히 결함이 있습니다. 중첩이 줄어들 뿐 완전히 제거되지는 않습니다. 예를 들어 여러 Promise가 연속적으로 실행될 때 첫 번째 Promise의 논리가 실행된 후 then 함수에서 두 번째 Promise를 실행해야 중첩 계층이 생성됩니다. 게다가 Promise를 사용하는 코드는 여전히 비동기식으로 보입니다. 작성된 코드가 동기식일 수 있다면 정말 좋을 것 같습니다.

제너레이터의 비동기 처리

제너레이터에 관해서는 낯설어서는 안 됩니다. Node.js의 콜백 처리를 위해 우리가 자주 사용하는

TJ/Co

는 promise와 결합된 Generator를 사용하여 구현됩니다. Co는 Coroutine의 약자로 Python, Lua와 같은 언어의 Coroutine에서 빌려온 것입니다. 비동기식 코드 논리를 동기 방식으로 작성할 수 있으므로 코드 읽기 및 구성이 더 명확해지고 디버깅이 쉬워집니다.

const co = require('co');
const request = require('request');

const options = {
  url: 'https://api.github.com/repos/cpselvis/zhihu-crawler',
  headers: {
    'User-Agent': 'request'
  }
};
// yield后面是一个生成器 generator
const getRepoData = function* () {
  return new Promise((resolve, reject) => {
    request(options, (err, res, body) => {
      if (err) {
        reject(err);
      }
      resolve(body);
    });
  });
};

co(function* () {
  const result = yield getRepoData;
  // ... 如果有多个异步流程，可以放在这里，比如
  // const r1 = yield getR1;
  // const r2 = yield getR2;
  // const r3 = yield getR3;
  // 每个yield相当于暂停，执行yield之后会等待它后面的generator返回值之后再执行后面其它的yield逻辑。
  return result;
}).then(function (value) {
  console.log(value);
}, function (err) {
  console.error(err.stack);
});

async/await process of asynchronous

co는 커뮤니티에서 뛰어난 비동기 솔루션이지만 언어 표준은 아니지만 과도기적 솔루션입니다. ES7 언어 수준에서는 언어 수준 문제를 해결하기 위해 async/await를 제공합니다. 현재 async/await는 IE Edge에서 직접 사용할 수 있지만 Chrome과 Node.js에서는 아직 이를 지원하지 않습니다. 다행스럽게도 babel은 이미 비동기 변환을 지원하므로 이를 사용할 때 babel만 도입하면 됩니다. 시작하기 전에 필요한 async/await 컴파일 파일이 포함된 다음 패키지를 소개해야 합니다.

브라우저 측과 Node.js 측 모두에 다음 패키지를 설치해야 합니다.

$ npm install babel-core --save
$ npm install babel-preset-es2015 --save
$ npm install babel-preset-stage-3 --save

바벨에서 공식적으로 제공하는 require Hook 방식을 사용하는 것을 권장합니다. 즉, require를 통해 입력한 후 필요할 때 다음 파일을 Babel에서 처리하게 됩니다. CommonJs가 동기식 모듈 종속성이라는 것을 알고 있기 때문에 실행 가능한 방법이기도 합니다. 이때, 두 개의 파일을 작성해야 하는데, 하나는 스타트업 js 파일이고, 다른 하나는 실제로 프로그램을 실행하는 js 파일이다.

실제로 프로그램을 실행하는 index.js

require('babel-core/register');
require('./async.js');

async.js 파일을 시작하세요

const request = require('request');

const options = {
  url: 'https://api.github.com/repos/cpselvis/zhihu-crawler',
  headers: {
    'User-Agent': 'request'
  }
};

const getRepoData = () => {
  return new Promise((resolve, reject) => {
    request(options, (err, res, body) => {
      if (err) {
        reject(err);
      }
      resolve(body);
    });
  });
};

async function asyncFun() {
 try {
    const value = await getRepoData();
    // ... 和上面的yield类似，如果有多个异步流程，可以放在这里，比如
    // const r1 = await getR1();
    // const r2 = await getR2();
    // const r3 = await getR3();
    // 每个await相当于暂停，执行await之后会等待它后面的
    //函数（不是generator）返回值之后再执行后面其它的await逻辑。
    return value;
  } catch (err) {
    console.log(err);
  }
}

asyncFun().then(x => console.log(`x: ${x}`)).catch(err => console.error(err));

참고:

async는 내부에 패키지된 콘텐츠가 동기적으로 실행될 수 있음을 선언하는 데 사용되며, Wait는 각각의 실행 순서를 제어합니다. Wait가 실행될 때 프로그램은 Wait의 반환 값을 일시 중지하고 기다린 다음 후속 Wait를 실행합니다.

• await 이후에 호출되는 함수는 약속을 반환해야 합니다. 또한 이 함수는 생성기가 아닌 일반 함수일 수 있습니다.
• await는 비동기 함수에서만 사용할 수 있습니다. 일반 함수에서 사용하면 오류가 보고됩니다.
• await 명령 뒤에 있는 Promise 개체가 거부될 수 있으므로 try...catch 코드 블록에 wait 명령을 넣는 것이 가장 좋습니다.
• 실제로 async/await의 사용법은 co의 사용법과 유사합니다. wait와yield는 모두 일시 중지를 나타내며 async 또는 co 레이어가 이를 감싸서 내부 코드가 동기 방식으로 처리될 수 있음을 나타냅니다. . 그러나 async/await에서 wait가 뒤따르는 함수는 추가 처리가 필요하지 않습니다.

더 많은 프로그래밍 관련 지식을 보려면

프로그래밍 배우기

를 방문하세요! !

위 내용은 Javascript에서 async/await가 작동하는 방식에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!