promise の挙動を少々まとめてみる

2021年10月24日

参考

非同期

下記のコードを実行すると world! のアラートが先に実行され hello のアラートが後から実行されます。

<script>
    setTimeout(() => console.log('hello'), 3000);
    console.log('world!');
</script>

promise

先に hello のアラートを処理して world! を後から処理したい時に promise を使って処理すると下記のようにかけるとの事。

<script>
    const promise = new Promise((resolve, reject) => { // 1. Promise オブジェクトを生成して、
        setTimeout(() => { // 2. 実行したい処理 3000 ミリ秒待ってから、
            alert('hello'); // 3. 'hello' を呼び出して、
            resolve(); // 4. 処理を resolve で終了させると、
        }, 3000);
    });
    promise.then(
        () => alert('world!') // 5. promise.then が呼び出される。
    );
</script>

resolve

resolve を実行し then に処理を移すときに引数を渡す事もできるよう。

<script>
    const promise = new Promise((resolve, reject) => {
        setTimeout(() => {
            alert('hello');
            resolve('world!'); // 1. 'world!' を promise.then に渡し、
        }, 3000);
    });
    promise.then(
        (value) => alert(value) // 'world' を変数 value が受け取る。
    );
</script>

reject

resolve の代わりに reject を使用すると catch の方が処理されるよう。

<script>
    const promise = new Promise((resolve, reject) => {
        setTimeout(() => {
            alert('hello');
            reject(); // 1. 処理を reject で終了させると、
        }, 3000);
    });
    promise.then(
        () => alert('world!')
    ).catch(
        () => alert('errorWorld!') // 2. catch が呼び出される。
    );
</script>

promise 自体を return する

promise 自体を return で返してあげる事で、[関数].then() と書く事もできる。

<script>
    function saySomething (){
        const promise = new Promise((resolve, reject) => {
            setTimeout(() => {
                alert('hello');
                resolve();
            }, 3000);
        });
        return promise; // 1. promise を返して、
    };
    saySomething()
        .then(() => alert("world") // 2. ここで promise.then を使用する。
    );
</script>

一つずつ順番に処理

次のコードのように一つずつ順番に処理が出来るよう。

<script>
    function saySomething(word) {
        const promise = new Promise((resolve, reject) => {
        setTimeout(() => {
            alert(word)
            resolve();
        }, 3000);
    });
        return promise;
    }
    saySomething('hello') // 1. hello を呼び出し、
        .then(() => saySomething('earth')) // 2. hello が成功したら earth を呼び出す。
        .then(() => saySomething('world')) // 3. earth が成功したら　world を呼び出す。
        .then(() => saySomething('cosmo')); // 4. world が成功したら cosmo を呼び出す。
</script>

2021年10月24日