如何使用 Promises 重构这个回调地狱？答案

【问题标题】：How can I refactor this callback hell with Promises?如何使用 Promises 重构这个回调地狱？
【发布时间】：2014-12-11 21:13:43
【问题描述】：

我有一段代码可以使用 facebook v1.0 API 获取我的朋友列表。

FB.api(
  {
    method: 'fql.query',
    query: 'SELECT uid, name, is_app_user FROM user WHERE uid IN (SELECT uid2 FROM friend WHERE uid1=me()) AND is_app_user=1'
  },
  function (response) { // response contains a list of friends
    response.forEach(function(element){ // so for each friend
      FB.api(
        '/' + element.uid + '/friends',
        function (response) { // get a list of THEIR friends
          console.log(response); // and output them
        }
      );
    });
  }
);

我想重构此代码以使用 javascript 承诺和更易读和可维护的 .then() 语法。

澄清一下，我不喜欢在另一个FB.api 调用中进行FB.api 调用的想法。特别是如果我有多个这样的，它们可能会变得非常嵌套。

我想使用 Promise，但我需要能够从之前的 FB.api 调用中传入 response。

我该怎么做？

理想情况下，它看起来像这样：

FB.api(
  {
    method: 'fql.query',
    query: 'SELECT uid, name, is_app_user FROM user WHERE uid IN (SELECT uid2 FROM friend WHERE uid1=me()) AND is_app_user=1'
  },
  function(response){
    return response;
  })
.then(function(friends){
  friends.forEach(function(element){
    FB.api(
      '/' + element.uid + '/friends',
      function (response) {
        console.log(response);
      }
    );
  });
})

【问题讨论】：

标签： javascript facebook-graph-api callback facebook-javascript-sdk promise

【解决方案1】：

首先是一个小实用函数，用于承诺FB.api() ...

//jQuery
function FB_api(options) {
    return $.Deferred(function(dfrd) {
        return FB.api(options, dfrd.resolve);
    }).promise();
}

或

//Bluebird
function FB_api(options) {
    return new Promise(function(resolve, reject) {
        return FB.api(options, resolve);
    });
}

您可以类似地使用Q.js 或when.js ...。

现在，你可以写...

FB_api({
    method: 'fql.query',
    query: 'SELECT uid, name, is_app_user FROM user WHERE uid IN (SELECT uid2 FROM friend WHERE uid1=me()) AND is_app_user=1'
}).then(function(response) { // response contains a list of friends
    response.forEach(function(element) { // so for each friend
        FB_api('/' + element.uid + '/friends').then(function (response) { // get a list of THEIR friends
            console.log(response); // and output them
        });
    });
});

【讨论】：