複数のgoogleCalendarからイベントを取得（thenをloopしたい？）

async await　あたりが、どうしても実務で使えるような理解に追いつかないっぽいです。。。

複数のGoogleCalendarからエベントを取得して、マージしたものをサイトに使いたく、
まずはGoogleAppScriptでスプレッドシートに書き出し→スプレッドシートをAPIとして利用
を行いました。
ただ、なんか、不安定で、時々返ってこないでエラーになることが起きるので、
直接GoogleCalendarから呼び出そうかな？と考えました。
そして、書いたのが↓です。

IDs = [ 111 , 222, 333 ] //実際はgoogleCalendarのID
PARAMS = {
  // 取得時に使うパラメーター
}

async function getCalEvents(cal) {
  gapi.client.init({
    'apiKey': API_KEY,
  }).then(function() {
    return gapi.client.request({
      'path': 'https://www.googleapis.com/calendar/v3/calendars/' + encodeURIComponent(cal.calID) + '/events',
      'params': PARAMS
    })
  }).then(function(response) {
    console.log(response)  //※A
  }, function(reason) {
    console.log('Error: ' + reason.result.error.message);
  });
};

let ev = []
for (let i = 0; i < CALENDAR_IDs.length; i++ ) {
  gapi.load('client', function(){
    getCalEvents(CALENDAR_IDs[i]).then(function(res) {
      ev.push(res)
    })
  });
  console.log(ev)  //※B
}

すると、結果は

// ※Bのlog
[undefined, undefined, undefined]

// ※Aのlog
CalendarID 111 の結果Object
CalendarID 222 の結果Object
CalendarID 333 の結果Object

になります。
getCalEventsの1個目のthenの中にfor文および、配列へのpushを持たせたり、いろいろしてみたのですが、うまくいかず。。。

なにか方法はありませんでしょうか？

行動規範の内容に同意します

回答2件

IDを渡す度にAPIを初期化するのかとか

ご指摘いただきました、毎度initしてるのおかしいね、ということも合わせて、
下記で解決しました！

const CALENDAR_IDs = [
  {'googleCalendarId': 'hogeid', 'someProp': 'hoge'},
  {'googleCalendarId': 'fugaid', 'someProp': 'fuga'},
  {'googleCalendarId': 'hegaid', 'someProp': 'hega'}
]

var ev = [];
gapi.load('client', function(){
  gapi.client.init({
    'apiKey': API_KEY,
  }).then(() => {
    CALENDAR_IDs.reduce((a, c) => {
      return a.then(() => {
        return gapi.client.request({
          'path': 'https://www.googleapis.com/calendar/v3/calendars/' + encodeURIComponent(c.googleCalendarId) + '/events',
          'params': PARAMS
        }).then(res=>ev.push(res.result.items));
      })
    },Promise.resolve()).then(() => {
      ev = ev.flat();
    })
  })
})

投稿2021/04/15 06:36

nieve

総合スコア33

ベストアンサー

まずはPromiseとは何なのかを理解するところから始めましょう。
そこがあやふやだとここで回答を得られても何にもなりません。
ですが、そこまで解説するのはものすごく面倒なので、そこは自力で何とかして下さい。

google apiに関しては知らないので、getCalEventsに文字列を渡しているのに
内部ではオブジェクトとして扱っているだとか、IDを渡す度にAPIを初期化するのかとか、
その辺りの事については解決しているものとして回答します。

console.log(ev)の部分が実行される前に、for内部で回していた処理が全て完了するのを待ちましょう。
配列とPromiseの組み合わせなのでPromise.allを使いたい所ですが、gapi.client.init絡みで
余計な事故が起こりそうなため、Array.reduceを使うパターンで回答します。

javascript
1const ev = [];
2CALENDAR_IDs.reduce((p,v)=>
3{
4    return p.then(()=>
5    {
6        return gapi.load("client",()=>
7        {
8            return getCalEvents(v)
9            .then(res=>ev.push(res));
10        });
11    });
12},Promise.resolve())
13.then(()=>
14{
15  console.log(ev);
16});