更深入地理解Promises

时间:2016-11-20 06:46:45

标签: javascript angularjs angular-promise

在我的控制器中,我有一个分支数组,我需要在其中附加包含lat long的位置对象,即

    {
        "BANK": "B N P PARIBAS",
        "IFSC": "BNPA0009009",
        "MICR CODE": "400034002",
        "BRANCH": "MUMBAI",
        "ADDRESS": "FRENCH BANK BLDG.,62, HOMJI STREET, MUMBAI - 400 001",
        "CONTACT": "0",
        "CITY": "MUMBAI",
        "DISTRICT": "MUMBAI",
        "STATE": "MAHARASHTRA",
        "ZIPCODE": "400 001",
        "location": {
          lat: ,
          long: 
        }
    },

我是通过迭代分支vi angular forEach并在forEach循环内的每个项目上调用getLatLong函数来实现的。

然而,该函数的控制/执行是这样的,它在我从服务调用获得任何结果之前返回deferred.promise。理想情况下,我希望从谷歌地图API获得位置对象,然后当它解析时,我希望结果返回到控制器函数getLatLong并返回该位置对象,该对象又被分配给forEach循环中的item.location。

我的控制器

module.exports = function(AppFactory, $q){
'use strict';

let ctrl = this;
ctrl.showList = true;
ctrl.branches = [
    {
        "BANK": "B N P PARIBAS",
        "IFSC": "BNPA0009008",
        "MICR CODE": "700034002",
        "BRANCH": "KOLKATA",
        "ADDRESS": "UNIT NO. 301, OFFICE NO. 2, 3RD FLOOR, AVANI SIGNATURE,91A/1, PARK STREET,KOLKATA :- 700016",
        "CONTACT": "0",
        "CITY": "KOLKATA",
        "DISTRICT": "KOLKATA",
        "STATE": "WEST BENGAL",
        "ZIPCODE": "700016"

    },
    {
        "BANK": "B N P PARIBAS",
        "IFSC": "BNPA0009009",
        "MICR CODE": "400034002",
        "BRANCH": "MUMBAI",
        "ADDRESS": "FRENCH BANK BLDG.,62, HOMJI STREET, MUMBAI - 400 001",
        "CONTACT": "0",
        "CITY": "MUMBAI",
        "DISTRICT": "MUMBAI",
        "STATE": "MAHARASHTRA",
        "ZIPCODE": "400 001"
    },
    {
        "BANK": "B N P PARIBAS",
        "IFSC": "BNPA0009065",
        "MICR CODE": "110034002",
        "BRANCH": "DELHI",
        "ADDRESS": "1ST FLOOR EAST TOWER (SOOD TOWER), 25, BARAKHAMBA ROAD,NEW DELHI :- 110001",
        "CONTACT": "0",
        "CITY": "DELHI",
        "DISTRICT": "DELHI",
        "STATE": "DELHI",
        "ZIPCODE": "110001"
    },
    {
        "BANK": "B N P PARIBAS",
        "IFSC": "BNPA0009067",
        "MICR CODE": "560034002",
        "BRANCH": "BANGALORE",
        "ADDRESS": "3RD FL,LANDMARK,21/15,M.G.ROAD,BANGLORE-560 001",
        "CONTACT": "0",
        "CITY": "BANGALORE",
        "DISTRICT": "BANGALORE",
        "STATE": "KARNATAKA",
        "ZIPCODE": "560 001"
    },
    {
        "BANK": "B N P PARIBAS",
        "IFSC": "BNPA0009069",
        "MICR CODE": "411034002",
        "BRANCH": "PUNE",
        "ADDRESS": "5 & 6,GODREJ MILLENIUM PARK,9,KOREGAON ROAD,PUNE-411 001",
        "CONTACT": "0",
        "CITY": "PUNE",
        "DISTRICT": "PUNE",
        "STATE": "MAHARASHTRA",
        "ZIPCODE": "411 001"
    }
]


// console.log(ctrl.branches);
function getLatLong(addressOrZip){

    let results;
    let deferred = $q.defer();
    AppFactory.getLatLong(addressOrZip).then(function(res){
        console.log(res);
        deferred.resolve(res);
        // if(res.results.length > 0){
        //     results =  res.results[0].geometry.location;
        // }else{
        //     results =  res.results;
        // }
        // return results;
    }, function(error){
        deferred.reject(res);
    });

    return deferred.promise;

}

ctrl.toggleViews = function(){
    ctrl.showList = !ctrl.showList;

    if(!ctrl.showList){
        angular.forEach(ctrl.branches, function(item){
            let location = getLatLong(item.ZIPCODE );
            console.log(location);
            // let location = getLatLong( item.ADDRESS || item.ZIPCODE );

            // if(location){
            //     item.location = location;
            // }
        })

        console.log("Logging branches with location object...");

        console.log(ctrl.branches);
    }
}

}

然后在我的AppFactory

let getLatLong = function(location){
    // let defferred = $q.defer();
    return $http({
        url: "https://maps.googleapis.com/maps/api/geocode/json?address="+ location +"&key=AIzaSyDGyOrnNj8rrRFR92m6BEMvR24JiYoHtMs"
    }).then(function(response){
        return response.data;
        // defferred.resolve(response.data);
    }, function(error){
        return error;
        // defferred.reject(error);
    });

    // return defferred.promise;
}

我该如何解决这个问题?

1 个答案:

答案 0 :(得分:0)

getLatLong()返回一个promise(这是$http返回的内容)所以你需要在返回的promise上使用then()来访问响应数据

变化:

let location = getLatLong(item.ZIPCODE );
console.log(location);

要:

getLatLong(item.ZIPCODE ).then(function(data){
    item.location = data;
    console.log(item.location);
});

将由您自行决定是否未将错误返回到此then()