자바 script 의 async awai 사용법
async/await 를 상세 하 게 소개 하기 전에 현재 ES6 에서 비교적 좋 은 비동기 처리 방법 을 살 펴 보 자.다음 예 에서 데이터 요청 은 Node.js 의 request 모듈 을 사용 하고 데이터 인 터 페 이 스 는 Github v3 api 문서 에서 제공 하 는 repo 코드 창고 상세 API 를 예 로 들 어 보 여 줍 니 다.
Promise 비동기 처리
Node.js 의 비동기 IO 는 높 은 병발 에 대한 좋 은 지 지 를 가 져 왔 지만'반전'을 재난 으로 만 들 고 지옥 으로 돌아 가기 쉽다.전통 적 인 방식,예 를 들 어 구명 함 수 를 사용 하면 끼 워 넣 은 층 수 를 줄 이 고 코드 를 선명 하 게 보일 수 있 지만.그러나 비교적 나 쁜 인 코딩 과 디 버 깅 체험 을 초래 할 수 있 습 니 다.ctrl+f 로 특정한 구명 함수 의 정 의 를 찾 아야 합 니 다.이 때문에 IDE 창 이 자주 위아래 로 뛰 어야 합 니 다.Promise 를 사용 하면 끼 워 넣 은 층 수 를 잘 줄 일 수 있 습 니 다.또한 Promise 의 실현 은 상태 기 를 사용 하여 함수 에서 resolve 와 reject 를 통 해 절 차 를 잘 제어 할 수 있 습 니 다.순서대로 일련의 코드 논 리 를 실행 할 수 있 습 니 다.다음은 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))
Generator 비동기 처리
generator 에 대해 말하자면,너 는 그것 에 대해 낯 설 지 않 을 것 이다.Node.js 에서 리 셋 처리 에 있어 서 우리 가 자주 사용 하 는 TJ/Co 는 generator 와 promise 를 결합 하여 이 루어 진 것 입 니 다.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);
});
코 는 지역사회 에서 우수한 비동기 해결 방안 이지 만 언어 기준 이 아니 라 과도 방안 일 뿐이다.ES7 언어 차원 에서 async/await 를 제공 하여 언어 차원 의 어 려 운 문 제 를 해결 합 니 다.현재 async/await 는 IE edge 에서 직접 사용 할 수 있 지만 chrome 과 Node.js 는 지원 되 지 않 습 니 다.다행히 바 벨 은 async 의 transform 을 지원 하기 때문에 우리 가 사용 할 때 바 벨 을 도입 하면 된다.시작 하기 전에 다음 패 키 지 를 도입 해 야 합 니 다.preset-stage-3 에는 우리 가 필요 로 하 는 async/await 의 컴 파일 파일 파일 이 있 습 니 다.
Browser 든 Node.js 든 아래 가방 을 설치 해 야 합 니 다.
$ npm install babel-core --save
$ npm install babel-preset-es2015 --save
$ npm install babel-preset-stage-3 --save파일 index.js 시작
require('babel-core/register');
require('./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));
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
