問(wèn)題描述

問(wèn)題一：我需要用第一次發(fā)送ajax請(qǐng)求回的數(shù)據(jù)作為第二次ajax的參數(shù)，而第二次的ajax是在第一次ajax的回調(diào)函數(shù)里發(fā)送的。但是這里有問(wèn)題！就是第二次ajax返回的數(shù)據(jù)不能賦值給全局對(duì)象的屬性，不知道是不是掉到坑里了。所以想用$q解決。問(wèn)題二：那這個(gè)例子來(lái)說(shuō)吧，// $q 是內(nèi)置服務(wù)，所以可以直接使用 ngApp.factory(’UserInfo’, [’$http’, ’$q’, function ($http, $q) { return {

query : function() { var deferred = $q.defer(); // 聲明延后執(zhí)行，表示要去監(jiān)控后面的執(zhí)行 $http({method: ’GET’, url: ’scripts/mine.json’}). success(function(data, status, headers, config) { deferred.resolve(data); // 聲明執(zhí)行成功，即http請(qǐng)求數(shù)據(jù)成功，可以返回?cái)?shù)據(jù)了 }). error(function(data, status, headers, config) { deferred.reject(data); // 聲明執(zhí)行失敗，即服務(wù)器返回錯(cuò)誤 }); return deferred.promise; // 返回承諾，這里并不是最終數(shù)據(jù)，而是訪問(wèn)最終數(shù)據(jù)的API } // end query

}; }]); deferred.resolve 是為了延遲執(zhí)行嗎？那如果能在回調(diào)函數(shù)里面寫邏輯為什么還要多此一舉的延遲執(zhí)行呢？問(wèn)題三：為什么說(shuō)deferred.promise返回的承諾是最終數(shù)據(jù)api？這個(gè)promise的作用是什么？問(wèn)題四：promise.then執(zhí)行邏輯是什么？

問(wèn)題解答

在回答你所有的問(wèn)題之前，我先對(duì)你的示例代碼做些簡(jiǎn)單說(shuō)明！！

你的示例代碼是一個(gè)典型的Promise的反面教材，其特征就是：無(wú)目的的創(chuàng)建deferred對(duì)象，徒增代碼復(fù)雜度。關(guān)于這點(diǎn)，可以看這里anti-pattern：

糾正問(wèn)題之后，我們?cè)賮?lái)回頭談你的問(wèn)題。

首先，當(dāng)你意識(shí)到自己正在忍受callback hell的時(shí)候，恭喜你，在javascript這條路上，你算上道兒了。那么解決之道有哪些呢？我們最近常見(jiàn)的有：

Promise

generator配合co

async/await

關(guān)于這幾種方式的詳細(xì)介紹，我沒(méi)仔細(xì)翻別人的答案(或許有更好的)，只能把自己之前寫的貼出來(lái)javascript里的異步

OK，介紹了解決callback hell的幾種常見(jiàn)方式，再回頭來(lái)說(shuō)你的Promise問(wèn)題

問(wèn)題一：我需要用第一次發(fā)送ajax請(qǐng)求回的數(shù)據(jù)作為第二次ajax的參數(shù)，而第二次的ajax是在第一次ajax的回調(diào)函數(shù)里發(fā)送的。但是這里有問(wèn)題！就是第二次ajax返回的數(shù)據(jù)不能賦值給全局對(duì)象的屬性，不知道是不是掉到坑里了。所以想用$q解決。

既然我們寄希望于Promise能夠解決回調(diào)地獄的問(wèn)題，拿肯定不會(huì)再是使用回調(diào)的方式，你的疑惑是對(duì)的，可你的問(wèn)題是沒(méi)有充分理解Promise是這么工作的。我先舉個(gè)例子：

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 });});

這是一個(gè)典型的回調(diào)依賴，call2依賴了call1的結(jié)果。如果用Promise改寫，應(yīng)該是什么樣子呢？

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 });

這里有幾個(gè)要注意的地方，1. 無(wú)需不必要的deferred對(duì)象，call1和call2本身返回Promise對(duì)象即可； 2. resolve幾乎扮演了之前cb的角色； 3. 當(dāng)執(zhí)行call1、call2時(shí)，不塞入回調(diào)，而是通過(guò)then拿到返回結(jié)果 4. 尤其return call2(param1);這個(gè)地方，真的不要再度嵌套(很多初入Promise的選手犯的錯(cuò))，直接返回，下一個(gè)then里就能拿到結(jié)果

問(wèn)題二：那這個(gè)例子來(lái)說(shuō)吧

這就是最早說(shuō)的問(wèn)題，你過(guò)度反應(yīng)了，明顯把簡(jiǎn)單問(wèn)題復(fù)雜化了，這么寫足矣：

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

調(diào)用的地方，直接用then就好了：

UserInfo .query() .then(function(data){console.log(data);//這不就是結(jié)果嘍！ });

第三、四個(gè)問(wèn)題都是源于對(duì)Promise本身的實(shí)現(xiàn)沒(méi)概念，我之前寫過(guò)一個(gè)小教程，教大家自己手寫一個(gè)Promise的簡(jiǎn)單實(shí)現(xiàn)，建議你跟著做做，先對(duì)Promise本身有個(gè)大概了解，一步步來(lái)手寫一個(gè)Promise