背景

これまでは、Googleブログの投稿データは$ajax()を使って取得していました。$ajax()でも問題なく取得できていましたが、最近は、fetch()を使った例題もでてきましたので、今回、fetch()に挑戦してみようと思い立ちました。fetch()の方が多少、ステップ数も少なく、可読性もよさそうなので、、メリットもあるかと思いました。

準備

Google BloggerのAPIを使うには、事前にGoogleアカウントとAPIサービスの認証情報を登録しておきます。これは、Google Cloud Platformサイトを開いて登録します。詳細は省きます。

サンプルのコード

ここのコードは、「なつかしの曲(ポータル)」の本番環境でも使用している
ものです。

get_allpost.js


//******************************************************************************
//この非同期関数は、ブログサイトから指定のブログの全投稿データを取得します。
//get_allpost(nextPageToken,post_flag,count,apiUrl)
//このデータを使用して、「なつかしの曲」などのWebサイトを作成。
//指定ブログの全投稿データを取得
//50件づつの繰り返し
//******************************************************************************

async function get_allpost(nextPageToken,post_flag,count,apiUrl){
    var post_list=[];
    var iii = 0;
    //APIコールの繰り返し
    //
    while(iii === 0){
             //   
             await new Promise((resolve) => {
                        //
                        if (nextPageToken === "") {
                            if (post_flag !== false) {
                                return;
                            }
                            post_flag = true;
                        }
                        jQuery.support.cors = true;
                        //nextPageTokenが存在する場合はURLパラメータに追加する
                        if (nextPageToken !== "") {
                            apiUrl += "&pageToken=" + nextPageToken;
                        }
                        //
                        //fetch()対応するには
                        //async get_ajax()を作る 
                        async function get_ajax(){
                                //
                                await fetch(apiUrl).
                                then(response => response.json()).then(data => {
                                console.log(data);
                                Array.prototype.push.apply(content, data.items);
                                if (typeof data.nextPageToken !== "undefined") {
                                    //data.nextPageToken が存在する場合(=取得記事が複数ページに渡る場合)
                                    //記事取得処理を再帰呼び出しする。
                                    nextPageToken = data.nextPageToken;
                                    console.log(nextPageToken);
                                    resolve();

                                } else {
                                    //alert("全てのデータを取得しました。 ");
                                    //
                                    resolve();
                                    iii = 1;
                                }  
                                
                                });

                        }//async get_ajax() end
                        get_ajax();
                            
             });//await end

    }//while end
    return content;
}

動作しなかった原因

これまでは、 await fetch(apiUrl).のところを$ajax()で行っていました。
非同期のfetch()を使うために、async,awaitを使用しました。
while()文を使っているのはfetch()を繰り返すためです。このAPIではMax
50件の投稿データが取得できますが、投稿データが数百件にもなると、繰り返し
が必要になります。
今回、fetch()の繰り返しがうまく行かず、当初は、最初の一回しか、投稿
データを取得できていませんでした。
原因は、resolve()関数を出すタイミングでした。

一通りの動作確認

上記のコードで、繰り返しの動作も確認できました。

呼び出し側

以下は、上の関数を呼び出す側のコードです。

apiUrlのBLOG_IDとAPI_KEYは、APIサービスの認証情報から取得します。

呼び出し.js

var apiUrl = "https://www.googleapis.com/blogger/v3/blogs/" + BLOG_ID + "/posts?maxResults=50&key=" + API_KEY;
        alert("async while");
        //呼び出し形式
        //パラメータ apiUrlはAPI呼び出しの形式　一回につきMAX50件の投稿データを取得
        get_allpost("",false,null,apiUrl).then(function(result){
　　　　以下は、全ての投稿データを取得後に実行します。、　　　　
        省略
        ...........
        }

感想

このblogger APIをfetch()で呼び出すところは、真ん中あたりの、await fetch(apiUrl).then(...)のところです。その前後のコードは、APIを繰り返し処理するためのものです。fetch()の代わりに$ajax()を使うこともできます。メリットとしては、fetch().then()のようにメソッドチェーンすることで、$ajax()を使うよりも可読性がよくなることでしょうか。

、