●Promiseは非同期処理の実装に便利なオブジェクト
コールバック地獄を避けることが出来る
=>callback地獄とは、コールバック関数の中にコールバック関数を入れ子にした構造のこと

●Promiseオブジェクトの作成
・「new Promise()」でPromiseオブジェクトが作れる
・引数にコールバック関数をセットできる
①第一引数:コールバック関数(resove)
=>処理が一通り完了したら実行する
※引数に値を渡すと「then」メソッド経由で値を受け取る
②第二引数:コールバック関数(reject)
=>例外を発生させたいときに実行する
※引数に値を渡すと「catch」メソッド経由で値を受け取る

●「Promise.resolve(1)」のコード

const resolvePromise = new Promise((resolve, reject) => {
//非同期に実行したい処理を記述するのが一般的
setTimeout(() => {
resolve("then経由で渡す値");
}, 1000);
});
resolvePromise
.then(data => {
console.log("1then :", data);
})
.catch(error => {
console.log("1catch :", error);
});

省略して以下のように記述しても使える

const resolvePromise = Promise.resolve(1);
resolvePromise
.then(data => {console.log('1 then :', data);})
.catch(error => {console.log('1 catch :', error);});

・resolve関数を実行すると「then」の引数のコールバック関数が実行される
・resolve実行時に渡した値が「then」経由で渡る

console.log(“1then :”, data);が実行される

●「Promise.reject(1)」

const rejectPromise = new Promise((resolve, reject) => {
// 例外処理を発生させてい場合は「reject」を実行
setTimeout(() => {
reject("catch経由で受け取る値");
}, 1000);
});
rejectPromise
.then(data => {
console.log("2 then:", data);
})
.catch(error => {
console.log("2 catch :", error);
});

以下のように省略できる

const rejectPromise = Promise.reject(1);
rejectPromise
.then(data => {
console.log("2 then :", data);
})
.catch(error => {
console.log("2 catch :", error);
});

・reject関数を実行すると「catch」の引数のコールバック関数が実行される
・reject実行時に渡した値が「catch」経由で渡る

console.log(“2 catch :”, error);が実行される

●非同期処理を「new Promise()」の中で実装して、非同期処理が
おわったタイミングで「resolve」関数を実行することを推奨。
●非同期処理の結果の値を渡したい場合は「resolve(‘結果値’)」と
記述することで、「then」メソッド経由で値を受け渡すことが出来る

カテゴリー: Javascript/jQuery

choco

マンガ、ゲーム、昼寝、料理、DIY、動物大好きな 平成生まれのアラサーです。 販売、サービス業しか経験ありませんが、 SE目指して勉強してます。 年齢はギリアウトだし、未経験ですが、 やるだけやって、チャレンジー

コメントを残す