javascript - 如何按照线性流程链接 promise ？

Question

我的流程有问题，我正在使用 promise 来做到这一点

上下文是:用户单击按钮以使用 ionic 地理位置获取您的位置，ir 返回纬度和日志，然后我想解码坐标以获取城市，最后一步将纬度、经度和城市设置为用户。

tryGeolocation() {       
    this.geolocation.getCurrentPosition().then((resp) => {
      let pos = {
        lat: resp.coords.latitude,
        lng: resp.coords.longitude
      };
      this.lat = resp.coords.latitude;
      this.long = resp.coords.longitude;          
      console.log(this.lat+"--"+this.long);
      this.decodeCoord(this.lat, this.long);
      alert(this.city);
      this.uploadLocation();    
    }).catch((error) => {
      console.log('Error getting location', error);
      this.loading.dismiss();
    });
  }



 decodeCoord(lat, long) {    
    console.log("decodeCoord");
    var latlng = new google.maps.LatLng(lat, long);
    this.geocoder.geocode({'latLng': latlng}, function (results, status) {
      if (status == google.maps.GeocoderStatus.OK) {       
        if (results[1]) {
          var indice = 0;
          for (var j = 0; j < results.length; j++) {
            if (results[j].types[0] == 'locality') {
              indice = j;
              break;
            }
          }   

          let city, region, country;
          for (var i = 0; i < results[j].address_components.length; i++) {
            if (results[j].address_components[i].types[0] == "locality") {
              //this is the object you are looking for City
              city = results[j].address_components[i];
            }
            if (results[j].address_components[i].types[0] == "administrative_area_level_1") {
              //this is the object you are looking for State
              region = results[j].address_components[i];
            }
            if (results[j].address_components[i].types[0] == "country") {
              //this is the object you are looking for
              country = results[j].address_components[i];
            }
          }
          //city data        
          this.city=city;
        } else {
          console.log("No results found");
        }           
      } else {
        console.log("Geocoder failed due to: " + status);
      }
    });      
  }



uploadLocation() {   
    let position = {
      latitude: this.lat,
      longitude: this.long,
      city: this.city
    }  
    this._us.updateUserIndividual(position).then(data => {      
      console.log("USER UPDATED");
    }).catch((err) => {
      this.presentToast("Ups! Ha ocurrido un Error, intentalo otra vez");
    })
  }

我尝试添加 this.decodeCoord(this.lat, this.long);在 uploadLocation 上，但它也不起作用。

这座城市总是空无一人。

Answer 1

this.city 为空，因为您在单独的 this 上下文中分配它。您在定义 this.geocoder.geocode() 时创建了这个新上下文，并使用 function 关键字创建回调函数。用箭头函数替换它，我想你又好了:

this.geocoder.geocode({'latLng': latlng}, (results, status) => {
  // ...
});

但我大错特错了。

this.decodeCoord(this.lat, this.long);
alert(this.city);

那是行不通的。因为我让你改变的回调函数，顾名思义，是一个异步函数。因此，您最好从 decodeCoord 方法返回一个 Promise:

decodeCoord(lat, long) {    
  return new Promise((resolve, reject) => {
    // ...
    this.geocoder.geocode({'latLng': latlng}, (results, status) => {
      if (status == google.maps.GeocoderStatus.OK) { 
        // ...
        resolve();
      } else {
        reject();
      }
    });
  });
}

然后你还没有到达那里，你还需要从你的 updateLocation 方法返回 promise :

return this._us.updateUserIndividual(position).

然后您可以更改 tryGeolocation 方法:

async tryGeolocation() {   
  try {
    const { coords } = await this.geolocation.getCurrentPosition();
    this.lat = coords.latitude;
    this.long = coords.longitude;          

    await this.decodeCoord(coords.latitude, coords.longitude);
    alert(this.city);
    await this.uploadLocation(); 
  } catch (e) {
    console.log('Error getting location', e);
  }  finally {
    this.loading.dismiss();  
  }
}

你就完成了，得到了一个很好的顺序异步等待结果