我有一个array
,它包含来自Google Geocode和Places JavaScript API的定位结果。
Place结果中该数组中的任何元素都包含place_id
值,我想利用它来获取有关该位置的进一步基本信息。
初始数组(uniqueGeoRes
(可以包含多达7个结果。
我搞不清Places API服务和回调,以及在检查了uniqueGeoRes
的所有元素以获取额外的Places数据后如何实现回调。
例如,如果uniqueGeoRes
的所有7个元素都有一个place_id
,我需要使用Places服务来获得每个元素的附加信息。
执行此操作的循环在Places回调完成之前完成,因为外部函数不是异步的。
我认为一个承诺可能会有所帮助,但我仅限于ES3。这是我迄今为止所拥有的。这并没有给出预期的结果,因为当回调完成时,i
的值已经满足q
的值,即使在第一次回调时也是如此。
我完全迷失了方向!
在对新填充的addrOutput
数组执行任何操作之前,如何确保Places回调完成?
var q;
q = 7;
// Set the size of the results array (q is hardcoded maximum value)
if (uniqueGeoRes.length < q) {
q = uniqueGeoRes.length;
}
uniqueGeoRes.length = q;
var addrOutput = [];
//Check for additional Places data
function updatePlace(arr, callback1){
console.log('asyncFunction has been called');
console.log('processing: ', arr);
for (var i = 0; i < q; i++) { // each element in the uniqueGeoRes array
if (arr[i].source = 'Places API') {
// Append extra information from the Place look up on individual place_id
console.log('Getting additional information for PLACES result: ' + arr[i].place_id);
var request = { placeId: uniqueGeoRes[i].place_id, fields: ['address_component', 'formatted_address', 'geometry', 'name'] };
service.getDetails(request, callback);
function callback(place, status) { // Get the additional place information.
if (status == google.maps.places.PlacesServiceStatus.OK) {
addrOutput.push(place);
console.log ('Loop is ' + i + '/' + q + '. addrOutput length is now: ' + addrOutput.length);
if (i === q) {
callback1()
}
} else {
console.warn ('Place Service Status is bad.');
}
}
}
}
};
// Call when asyncFunction completes
function callback1(error) {
if (!error) console.log('asyncFunction is complete');
}
updatePlace(uniqueGeoRes, callback1);
这是当前输出
[Log] asyncFunction has been called (development, line 817)
[Log] processing: – [Object, Object, Object, …] (7) (development, line 818)
[Object, Object, Object, Object, Object, Object, Object]Array (7)
[Log] Getting additional information for PLACES result: ChIJwSc0D-zih0gR2uOIFj2UCv8 (development, line 824)
[Log] Getting additional information for PLACES result: ChIJr_4dcTH9h0gRl1OqMr4OSec (development, line 824)
[Log] Getting additional information for PLACES result: ChIJ9wqvVQ7jh0gRPYUz575U0Bs (development, line 824)
[Log] Getting additional information for PLACES result: ChIJBw3rDLXih0gRivw-FONRgZU (development, line 824)
[Log] Getting additional information for PLACES result: ChIJ774cdbXih0gRwWCg-MxTKjs (development, line 824)
[Log] Getting additional information for PLACES result: ChIJwQnvs5Pih0gR125FEtKwli0 (development, line 824)
[Log] Getting additional information for PLACES result: ChIJXyhtsZPih0gRIZgUPLvv_Ws (development, line 824)
[Log] Loop is 7/7. addrOutput length is now: 1 (development, line 835)
[Log] asyncFunction is complete (development, line 854)
[Log] Loop is 7/7. addrOutput length is now: 2 (development, line 835)
[Log] asyncFunction is complete (development, line 854)
[Log] Loop is 7/7. addrOutput length is now: 3 (development, line 835)
[Log] asyncFunction is complete (development, line 854)
[Log] Loop is 7/7. addrOutput length is now: 4 (development, line 835)
[Log] asyncFunction is complete (development, line 854)
[Log] Loop is 7/7. addrOutput length is now: 5 (development, line 835)
[Log] asyncFunction is complete (development, line 854)
[Log] Loop is 7/7. addrOutput length is now: 6 (development, line 835)
[Log] asyncFunction is complete (development, line 854)
[Log] Loop is 7/7. addrOutput length is now: 7 (development, line 835)
[Log] asyncFunction is complete (development, line 854)
forkJoin可以在这种情况下提供帮助。使用forkJoin,我们可以在所有可观察性都完成时收集可观察器和回调函数。以下链接可能有助于样品
https://rxjs-dev.firebaseapp.com/api/index/function/forkJoinhttps://stackblitz.com/edit/typescript-c3f62b?file=index.ts&devtoolsheight=100
使用Promise.all 可以实现类似的功能
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all