es6 의 Promise 및 es7 의 Async/Await 응용

머리말
Promise 대상 에 대해 완 일 봉 대신 이 Es6 입문 에서 쓴 적 이 있 습 니 다.여 기 는 더 이상 번 거 롭 지 않 습 니 다!본문 밑 에 있 는 Promise 문 서 를 보 려 면 누 르 십시오.사실 Promise 는 최초 로 지역 사회,jquery 의 deferred 대상 에서 비롯 되 었 고 Promise 와 유사 한 실현 도 있 었 다.나 는 이전에 글 에 있 는 모든 그림 을 불 러 올 지 여 부 를 판단 하 는 데 언급 한 적 이 있다!오늘 은 주로 Promise 및 Async/Await 의 응용 에 대해 이야기 합 니 다.http://www.tuicool.com/articles/jArEfmA
간단 한 정지 집행

var sleep = function (time) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            resolve();
        }, time);
    })
};

var start = async function () {
    console.log('start');
    await sleep(3000);
    console.log('end');
};

start();

위의 코드 에서 콘 솔 은 start 를 먼저 출력 하고 3 초 후에 end 를 출력 합 니 다.
반환 값 획득

var sleep = function (time) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            //    ‘ok’
            resolve('ok');
        }, time);
    })
};

var start = async function () {
    let result = await sleep(3000);
    console.log(result); //    ‘ok’
};
start()

await 가 기다 리 는 것 은 promise 대상 이지 만.then(..)을 쓰 지 않 아 도 되 돌아 오 는 값 을 얻 을 수 있 습 니 다.
잘못 을 포착 하 다

var sleep = function (time) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            //      ，   ‘error’
            reject('error');
        }, time);
    })
};

var start = async function () {
    try {
        console.log('start');
        await sleep(3000); //            

        //             
        console.log('end');
    } catch (err) {
        console.log(err); //         `error`
    }
};
start()

기왕.then(..)을 쓸 필요 가 없다 면.catch(..)도 쓸 필요 가 없다.표준적 인 try catch 문법 으로 오 류 를 포착 할 수 있다.
여러 await 순환

var sleep = function (time) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            resolve();
        }, time);
    })
};
var start = async function () {
    for (var i = 1; i <= 10; i++) {
        console.log(`    ${i}   ..`);
        await sleep(1000);
    }
};
start()

회 출력:

    1   ..
Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}
    2   ..
    3   ..
    4   ..
    5   ..
    6   ..
    7   ..
     8   ..
    9   ..
    10   ..

1s 간격 으로 출력 합 니 다.
고전 면접 문제
내 가 전에 언급 한 setTimeout 과 for 순환 결합 은 다음 과 같은 코드 가 있다 면:

for (var i = 0; i < 5; i++) {
    (function(j) {  // j = i
        setTimeout(function() {
            console.log(new Date, j);
        }, 1000);
    })(i);
}

console.log(new Date, i);

어떻게 개선 하여 1s 마다 숫자 를 출력 합 니까?순 서 는 0->1->2->3->4->5 입 니 다.
다음 과 같이 쓰 지 않 아 도 됩 니 다.

for (var i = 0; i < 5; i++) {
    (function(j) {
        setTimeout(function() {
            console.log(new Date, j);
        }, 1000 * j);  //      0~4       
    })(i);
}

setTimeout(function() { //        ，      5  
    console.log(new Date, i);
}, 1000 * i);

Es6 의 Promise 로 다음 과 같이 쓰 십시오.

const tasks = []; //           Promise
const output = (i) => new Promise((resolve) => {
    setTimeout(() => {
        console.log(new Date, i);
        resolve();
    }, 1000 * i);
});

//          
for (var i = 0; i < 5; i++) {
    tasks.push(output(i));
}

//         ，      i
Promise.all(tasks).then(() => {
    setTimeout(() => {
        console.log(new Date, i);
    }, 1000);
});

ES7 async 와 await 의 표기 법 은 다음 과 같 습 니 다.

const sleep = (timeountMS) => new Promise((resolve) => {
    setTimeout(resolve, timeountMS);
});

(async () => {  //        async      
    for (var i = 0; i < 5; i++) {
        await sleep(1000);
        console.log(new Date, i);
    }

    await sleep(1000);
    console.log(new Date, i);
})();

위 는 es6 의 Promise 와 es7 의 Async/Await 에 대한 간단 한 응용 입 니 다.ES6 의 Promise 에 대해 완 일 봉 대신 의 문 서 를 볼 수 있 습 니 다. http://es6.ruanyifeng.com/#docs/promise