ES 6学習まとめ:Promise

17755 ワード

Promiseとは?


JAvascriptはcallbackを用いて非同期処理を行い,処理中にオーバーラップ処理を行い複雑さを増した.
また、オーバーラップにより異常処理が困難になるという欠点もある.
この2つの問題を解決するために増えたのがPromiseです.
const getHello = new Promise((resolve, reject) =>{
    setTimeout(() => {
        resolve("hello"); 
    }, 3000);
});

getHello
    .then((value) => console.log(value))
    .catch(error => console.log(error));
Promiseは決意と拒否を持っている.
resolveは、成功時に値を呼び出して渡す関数です.
拒否は、失敗したときに値を渡す関数を呼び出します.
Promiseを実行し、成功した後続のアクションを定義します.
catch処理エラー.

Channing Promise(連続呼の承諾)


Promiseを連続的に呼び出します.
その後、連続的に呼び出すことができます.
以前に返された値は次のthenに渡されます.
const timesTwo = number => {console.log(number * 2); return number * 2};

getHello
    .then(timesTwo)
    .then(timesTwo)
    .then(timesTwo)
    .then(timesTwo)
    .then(timesTwo)
    .then(() =>{throw Error("something is wrong")})
    .then(timesTwo)
    .catch(error => console.log(error));
2 4 8 16 32 64まで呼び出され、エラーが発生し、catchにエラーメッセージが露出します.
最後のthenは実行されません.

Promise.all()


複数のPromiseを呼び出し、すべての処理が完了したら、呼び出し順に結果を配列に戻します.
中間にエラーが発生した場合、すべての結果は返されるのではなくcatchとして処理されます.
const p1 = new Promise((resolve, reject) => {
    setTimeout(resolve, 5000, "First");
})

const p2 = new Promise((resolve, reject) => {
    setTimeout(reject, 1000, "error");
})

const p3 = new Promise((resolve, reject) => {
    setTimeout(resolve, 3000, "Third");
})

const motherPromise = Promise.all([p1, p2, p3]);

motherPromise.then(value => console.log(value))
            .catch(error => console.log(error));

Promise.race()


複数のPromiseを同時に呼び出し、最初のリットルの結果の1つを受信します.
const p1 = new Promise((resolve, reject) => {
    setTimeout(resolve, 1000, "First");
})

const p2 = new Promise((resolve, reject) => {
    setTimeout(reject, 2000, "error");
})

const p3 = new Promise((resolve, reject) => {
    setTimeout(resolve, 3000, "Third");
})

const motherPromise = Promise.race([p1, p2, p3]);

motherPromise.then(value => console.log(value))
            .catch(error => console.log(error));

finally


finallyでPromise終了後、成功または失敗にかかわらず実行される関数.
この関数を使用して、最終的に実行する論理を処理します.
const p1 = new Promise((resolve, reject) => {
    setTimeout(resolve, 1000, "First");
}).then(value => console.log(value))
    .finally(() => console.log("finished"));

Real World Promise


実際のPromiseの使用例を見てみましょう
Promiseを直接作成しなくても、Promiseを返す関数はたくさんあります.
fetch("https://yts.mx/api/v2/list_movies.json")
    .then(res => res.json()) //.json 함수 역시 promise 를 리턴한다.
    .then(json => console.log(json))
    .catch(e => console.log(e));