JavaScript Promise

JavaScriptから関数を呼び出すと、関数の開始と終了時でもプログラムを続行する必要がある場合があります.promiseを使用すると、コードを非同期で明確に表現し、実行できます.
サーバからAjaxWeb APIリクエスト、ファイル読み込みなどを受信する.
暗号化/復号化、計画タスクなどの時間のかかるタスクでは、非同期処理が必要です.
ES 6からJavaScriptに追加された標準埋め込みオブジェクト
ES 6をサポートするブラウザまたはノード.jsでグローバルPromiseを表示できます

console.log(Promise);

[Function: Promise]

Promiseの使い方

ジェネレータからプロセスオブジェクトを作成できます.
構造関数のパラメータとしてexecutor関数を使用する

new Promise(/*executor*/);

executor関数にはresolveとexecuteがパラメータとしてあります.
(resolve, reject) => {...}
resolveとexecuteは関数です.
resolve(), reject()

new Promise(/*executor*/(resolve, reject) => {});

ジェネレータでpromisオブジェクトを作成した瞬間を保留(待機)状態と呼ぶ.

new Promise((resolve, reject)=>{}); // pending

executor関数パラメータの1つであるresolve関数を実行すると、完了(実行済み)状態になります.

new Promise((resolve, reject)=>{
 // pending 상태
 //..
 resolve(); //fulfilled 상태
}); 

executor関数パラメータのいずれかの拒否関数を実行すると、拒否(拒否)状態になります.

new Promise((resolve, reject)=>{
 // pending 상태
 //..
 resolve(); //fulfilled 상태
 reject(); // rejected 상태
}); 

pというプロセスオブジェクトは1000ミリ秒後に完了します.

new Promise((resolve, reject) => {
    // pending
    setTimeout(() => {
        resolve(); //fulfulled
    }, 1000);
})

使用法

pというプロセスオブジェクトが完了すると、p.thenで設定したコールバック関数が実行されます.

const p = new Promise((resolve, reject) => {
    // pending
    setTimeout(() => {
        resolve(); //fulfulled
    }, 1000);
});

p.then(/* callback */);

そして完成時にスタート.

const p = new Promise((resolve, reject) => {
    // pending
    setTimeout(() => {
        resolve(); //fulfulled
    }, 1000);
});

p.then(() => {
    console.log('1000ms 후에 fulfilled 됩니다');
});

1000ミリ秒後に完了
1秒後コンソールlogコンテンツが表示されます.
次に、関数が実行されている間にプロセスオブジェクトが作成され、プロセスオブジェクトが作成されている間にpendingが開始されることを確認するために、関数(p)が作成され、関数(p)が実行されている間にthenが設定されます.

function p() {
    return new Promise((resolve, reject) => {
        // pending
        setTimeout(() => {
            resolve(); //fulfulled
        }, 1000);
    });
} 

p().then(() => {
    console.log('1000ms 후에 fulfilled 됩니다.');
})

1000ミリ秒後に完了
上と差は多くありませんが、大規模な仕事ではもっと速いです.

catchの使い方

プロセスオブジェクトが拒否されると、p.catchで設定したコールバック関数が実行されます.

function p() {
    return new Promise((resolve, reject) => {
        // pending
        setTimeout(() => {
            reject(); //rejected
        }, 1000);
    });
} 

p().then(() => {
    console.log('1000ms 후에 fulfilled 됩니다.');
}).catch(() => {
    console.log('1000ms 후에 rejected 됩니다.');
});

1000ミリ秒後に拒否されました.
1秒後にcatchを実行

次にcatchパラメータを使用します

executorのresolve関数を実行するときにパラメータを追加すると、コールバック関数のパラメータとして受信できます.
resolve('hello');
then((message) => {...})

function p() {
    return new Promise((resolve, reject) => {
        // pending
        setTimeout(() => {
            resolve('hello'); //fulfulled
        }, 1000);
    });
} 

p().then((message) => {
    console.log('1000ms 후에 fulfilled 됩니다.', message);
}).catch(() => {
    console.log('1000ms 후에 rejected 됩니다.');
});

1000ミリ秒後に完了します.hello
このようにデータを渡すのはよく使われる方法です.
executorの拒否関数を実行するときにパラメータを加えて実行すると、catchのコールバック関数のパラメータとして使用できます.
reject('error');
then((reason) => {...})

function p() {
    return new Promise((resolve, reject) => {
        // pending
        setTimeout(() => {
            reject('error'); // rejected
        }, 1000);
    });
} 

p().then((message) => {
    console.log('1000ms 후에 fulfilled 됩니다.', message);
}).catch((reason) => {
    console.log('1000ms 후에 rejected 됩니다.', reason);
});

1000ミリ秒後に拒否されました.error

JavaScript Errorオブジェクト

通常、拒否関数が実行され、拒否された理由がスキップされます.標準の組み込みオブジェクトErrorのジェネレータを使用して、Errorオブジェクトを作成できます.

function p() {
    return new Promise((resolve, reject) => {
        // pending
        setTimeout(() => {
            reject(new Error('bad'));
        }, 1000);
    });
} 

p().then((message) => {
    console.log('1000ms 후에 fulfilled 됩니다.', message);
}).catch((error) => {
    console.log('1000ms 후에 rejected 됩니다.', error);
});

