代码之家 › 专栏 › 技术社区 › Himanshu Chawla

角4函数调用和异步调用问题

angular jquery javascript

Himanshu Chawla · 技术社区 · 6 年前

我试图从同一组件中的另一个函数调用一个函数,但另一个函数不返回任何响应,其他函数调用get call。我不知道如何使用then和promise关键字来等待响应。

请告诉我哪里出错了。

我尝试了其他方法通过navigator函数获取坐标,但它不返回坐标,但当我尝试在浏览器控制台中运行相同的代码时,它返回坐标。

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map, ignoreElements } from 'rxjs/operators' 
import { catchError } from 'rxjs/operators'
import { throwError } from 'rxjs/index' 
import { TouchSequence } from 'selenium-webdriver';
import { ThrowStmt } from '@angular/compiler';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})


export class AppComponent implements OnInit {
  title = 'Weather';
  cityName:string = 'delhi';
  backgroundImageUrl:string = '';
  weatherDetails:object = {};
  iconImageUrl:string= '';
  dataSource:any = {};
  latitude:number;
  longitude: number;

  constructor(private http: HttpClient){

  }

  getUserLocation(): any {
    var obj: object = {};
    navigator.geolocation.getCurrentPosition(locationSuccess, locationError);
   function locationSuccess(position) {
     console.log("success");
     console.log(position.coords);
     obj = position.coords;
   }
   function locationError() {
      console.log("error")
   }

   return obj;
 }

 searchCity(){
    var coords = this.getUserLocation();
    if(coords){
    this.http.get('https://api.openweathermap.org/data/2.5/weather?lat='+coords.latitude+'&lon='+coords.longitude+'&mode=json&appid=')
     .subscribe(
       ((response: any) => {
         this.dataSource = response;
         if(this.dataSource.weather.length > 0){
           this.weatherDetails = this.dataSource.weather.filter(function(el){return el})[0];
           this.switchBackground();
         }
       }),
       catchError((error) => {
          return throwError(error);
       })
     )
   }
 }

 private switchBackground(){
    var weatherId = this.weatherDetails[0].id;
    switch(weatherId){
     case 711:
      this.backgroundImageUrl = '../assets/images/01-smoke.png';
      this.iconImageUrl = '';
      break;
     case 701:
      this.backgroundImageUrl = '../assets/images/02-mist.jpg';
      this.iconImageUrl = '../assets/images/icons/01-cloudy-sky.png';
      break;
     default :
      break;
   }
 }

 // public getLocation(){
//   let promise = new Promise(function(resolve, reject) {
//     resolve('resolved');
//     reject(new Error("Unable to process your request.")); // ignored
//   });
//   promise.then(function(response){
//     this.searchCity();
//   })
// } 

 ngOnInit(){
    this.getUserLocation();
  }
}

我希望用相同的坐标得到http.get调用,但实际上它的坐标是未定义的。你能帮我一下吗? 谢谢你事先的帮助。

1 回复 | 直到 6 年前

Mohammad Waleed 6 年前

你可以用 Promise 检查此代码

  async ngOnInit() {
    // Use 1 use await inside an async method
    console.log(await this.getUserLocation());

    // Use 2 use promise then/catch
    this.getUserLocation().then(coords => {
      console.log(coords);
    }).catch(error => {
      console.log(error);
    })
  }
  getUserLocation(): any {
    return new Promise((resolve, reject) => {
      navigator.geolocation.getCurrentPosition(locationSuccess, locationError);
      function locationSuccess(position) {
        resolve(position.coords);
      }
      function locationError() {
        reject("error");
      }
    });

  }

首先你必须从你的方法中返回一个新的承诺

你 resolve 如果成功或希望返回有用的数据

你 reject 当你有错误的时候

现在在你创建 许诺

你也可以用 await 它将为您解析值,但您只能在 async 功能

或使用 then 和 catch

然后 将返回传递给的值 决定 在你的承诺里

抓住 将返回传递给的值 拒绝 在你的承诺里

这里有一个stackblitz链接到tinker

https://stackblitz.com/edit/angular-rx9us6

P.S:你会在 home.component.ts