REST APIの処理が最後まで流れない

いつもお世話になっております。

 

早速ですが、表題の件についてです。

submit.successイベントのタイミングでREST APIを使用しているのですが、リクエスト数が多いためか、処理が最後まで流れずに新規登録画面から詳細画面へと切り替わってしまいます。

 

デバック実行では正常に動作いたしましたので、コードは問題ないようです。

(デバック実行中は画面のロードを手動で止めました)

 

console.logで確認しましたが、やはり途中までしか処理が流れておりません。

 

ネストは10階層ほどあります。(ネスト中にGETリクエストが多数あります)

処理を最後まで流すにはどうしたらよいでしょうか。

 

解決のヒントや原因が分かる方がいらっしゃいましたら、ご回答お願いいたします。

髙木さん

REST API の完了を待たずに、submit.successイベント処理を完了させてしまっているのが原因です。

submit.successイベント処理が完了すると、画面遷移します。

Promise 対応して、REST API の完了時にイベント処理を完了(return event;)させましょう。

参考

kintone API で Promise を使ってみよう!

rex0220様、ご回答ありがとうございます!

 

promiseを使用してみたのですが、ネスト毎に関数化しているため正常に動作していないようです。

(再帰呼び出しも実行しています)

 

思惑通りの動作を実現するためには、関数化せず実行したら可能なのでしょうか?

.then をつなげていけば、関数を順番に呼び出せます。

return function_a().then(function(resp){
return function_b();
}).then(function(resp){
return function_c();
}).then(function(resp){
return function_d();
}).then(function(resp){
return event;
});

rex0220様、ご返信ありがとうございます! コードを参考にさせていただきコーディングしたのですが、下記のエラーが発生して正常に動作いたしません。

Uncaught TypeError: function_a(…).then is not a function

 

ひとつめのfunction_aは動作いたしまして、その次のthenのところでエラーになっているようですが、なにが原因でしょうか? 下記が実際に使用したサンプルのコードになります。 function function_a() {
var test = 1;
return(test);
}
function function_b(test) {
return (test);
}
function function_c(test) {
return (test);
}
kintone.events.on(‘app.record.create.submit.success’, function(event) {
// テスト
return function_a().then(function(resp) {
return function_b(resp);
}).then(function(resp) {
return function_c(resp);
}).then(function(resp) {
return event;
});
});

 

関数が非同期処理ではないため、エラーになっています。

then は、Promise 対応した関数を呼ぶときに使ってください。

kintone API で Promise を使ってみよう!

「リクエスト系 APIでcallbackを省略するとPromiseオブジェクトが返される」という変更点に対応した点

rex0220様、ご返信ありがとうございます!

 

エラーの原因は承知いたしました。ありがとうございます!

 

リンク先を参考にしたのですが、下記の点でご相談させてください。

・thenでつなげる場合のpromise文の記述方法

・作成したpromise関数の再帰呼び出しの方法

・引数が10個程度ある場合、どのように設定するか

 

色々と試してみてはいるのですが、なかなか上手くいきません。

 

上記につきまして、教えていただけますと助かります。

よろしくお願いいたします。

こんな感じで

あと、引数が10個程度あっても単純に並べてもいいし、オブジェクトにまとめてもいいと思います。

 

// 再帰処理
function fetchRecords(appId, opt_offset, opt_limit, opt_records) {
var offset = opt_offset || 0;
var limit = opt_limit || 100;
var allRecords = opt_records || [];
var params = {app: appId, query: 'order by レコード番号 asc limit ' + limit + ' offset ' + offset};
return kintone.api('/k/v1/records', 'GET', params).then(function(resp) {
allRecords = allRecords.concat(resp.records);
if (resp.records.length === limit) {
return fetchRecords(appId, offset + limit, limit, allRecords);
}
return allRecords;
});
}

// prms にまとめた
function function_a(prms) {
...
return kintone.api('/k/v1/records', 'GET', params).then(function(resp) {
return resp;
});
}

// promise
function function_b() {
...
return new kintone.Promise(function(resolve, reject) {
...
resolve('ok');
});
}

// kintone.api リクエスト系 APIでcallbackを省略するとPromiseオブジェクトが返される
function function_c() {
...
return kintone.api('/k/v1/record', 'POST', params).then(function(resp) {
return resp;
});
}


kintone.events.on('app.record.create.submit', function(event) {

// 再帰処理
return fetchRecords(kintone.app.getId()).then(function(records) {

// パラメータをまとめてみた
var prms = {
p1: 'aa',
...
p10: 'xxx'
}
return function_a(prms);
}).then(function(resp) {
return function_b();

}).then(function(resp) {
return function_c();

}).then(function(resp) {
return event;

});
});

rex0220様、ご返信ありがとうございます!

 

とても分かりやすくて理解が出来ました。

しかしながら、いただきましたサンプルコードを参考にコーディングしてみたのですが、下記のエラーが一つ目のfunctionで出てしまいます。

 

Uncaught TypeError: Cannot read property ‘then’ of undefined

 

一つ目のfunction内には「リクエスト系 APIでcallbackを省略するとPromiseオブジェクトが返される」構文にてAPIを記述しております。

 

何が原因なんでしょうか?

具体的には下記のコードになります。

 

const SUBMIT_SUCCESS    = [‘app.record.create.submit.success’, ‘app.record.edit.submit.success’];

 

kintone.events.on(SUBMIT_SUCCESS, function(event) {
serachCustomer(event);
});

 

function serachCustomer (event) {
return function_a(event).then(function(resp) {
return function_b(resp);
}).then(function(resp) {
return event;
});
}

function function_a (event) {
var param = {
app: appid,
};
return kintone.api(kintone.api.url(‘/k/v1/records’, true), ‘GET’, param, function(resp) {
if (resp.records.length === 0) {
return event;
}
return resp;
});
}

 

function function_b (value) {
var param = {
app: appid,
};
return kintone.api(kintone.api.url(‘/k/v1/records’, true), ‘GET’, param, function(resp) {
if (resp.records.length === 0) {
return event;
}
return resp;
});
}

イベント終了時に Promiseオブジェクト(event) を返しましょう。

return serachCustomer(event);

 

 

rex0220様、ご返信ありがとうございます!

 

教えていただきました通りに実行してみましたが、下記のエラーが1つ目の実行function「function_a」のapiを送信するタイミングで発生してしまいます。

 

Uncaught TypeError: Cannot read property ‘then’ of undefined

 

原因が分かりましたら教えていただけますと助かります。

よろしくお願いいたします。

>Uncaught TypeError: Cannot read property ‘then’ of undefined

このエラーは、Promise オブジェクトが返っていないからですね。

ブラウザーのデバッグツールを使って、どの処理から帰ってきたときにエラーとなっているか調べてみましょう。

rex0220様、ご返信ありがとうございます!

 

ゼロから学習しなおしまして、実装することが出来ました。

呼び出す関数の中にpromise文を書くところが分かっておりませんでした。

 

Promiseオブジェクトを返すポイントと根本的にPromiseについての理解が出来ていなかったようです。

 

rex0220様の様々なご助言のおかげで、解決することが出来ました!

ありがとうございました!