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));
Reference
この問題について(ES 6学習まとめ:Promise), 我々は、より多くの情報をここで見つけました
https://velog.io/@carlos1209/ES6-스터디-정리-Promise
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
const getHello = new Promise((resolve, reject) =>{
setTimeout(() => {
resolve("hello");
}, 3000);
});
getHello
.then((value) => console.log(value))
.catch(error => console.log(error));
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));
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));
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));
const p1 = new Promise((resolve, reject) => {
setTimeout(resolve, 1000, "First");
}).then(value => console.log(value))
.finally(() => console.log("finished"));
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));
Reference
この問題について(ES 6学習まとめ:Promise), 我々は、より多くの情報をここで見つけました https://velog.io/@carlos1209/ES6-스터디-정리-Promiseテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol