javascript - Google Calendar API 和 JS Promise

Question

我正在尝试使用 Google Calendar API 编写我的第一个原生 JS promise。我已经剥离了 Google Calendar API 的 JavaScript 快速入门代码，并让它从我的日历中返回一个包含 10 个对象的数组作为“事件”。

我正在尝试，在普通 JS 中，使该 API 调用成为一个 promise ，然后，当它被解决时，对数据做一些事情(为简单起见，我只是尝试 console.log 它)。

这是基本的 G-Calendar API 调用代码。

var CLIENT_ID = 'SUPER_SECRET_ID_GOES_HERE';
var SCOPES = ["https://www.googleapis.com/auth/calendar.readonly"];

function checkAuth() {
    gapi.auth.authorize(
      {
        'client_id': CLIENT_ID,
        'scope': SCOPES.join(' '),
        'immediate': true
      }, handleAuthResult);
}

function handleAuthResult(authResult) {
  if (authResult && !authResult.error) {
    loadCalendarApi();
  }
}

function loadCalendarApi() {
  gapi.client.load('calendar', 'v3', listUpcomingEvents);
}

function listUpcomingEvents() {
  var request = gapi.client.calendar.events.list({
    'calendarId': 'primary',
    'timeMin': (new Date()).toISOString(),
    'showDeleted': false,
    'singleEvents': true,
    'maxResults': 10,
    'orderBy': 'startTime'
  });

  request.execute(function(resp) {
    var events = resp.items;
    // console.log(events)
    // return( events )
    // these are the event objects I want my promise to 
  })
}

现在我知道原生 JS promise 的基本结构看起来像这样......

function testPromise() {

  var p1 = new Promise(
    function(resolve, reject) {
        //Google-Calendar-API-Call Goes Here 
    }
  );

  p1.then(
    function(val) {
      console.log(val)
    })
  .catch(
    function(reason) {
      console.log('Handle rejected promise (' + reason + ') here.');
    });
}

我已经尝试了一些调用 resolve(loadCalendarApi) 和/或 resolve(listUpcomingEvents) 的不同方法，但没有得到任何控制台日志。

我做错了什么，我应该如何正确使用我对 Google-Calendar API 的 promise ？

Answer 1

function listUpcomingEvents() {
  //List upcoming events will return a new Promise
  return new Promise(function(resolve,reject){

    var request = gapi.client.calendar.events.list({
      'calendarId': 'primary',
      'timeMin': (new Date()).toISOString(),
      'showDeleted': false,
      'singleEvents': true,
      'maxResults': 10,
      'orderBy': 'startTime'
    });

    request.execute(function(resp) {
      var events = resp.items;

      //After the request is executed, you will invoke the resolve function with the result as a parameter.
      resolve(events);
    })
  });
}

当您调用 listUpcomingEvents 时，您必须返回一个新的 promise ，这将代表一个尚未完成的操作；当您调用 resolve 或 reject 时，此操作将完成，如果已解决，它将继续执行 then 或如果被拒绝，则执行 catch。

调用 listUpcompingEvents 看起来像这样:

listUpcomingEvents().then(function(events){
  //Whatever goes after
}).catch(function(err){
  //What happens if the promise was rejected
});

希望这有帮助:)