es6 학습 노트 의 Async 함수 기본 튜 토리 얼

본 고 는 es6 에서 Async 함수 에 관 한 내용 을 소개 하고 여러분 께 참고 학습 을 제공 합 니 다.필요 한 친구 들 은 아래 에 상세 한 소 개 를 보 겠 습 니 다.
async 함수
async 함수 로 비동기 작업 을 더욱 편리 하 게 합 니 다.그것 은 Generator 함수 의 문법 사탕 이다.
Generator 함수,두 개의 파일 을 순서대로 읽 습 니 다.

var fs = require('fs');
var readFile = function (fileName) {
 return new Promise(function (resolve, reject) {
 fs.readFile(fileName, function(error, data) {
  if (error) reject(error);
  resolve(data);
 });
 });
};
var gen = function* () {
 var f1 = yield readFile('/etc/fstab');
 var f2 = yield readFile('/etc/shells');
 console.log(f1.toString());
 console.log(f2.toString());
};

async 함수 로 쓰 십시오.바로 아래 와 같 습 니 다.

var asyncReadFile = async function () {
 var f1 = await readFile('/etc/fstab');
 var f2 = await readFile('/etc/shells');
 console.log(f1.toString());
 console.log(f2.toString());
};

async 함수 가 Generator 함수 에 대한 개선 은 다음 과 같은 네 가지 에 나타난다.
1)실행 기 내장
Generator 함수 의 실행 은 실행 기 에 의존 해 야 하기 때문에 co 모듈 이 있 고 async 함수 자체 실행 기 가 있 습 니 다.즉,async 함수 의 집행 은 일반 함수 와 똑 같 고 한 줄 만 있 으 면 된다.

var result = asyncReadFile();

위의 코드 는 asyncReadFile 함 수 를 호출 한 후에 자동 으로 실행 되 고 마지막 결 과 를 출력 합 니 다.이것 은 Generator 함수 와 전혀 같 지 않 습 니 다.next 방법 을 호출 하거나 co 모듈 을 사용 해 야 진정 으로 실행 되 고 마지막 결 과 를 얻 을 수 있 습 니 다.
2)더 좋 은 의미
async 와 await 는 별표 와 yield 보다 의미 가 더 분명 합 니 다.async 는 함수 에 비동기 동작 이 있 음 을 표시 합 니 다.await 는 뒤에 바짝 붙 어 있 는 표현 식 이 결 과 를 기 다 려 야 한 다 는 것 을 표시 합 니 다.
3)더 넓 은 적용 성
co 모듈 은 yield 명령 뒤 에는 Thunk 함수 나 Promise 대상 만 있 을 수 있 고,async 함수 의 await 명령 뒤 에는 Promise 대상 과 원본 형식의 값(수치,문자열,불 값,그러나 이 때 는 동기 화 작업 과 같 습 니 다)이 있 을 수 있 습 니 다.
4)반환 값 은 Promise
async 함수 의 반환 값 은 Promise 대상 입 니 다.이것 은 Generator 함수 의 반환 값 보다 Iterator 대상 이 훨씬 편리 합 니 다.너 는 then 방법 으로 다음 작업 을 지정 할 수 있다.
더 나 아가 async 함 수 는 여러 개의 비동기 작업 으로 포 장 된 Promise 대상 으로 볼 수 있 으 며,await 명령 은 내부 then 명령 의 문법 사탕 입 니 다.
기본 용법
async 함수 가 Promise 대상 을 되 돌려 줍 니 다.then 방법 으로 리 셋 함 수 를 추가 할 수 있 습 니 다.함수 가 실 행 될 때 await 를 만나면 먼저 돌아 오고 비동기 작업 이 끝 날 때 까지 기 다 렸 다가 함수 체 내 뒤의 문 구 를 실행 합 니 다.

function timeout(ms) {
 return new Promise((resolve) => {
 setTimeout(resolve, ms);
 });
}
async function asyncPrint(value, ms) {
 await timeout(ms);
 console.log(value);
}
asyncPrint('hello world', 5000);

