Promiseとはなにか？

Promiseは非同期処理の仕組み

JavaScriptは、JavaScriptが並行処理をするために導入された仕組み。

kintoneのAPIを実行したときに, opt_callback を省略すると、kintone.Promiseが帰ってくるがこれは Promiseをサポートしているブラウザに標準で入っているPromiseと同じものです。

次のリンクがおすすめです。

JavaScript Promiseの本

なぜ非同期処理が必要なのか？

JavaScriptはプログラムを並列処理をする仕組みがなかった。

次のような処理を考えてみましょう。

APIを実行する
APIの返り値を画面に反映する
他の何かの処理

このときに1の処理に時間がかかるようなケースでは、2.の処理は実行されないだけでなく画面が固まってしまいます。 1 -> 2 を一つずつ処理していくため、3の実行は待たされることになります。

たとえば、3の処理で画面のデザインを変更する処理の場合、実際に画面のデザインが変更されるまでにタイムラグが発生してしまします。

こういった問題を解決するのがPromiseと呼ばれる仕組みです。

kintoneのJSカスタマイズではどういうときにPromiseが帰ってくる？

kintoneのAPIを実行するときに、opt_callback, opt_errback を省略したときに、Promiseが帰ってきます

kintone.api(apiPath, method, params); 
// => return Promise
kintone.api(apiPath, method, params, function(resp) {...}, function(err) {...}); 
// => function(resp) を実行してその返り値を返す

kintoneで使われるPromiseの仕組みがわかったところで、Promiseの仕組みと書き方を説明してきます。

Promiseは値を小さな関数を使って値をつなげていく

Promiseの初期化をする場合は、new kintone.Promise を使います。初期化したPromiseの値に変化を加えるために、then を使います。

var promise = new kintone.Promise(function(resolve, reject) {
    resolve(1);
});

var increment = function(result) {
    return result + 1;
}

var twice = function(result) {
    return result * 2;
}

var outputToConsole = function(result) {
    console.log(result);
}

promise.then(increment) // 1 + 1 -> 2
       .then(increment) // 2 + 1 -> 3
       .then(increment) // 3 + 1 -> 4
       .then(twice) // 4 * 2 -> 8
       .then(twice) // 8 * 2 -> 16
       .then(outputToConsole);

Readable Codeでも紹介されていますが、できるだけthen に渡す関数のスコープを短くするように努めましょう。

kintoneのAPIから帰ってきたPromiseを処理する一例をサンプルコードで見てみよう

Promiseで返される内容を短いスコープのJavaScriptでつなぎ合わせる形で、値を変換しているのがわかるとおもいます。

Promiseの値はどうやって使う？

Promiseの値を直接利用することはできません なぜなら、Promiseは非同期処理できるため、他の関数から触る事はできないからです。そのため、Promiseの値を処理するためには、then に渡す関数の中で処理する必要があります。

Promiseの値を合体したい

Promiseの値を直接触ることができないため、最後の処理でPromiseでされた値の他を使いたいケースが多いと思います。このときは、kintone.Promise.all と kintone.Promise.resolve を使って値の合成をします

var promise = new kintone.Promise((resolve, reject) => resolve(1));
var promise2 = kintone.Promise.resovle(value2);
var promise3 = kintone.api(path, method, params)
                      .then((resp) => {resp.length});
// すべてのPromiseが完了した後に値をつかってXXをする
kintone.Promise.all([promise, promise2, promise3])
               .then((result) => {
                   var value0 = result[0];
                   var value1 = result[1];
                   var value2 = result[2];
               });

一つの値を作るのに 1Promiseを作るイメージを持ってもらえるといいかと思います。

エラー処理を書きたい

kintone.Promise.catch を使うとエラー処理を書くことができます。kintone.Promise.reject が呼ばれたときにcatch に渡した関数が呼ばれます。

var promise = kintone.Promise.reject(new Error("error"));

promise
 .then((result) => console.log(result)) // 呼ばれない
 .catch(result) => alert(result));

yokotaso/promise.md