【JavaScript】Promiseをしっかり理解したい【その3】

初めに

Promiseの自学習第3回目の投稿です。

前回の記事は以下となります。
【JavaScript】Promiseをしっかり理解したい【その2】

Promise.resolveについて

今までPromiseオブジェクトを扱う際はnewキーワードを使用してインスタンス化していました。

Promiseオブジェクト生成

const promise = new Promise((resolve, reject) => {
    ...
});

しかし、上記以外の方法でもPromiseオブジェクトを生成することが可能です。
それは今まで扱ってきたresloveを使用することで実現できます。

Promise.resolveによるPromiseオブジェクト生成

Promise.resolve(value)

Promise.resolveは引数で与えられた値でPromise オブジェクトを返す静的メソッドです。
newを使った構文だと以下と同じになります。

Promise.resolveと同じ意味になるもの

new Promise((resolve) => {
    resolve(value);
});

Promise.resolveで返ってくる値も同様にPromiseオブジェクトなので、 以下のように続けてthenメソッドを使った処理を書くことができます。
resolveの引数に格納した値はthenメソッドの引数に渡ります。

Promise.resolveを使った処理

Promise.resolve('こんにちは').then(function(value) {
  console.log(value);
});

実行結果

こんにちは

今まで学習してきた関数からPromiseオブジェクトを返す書き方は以下になります。

関数からPromiseオブジェクトを返す書き方

function asyncFunc() {
  return new Promise((resolve, reject) => {
    resolve('こんにちは');
  });
}

asyncFunc().then((value) => {
  console.log(value);
});

実行結果

こんにちは

配列をresolveする例は以下になります。

配列をresolveする

const p = Promise.resolve([1,2,3]);

p.then(function(value) {
  console.log(value[0]);
});

実行結果

1

また、Promise.resolveに与えられた引数の値がPromiseなら、そのPromiseが返されます。

Promiseをresolveする

const p1 = Promise.resolve('p1でresolve');
const p2 = Promise.resolve(p1);

p2.then(function(value) {
  console.log(value);
});
console.log(p1 === p2);

実行結果

true
p1でresolve

非同期処理なので最後の行のconsole.logの結果が先に出力されています。p1とp2は同値となっています。それぞれp1でresolveという値を持ったPromiseオブジェクトになっています。Promise.resolveの引数にPromiseオブジェクトが渡された場合、そのPromiseオブジェクトが返されることになります。

まとめ

理解に時間をかけ過ぎてしまったので、内容が短いのですが今回はここまでにします。処理の流れの中でPromiseオブジェクトが返る、ということを意識するとPromiseの理解が良くなる、逆にここを曖昧にすると混乱してしまうのではないかと思いました。