使用Promise来获取应用所有数据的高技能!

aki发表于:2017年03月08日 13:05:36更新于:2020年07月09日 10:24:08

本次介绍通过一起来挑战一下kintone API的Promise吧!中介绍的Promise来获取应用中所有数据的方法。

概要

正如一起来挑战一下kintone API的Promise吧!中介绍的那样,新增的kintone REST API 请求的返回值更改成下面这样的了。

<更改前>

 00158e361b87dfb2fe7ad72645b8c00

<更改后>

00158e361b25cd116183ac3f956c4a8

有了这个功能,以前用XMLHttpRequest(以下简称 XHR)进行同步请求的地方就可以使用这个重新改一下了。(至于为啥不推荐XHR的同步处理,请参考一起来挑战一下kintone API的Promise吧!

这个新功能,在developer network上也引起了轰动呢。

关于可进行同步处理的xmlHttpRequest(暂无中文页面)

cybozu developer network上使用XHR进行同步处理的Tips有以下这些。

这次要重新写一下

的代码,然后看动作是否一样。

准备

首先创建应用,添加超过100条的记录。
然后,参考原始Tips编写getAllData.js,在记录列表事件发生时,用console.log输出所有记录试试。(我添加了210多条记录)

00158e4aafd09223adad33d2504a0bc

成功获取了210条记录了。题外话,2015年7月升级后最大可输出500条记录了。这里的话,我指定上限为100条。
另外,使用的浏览器是Google Chrome,认真看一下就会发现提示了如下警告。

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience.
 For more help, check http://xhr.spec.whatwg.org/.

直译的话,意思说同步处理会影响用户的操作,不推荐……对的,不推荐!
使用不推荐的东西总感觉不舒服对吧。如果您也这样想,请务必坚持读完这篇文档。

下面就是getAllData.js的代码。

getAllData.js代码

(function() {
    "use strict";
    kintone.events.on('app.record.index.show', function(event) {
        var offset = 0;
        var records = [];
        var loopendflg = false;
        while (!loopendflg) {
            var query = encodeURIComponent('order by 记录编号 asc limit 100 offset ' + offset);
            var appUrl = kintone.api.url('/k/v1/records') + '?app=' + kintone.app.getId() + '&query=' + query;
            // 进行同步处理
            var xmlHttp = new XMLHttpRequest();
            xmlHttp.open("GET", appUrl, false);
            xmlHttp.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
            xmlHttp.send(null);
            //获取的记录保存到Array
            var respdata = JSON.parse(xmlHttp.responseText);
            if (respdata.records.length > 0) {
                for (var i = 0; respdata.records.length > i; i++) {
                    records.push(respdata.records[i]);
                }
                offset += respdata.records.length;
            }else {
                loopendflg = true;
            }
        }
        console.log(records);
    });
})();

用kintone.Promise对象来重新改一下代码

那么,我们就试着用7月份发布的功能来改一下代码吧。为了便于理解,文件名保存为“getAllDataNew.js”。

getAllDataNew.js代码

(function() {
    "use strict";
    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(kintone.api.url('/k/v1/records', true), 'GET', params).then(function(resp) {
            allRecords = allRecords.concat(resp.records);
            if (resp.records.length === limit) {
                return fetchRecords(appId, offset + limit, limit, allRecords);
            }
            return allRecords;
        });
    }
    fetchRecords(kintone.app.getId()).then(function(records) {
        console.log(records);
    });
})();

重点是:省略kintone.api的callback时会返回kintone.Promise对象的这个功能可以获取所有数据。
将这个代码上传到kintone的应用里,通过浏览器的console查看试试。

00158e4ab00d23a5c790494fc8e89db

成功获取了210条数据了吧。而且也没有那个烦人的警告了。

另外,在一起来挑战一下kintone API的Promise吧!中也提到了,如果记录数量特别大的话,使用XHR时,页面会卡住无法点击等操作。反之,使用kintone.Promise对象的话,在执行代码的时候,也可以毫无障碍地进行其他操作。

最后

这次是使用kintone.Promise对象获取所有记录。
kintone.Promise对象还可以用于其他很多场景,比如说从其他应用获取数据,进行数据结合等不同应用之间的联动。
请大家务必尝试一下。

相关Tips

该Tips在2015年7月版中进行过确认。