angular.js - angularjs $q的promise 怎么解决嵌套的ajax问题？

问题描述

问 题

问题一：我需要用第一次发送ajax请求回的数据作为第二次ajax的参数，而第二次的ajax是在第一次ajax的回调函数里发送的。但是这里有问题！就是第二次ajax返回的数据不能赋值给全局对象的属性，不知道是不是掉到坑里了。所以想用$q解决。
问题二：那这个例子来说吧，
// $q 是内置服务，所以可以直接使用
ngApp.factory('UserInfo', ['$http', '$q', function ($http, $q) {
return {

query : function() {  
  var deferred = $q.defer(); // 声明延后执行，表示要去监控后面的执行  
  $http({method: 'GET', url: 'scripts/mine.json'}).  
  success(function(data, status, headers, config) {  
    deferred.resolve(data);  // 声明执行成功，即http请求数据成功，可以返回数据了  
  }).  
  error(function(data, status, headers, config) {  
    deferred.reject(data);   // 声明执行失败，即服务器返回错误  
  });  
  return deferred.promise;   // 返回承诺，这里并不是最终数据，而是访问最终数据的API  
} // end query  

};
}]);
deferred.resolve 是为了延迟执行吗？那如果能在回调函数里面写逻辑为什么还要多此一举的延迟执行呢？
问题三：为什么说deferred.promise返回的承诺是最终数据api？这个promise的作用是什么？
问题四：promise.then执行逻辑是什么？

解决方案

在回答你所有的问题之前，我先对你的示例代码做些简单说明！！

你的示例代码是一个典型的Promise的反面教材，其特征就是：无目的的创建deferred对象，徒增代码复杂度。关于这点，可以看这里anti-pattern：

纠正问题之后，我们再来回头谈你的问题。

首先，当你意识到自己正在忍受callback hell的时候，恭喜你，在javascript这条路上，你算上道儿了。那么解决之道有哪些呢？我们最近常见的有：

• Promise

• generator配合co

• async/await

关于这几种方式的详细介绍，我没仔细翻别人的答案(或许有更好的)，只能把自己之前写的贴出来javascript里的异步

OK，介绍了解决callback hell的几种常见方式，再回头来说你的Promise问题

问题一：我需要用第一次发送ajax请求回的数据作为第二次ajax的参数，而第二次的ajax是在第一次ajax的回调函数里发送的。但是这里有问题！就是第二次ajax返回的数据不能赋值给全局对象的属性，不知道是不是掉到坑里了。所以想用$q解决。

既然我们寄希望于Promise能够解决回调地狱的问题，拿肯定不会再是使用回调的方式，你的疑惑是对的，可你的问题是没有充分理解Promise是这么工作的。我先举个例子：

var call1 = function(cb) {
    setTimeout(function() {
        cb('call1');
    }, 10);
};

var call2 = function(param1, cb) {
    setTimeout(function() {
        cb(param1 + ' + call2');
    }, 10);
};

call1(function(param1) {
    call2(param1, function(param2) {
        console.log(param2); //call1 + call2
    });
});

这是一个典型的回调依赖，call2依赖了call1的结果。如果用Promise改写，应该是什么样子呢？

var call1 = function() {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            resolve('call1');
        }, 10);
    });
};

var call2 = function(param1) {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            resolve(param1 + ' + call2');
        }, 10);
    });
};

call1()
    .then(function(param1) {
        return call2(param1);
    })
    .then(function(param2) {
        console.log(param2); //call1 + call2
    });

这里有几个要注意的地方，1. 无需不必要的deferred对象，call1和call2本身返回Promise对象即可； 2. resolve几乎扮演了之前cb的角色； 3. 当执行call1、call2时，不塞入回调，而是通过then拿到返回结果 4. 尤其return call2(param1);这个地方，真的不要再度嵌套(很多初入Promise的选手犯的错)，直接返回，下一个then里就能拿到结果

问题二：那这个例子来说吧

这就是最早说的问题，你过度反应了，明显把简单问题复杂化了，这么写足矣：

ngApp.factory('UserInfo', ['$http', '$q', function($http, $q) {
    return {
        query: function() {
            return $http({method: 'GET', url: 'scripts/mine.json'});
        }
    };
}]);

调用的地方，直接用then就好了：

UserInfo
    .query()
    .then(function(data){
        console.log(data);//这不就是结果喽！
    });

第三、四个问题都是源于对Promise本身的实现没概念，我之前写过一个小教程，教大家自己手写一个Promise的简单实现，建议你跟着做做，先对Promise本身有个大概了解，一步步来手写一个Promise

这篇关于angular.js - angularjs $q的promise 怎么解决嵌套的ajax问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！