fetch()を使ってGoogle Blogger API v3で投稿データを取得しました。

[ajax]:https://api.jquery.com/jquery.ajax/
# 背景

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

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

# サンプルのコード
ここのコードは、「なつかしの曲(ポータル)」の本番環境でも使用している
ものです。
``` javascript: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][ajax]()で行っていました。
非同期のfetch()を使うために、async,awaitを使用しました。
while()文を使っているのはfetch()を繰り返すためです。このAPIではMax
50件の投稿データが取得できますが、投稿データが数百件にもなると、繰り返し
が必要になります。
今回、fetch()の繰り返しがうまく行かず、当初は、最初の一回しか、投稿
データを取得できていませんでした。
原因は、resolve()関数を出すタイミングでした。

# 一通りの動作確認

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

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

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

```javascript:呼び出し.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][ajax]()を使うこともできます。メリットとしては、fetch().then()のようにメソッドチェーンすることで、[$ajax][ajax]()を使うよりも可読性がよくなることでしょうか。

、