1000ms 후에 rejected 됩니다. Error: bad
    at Timeout._onTimeout (d:\project\javascript\new\promise1.js:32:20)
    at listOnTimeout (internal/timers.js:557:17)
    at processTimers (internal/timers.js:500:7)

最終使用方法

完了または拒否後に最終的に実行するものがある場合は、finally()を設定し、関数をパラメータに配置します.

function p() {
    return new Promise((resolve, reject) => {
        // pending
        setTimeout(() => {
            reject(new Error('bad'));
        }, 1000);
    });
} 

p()
.then((message) => {
    console.log('1000ms 후에 fulfilled 됩니다.', message);
})
.catch((error) => {
    console.log('1000ms 후에 rejected 됩니다.', error);
})
.finally(() => {
    console.log('end');
});

1000ms 후에 rejected 됩니다. Error: bad
    at Timeout._onTimeout (d:\project\javascript\new\promise1.js:32:20)
    at listOnTimeout (internal/timers.js:557:17)
    at processTimers (internal/timers.js:500:7)
end

コールバック関数

通常、非同期操作ではcallback関数がパラメータとして使用され、論理終了時にcallback関数が呼び出されます.この場合、関数は下向きではなくコールバック関数で行われます.

function c(callback) {
    setTimeout(() => {
        callback();
    },1000);
}

c(() => {
    console.log('1000ms 후에 callback 함수가 실행됩니다.');
});

//들여쓰기로 코드가 callback 함수 안으로 진행(callback hell)
c(() => {
    c(() => {
        c(() => {
            console.log('3000ms 후에 callback 함수가 실행됩니다.');
        });
    });
});

コールバック関数は1000ミリ秒後に実行されます.
コールバック関数は3000ミリ秒後に実行されます.

コールバック関数の処理

次に、関数で「Promis」オブジェクトを再び返す方法でフィルタリングすることで、非同期操作を順次下に表すことができます.

function p() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve();
        }, 1000);
    })
}

p().then(() => {
        return p(); // 다시 p함수 실행 ,1초 뒤
    })
    .then(() => p()) // 위와 동일, 2초 뒤
    .then(p) // p함수 실행, 3초 뒤
    .then(() => { // 4초 뒤
        console.log('4000ms 후에 fulfilled 됩니다.')
    })

4000ミリ秒後に完了します.

Promise.resolve( /* value */ );

valueが「基本情報」オブジェクトであるかどうか分からない場合は、このメソッドを使用して関連付けられたメソッドを実行します.

の値が[基本情報](Basic Information)オブジェクトの場合、解析の実行方法が実行されます.

の値が「基本情報」オブジェクトでない場合、パラメータとして値が送信され、このメソッドが実行されます.

Promise.resolve(new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('foo');
    }, 1000);
})).then((data) => {
    console.log('프로미스 객체인 경우, resolve 된 결과를 받아 then 이 실행 됩니다.', data)
})

Promise.resolve('bar').then(data => {
    console.log('then 메서드가 없는 경우, fulfilled 됩니다', data);
})

方法がなければ、完了します.bar
[基本情報](Basic Info)オブジェクトの場合、解析結果が受信され、実行されます.foo
どのオブジェクトがオブジェクトでないか分からない場合はPromise.resolveで1回実行し、スキップします.resolveか、値を直接スキップします.

Promise.reject( /* value */) ;

Promise.「拒否」を使用すると、catchに接続された「拒否」ステータスに変更されます.

Promise.reject(new Error('reason')).then(error => {

}).catch(error => {
    console.log(error);
})

Error: reason
    at Object.<anonymous> (d:\project\javascript\new\promise1.js:97:16)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12)
    at internal/main/run_main_module.js:17:47

Promise.all([promisオブジェクト]);

複数の[基本情報](Basic Info)オブジェクトを作成し、配列としてパラメータとして[基本情報](Basic Info)に配置します.allを実行すると、配列内のすべての基本情報オブジェクトが完了すると、関数が実行されます.次に、関数のパラメータとして解析パラメータ値を配列に戻します.

function p(ms) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve();
        }, ms);
    })
}

Promise.all([p(1000), p(2000), p(3000)]).then(() => {
    console.log('모두 fulfilled 된 이후에 실행됩니다.');
})

すべて完了したら実行します.
3秒後に実行

function p(ms) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(ms);
        }, ms);
    })
}

Promise.all([p(1000), p(2000), p(3000)]).then((messages) => {
    console.log('모두 fulfilled 된 이후에 실행됩니다.', messages);
})

すべて完了したら実行します.[ 1000, 2000, 3000 ]
3秒後に実行

Promise.race([promisオブジェクト]);

複数の[基本情報](Basic Info)オブジェクトを作成し、配列としてパラメータとして[基本情報](Basic Info)に配置します.raceを実行すると、まず配列内のすべての基本情報オブジェクトを完了し、その後、の関数を実行します.次に、の関数パラメータを使用して、最初に完了したプロセスオブジェクトの解析パラメータ値を返します.

function p(ms) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(ms);
        }, ms);
    })
}

Promise.race([p(1000), p(2000), p(3000)]).then((message) => {
    console.log('가장 빠른 하나가 fulfilled 된 이후에 실행됩니다.', message);
})

最も速い完了後に実行します.1000