javascript - 更深入地理解 Promise

Question

在我的 Controller 中，我有一个分支数组，我需要将包含经纬度的位置对象附加到它的每个项目，即

    {
        "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 获得位置对象，然后当它解析时，我希望将结果返回到 Controller 函数 getLatLong 并返回该位置对象，该对象又被分配给 forEach 循环中的 item.location 。

我的 Controller

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

我该如何解决这个问题？

Answer 1

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()