Javascript에서 비동기 및 대기 사용법에 대한 자세한 소개

이 글에서는 주로 Javascript에서 async/await의 사용법을 소개합니다. 관심 있는 분들은 async/await가 어떻게 작동하는지 공유하겠습니다.

async/await는 ES7의 중요한 기능 중 하나입니다. , 이는 커뮤니티에서도 뛰어난 비동기 솔루션으로 인정받고 있습니다. 현재 async/await 기능은 이미 3단계 권장 사항입니다. 이 글에서는 async/await가 어떻게 작동하는지 확인할 수 있습니다. Promise, Generator 등 ES6 관련 지식이 있으면 좋겠습니다. , 그리고 지식을 얻습니다.

async/await를 자세히 소개하기 전에 현재 ES6의 더 나은 비동기 처리 방법을 검토해 보겠습니다. 다음 예에서 데이터 요청은 Node.js의 요청 모듈을 사용하고, 데이터 인터페이스는 예제 데모로 Github v3 api 문서에서 제공하는 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에서 차용한 것입니다. 등. 언어의 코루틴. 비동기식 코드 논리를 동기식으로 작성할 수 있으므로 코드 읽기 및 구성이 더욱 명확해지고 디버깅이 쉬워집니다.

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 비동기 처리 처리

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

브라우저 측이든 Node.js 측이든 다음 패키지를 설치해야 합니다.

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

babel에서 공식적으로 제공하는 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));

참고:

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

2. await 이후에 호출되는 함수는 promise를 반환해야 합니다. 또한 이 함수는 생성기가 아닌 일반 함수일 수 있습니다.

3. await는 비동기 함수에서만 사용할 수 있으며, 일반 함수에서 사용할 경우 오류가 발생합니다.

4. await 명령 뒤의 Promise 객체는 거부될 수 있으므로, try...catch 코드 블록에 wait 명령을 넣는 것이 가장 좋습니다.

실제로 async/await의 사용법은 co와 유사합니다. wait와 Yield는 모두 일시 중지를 나타내며 async 또는 co 레이어로 래핑되어 있음을 나타냅니다. 내부 코드는 동기식으로 처리될 수 있습니다. 그러나 async/await에서 wait가 뒤따르는 함수는 추가 처리가 필요하지 않습니다.

[관련 추천]

1. Javascript 무료 동영상 튜토리얼

JavaScript 모션 프레임워크의 다중값 모션에 대한 자세한 소개 (4)

3.JavaScript 모션 프레임워크의 다중 객체 임의 값 이동 샘플 코드 공유(3)

4. JavaScript의 흔들림 방지 문제 및 정지 해결 방법 모션 프레임워크 커플릿(2)

5. JavaScript 모션 프레임워크가 양수 및 음수 반올림 문제를 해결하는 방법(1)

위 내용은 Javascript에서 비동기 및 대기 사용법에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!