🐈 Promiseオブジェクトを使った非同期処理(基本的な書き方①)
作成日: 2021/12/26
2

書き方

大きく分けて2種類。
・①「変数に入れない書き方」 ②「変数に入れる書き方」
・ さらに③「引数あり」の書き方がある。
※①②をベースに③がある感じ。

サンプル(resolveのみ)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>
        //①「変数に入れない書き方」
        function promiseTest1() {
            return new Promise(function(resolve) {
                resolve('通信成功')
            })
        }
        console.log(promiseTest1())
        

        //②「変数に格納する書き方」
        const promiseTest2 = new Promise(function(resolve) {
            resolve('通信成功2')
        })
        console.log(promiseTest2)


        //③①の引数あり
        function promiseTest3(input) {
            return new Promise(function(resolve) {
                resolve(`プロミス${input}です`)
            })
        }
        console.log(promiseTest3('成功'))


        //③②の引数あり
        const promiseTest4 = function(input) {
            return new Promise(function(resolve) {
                resolve(`プロミス${input}です`)
            })
        }
        console.log(promiseTest4('成功2'))
    </script>
</body>
</html>

その他サンプル

『JavaScript本格入門』 P414
7.5.1 Promise オブジェクトの基本を押さえる

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>

        function asyncProcess(value) {
            return new Promise(function(resolve, reject) {
                setTimeout(function() {
                    if(value) {
                        resolve(`入力値:  ${value}`);
                    } else {
                        reject('入力値は空です');
                    }
                }, 1000)
            })
        }

        asyncProcess('トクジロウ')
        .then(function(response) {
            console.log(response)
        })
        .catch(function(error) {
            console.log(error)
        })
        .finally(function(response) {
            console.log('finally')
        })
    </script>
</body>
</html>

事業会社にてコーダーをしています。制作は6年目。 インプットしたことをアウトプットしています。