위의 코드 는 5000 밀리초 를 지정 한 후 hello World 를 출력 합 니 다.
async 함수 가 Promise 대상 으로 되 돌아 오기 때문에 await 명령 의 인자 로 사용 할 수 있 습 니 다.그래서 위의 예 도 아래 의 형식 으로 쓸 수 있다.

async function timeout(ms) {
 await new Promise((resolve) => {
 setTimeout(resolve, ms);
 });
}
async function asyncPrint(value, ms) {
 await timeout(ms);
 console.log(value);
}
asyncPrint('hello world', 5000);

async 함수 다양한 사용 형식

//     
async function foo() {}
//      
const foo = async function () {};
//      
let obj = { async foo() {} };
obj.foo().then(...)
// Class    
class Storage {
 constructor() {
 this.cachePromise = caches.open('avatars');
 }
 async getAvatar(name) {
 const cache = await this.cachePromise;
 return cache.match(`/avatars/${name}.jpg`);
 }
}
const storage = new Storage();
storage.getAvatar('hzzly').then(…);
//     
const foo = async () => {};

문법
async 함수 의 문법 규칙 은 전체적으로 비교적 간단 하고 어 려 운 점 은 오류 처리 메커니즘 이다.
Promise 대상 되 돌리 기
async 함수 가 Promise 대상 을 되 돌려 줍 니 다.async 함수 내부 return 문 구 를 되 돌려 주 는 값 은 then 방법 으로 함수 의 매개 변수 가 됩 니 다.

async function f() {
 return 'hello world';
}
f().then(v => console.log(v))
// "hello world"

Promise 대상 의 상태 변화
async 함수 가 되 돌아 오 는 Promise 대상 은 내부 의 모든 await 명령 뒤의 Promise 대상 이 실 행 될 때 까지 기 다 려 야 상태 가 바 뀔 수 있 습 니 다.return 문 구 를 만 나 거나 오류 가 발생 하지 않 는 한.즉,async 함수 내부 의 비동기 작업 이 완료 되 어야 then 방법 이 지정 한 반전 함 수 를 실행 할 수 있 습 니 다.

async function getTitle(url) {
 let response = await fetch(url);
 let html = await response.text();
 return html.match(/<title>([\s\S]+)<\/title>/i)[1];
}
getTitle('https://tc39.github.io/ecma262/').then(console.log)
// "ECMAScript 2017 Language Specification"

위의 코드 에서 함수 getTitle 내부 에는 세 가지 조작 이 있 습 니 다.웹 페이지 를 캡 처 하고 텍스트 를 꺼 내 며 페이지 제목 과 일치 합 니 다.이 세 가지 조작 이 모두 완료 되 어야 then 방법 에 있 는 console.log 를 실행 할 수 있 습 니 다.
3.사용 주의
await 명령 뒤의 Promise 대상,실행 결 과 는 rejected 일 수 있 으 므 로 await 명령 을 try..catch 코드 블록 에 두 는 것 이 좋 습 니 다.

async function myFunction() {
 try {
 await somethingThatReturnsAPromise();
 } catch (err) {
 console.log(err);
 }
}
//      
async function myFunction() {
 await somethingThatReturnsAPromise()
 .catch(function (err) {
 console.log(err);
 };
}

여러 await 명령 뒤의 비동기 동작 입 니 다.계 발 관계 가 없 으 면 동시에 실행 하 는 것 이 좋 습 니 다.

//    （     ），       。      ，    getFoo    ，    getBar，           。
let foo = await getFoo();
let bar = await getBar();
//    
let [foo, bar] = await Promise.all([getFoo(), getBar()]);
//    
let fooPromise = getFoo();
let barPromise = getBar();
let foo = await fooPromise;
let bar = await barPromise;

await 명령 은 async 함수 에 만 사용 할 수 있 습 니 다.일반 함수 에 사용 하면 오류 가 발생 합 니 다.
async 함수 에 대한 더 많은 사용 예 는 이 글 을 클릭 하여 볼 수 있 습 니 다.https://www.jb51.net/article/113475.htm
총결산
이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.