背景
これまでは、Googleブログの投稿データは$ajax()を使って取得していました。$ajax()でも問題なく取得できていましたが、最近は、fetch()を使った例題もでてきましたので、今回、fetch()に挑戦してみようと思い立ちました。fetch()の方が多少、ステップ数も少なく、可読性もよさそうなので、、メリットもあるかと思いました。
準備
Google BloggerのAPIを使うには、事前にGoogleアカウントとAPIサービスの認証情報を登録しておきます。これは、Google Cloud Platformサイトを開いて登録します。詳細は省きます。
サンプルのコード
ここのコードは、「なつかしの曲(ポータル)」の本番環境でも使用している
ものです。
//******************************************************************************
//この非同期関数は、ブログサイトから指定のブログの全投稿データを取得します。
//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サービスの認証情報から取得します。
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()を使うよりも可読性がよくなることでしょうか。
、