こんにちは。今回は非同期処理で使うPromiseについて、使い方を紹介していきます。

Promiseは同期、非同期処理の考え方が分からないとチンプンカンプンになってしまうので、よく分からない方は先にこちらの記事をご覧ください。

【JavaScript】非同期処理と処理の順番について【初心者・入門】

JavaScriptは同期的でシングルスレッドの処理で実行されていますが、非同期処理が可能な言語です。ここでは、非同期処理と同期処理・スレッドについてまず説明し、その後遅延処理について説明していきます。同期処理はプログラムの記述順に1つずつ実行されます。そのため、次の処理は前の処理が終わらないと実行するこ...

nyanblog2222.com

2020.06.02

Promiseは非同期処理が完了した後に結果を返しています。
それでは、基本的な記述方法から始めていきましょう。

基本的な「Promise」の書き方

まずは、Promiseオブジェクトを生成することです。
newでPromiseのオブジェクトを、objに設定します。

var obj = new Promise(function(resolve, reject) {
    resolve("成功");
});

また、Promiseの引数の関数では、二つの関数を引数として取ることができ、それぞれ以下の状態での処理を実施することができます。

・resolve：処理成功時の処理
・reject：処理失敗時の処理

「then」を使ってコールバック処理を実行する方法

続いて、Promiseでthenを使用してコールバック処理を実行してみましょう。

var promise_obj = new Promise(function(resolve, reject) {
    resolve();
});

promise_obj.then(function(success, failure) {
    console.log("こっちが後に出力されるよ");
});

console.log("こっちが先に出力されるよ");

then関数はPromiseが返され、処理が成功もしくは失敗した場合にコールバック関数を取ります。

また、Promise.then()は非同期処理のため、6行目の方が先に処理として登録されますが、8行目の方が先に実行されます。
このように、非同期処理では時間がかかる処理が終わる前に後の処理が完了することがあります。

いかがでしたでしょうか。
今回はPromiseを使って基本的な非同期処理の制御方法について、ご紹介していきました。
他にもさまざまな関数が使用できるので、良かったら試してみてください。

投稿 【JavaScript/JS】Promiseの使い方(then/resolve/reject) は nyanblog ~にゃんぶろぐ~ に最初に表示されました。