1

我是异步进程的新手，我不明白为什么我当前尝试存储从 fetch 请求到 api 的响应的方法不起作用。

我正在构建 Angular 应用程序，其中有一个 api.service.ts 文件，我在其中定义了我的 fetch 函数。当我在组件中使用这些函数并尝试使用响应设置变量时，在函数调用中我可以访问响应，但在外部它就像我从未设置变量值一样。

我的 api.service.ts 文件目前：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  API_Key = 'cf002751564a4c78f5f7ed479f1b9ba3';

public getWeatherCity(city_name) {
    return new Promise((resolve, reject) => {
      fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city_name}&appid=${this.API_Key}`)
        .then(response => {
          return response.json();
        }).then(data_fetched => {
          let data = data_fetched.results;
          resolve(data);
        })
    })
};

constructor(private http: HttpClient) { }
}

但是我也尝试过

public getWeatherCity(city_name) {
return this.http.get(`https://api.openweathermap.org/data/2.5/weather?q=${city_name}&appid=${this.API_Key}`);
}

我尝试在其中使用 api.service 的 component.ts：


import { Component, OnInit } from '@angular/core';
import { ApiService } from '../../api.service';
import { SearchComponent } from '../search.component';
import { FormBuilder } from '@angular/forms';



@Component({
  selector: 'app-city',
  templateUrl: './city.component.html',
  styleUrls: ['./city.component.css']
})
export class CityComponent implements OnInit {
  cityName;
  displayResults = false;
  weather;
  weatherLocation;

  constructor(private apiService: ApiService) { }

  ngOnInit(): void {
    this.cityName = "Cleveland";
    this.apiService.getWeatherCity(this.cityName).then(data => {
      this.weather = data
      this.weatherLocation = data['name'];
      console.log(this.weather);
    })
    console.log(this.weather);
    console.log(this.weatherLocation);
  }

 
}

我希望得到第一个和第二个 console.log(this.weather) 的结果，但是我得到第一个的结果（在 fetch 函数内），但第二个返回 undefined（在 fetch 函数之外）。我不确定我对这里的异步函数有什么不了解。当然，必须有一种方法来存储响应，以便可以在函数之外访问它。

我确实意识到我可以在 getWeatherCity 函数中修改我的 html，但这似乎是一个混乱且不可取的解决方案。

任何帮助将不胜感激。

4

2 回答 2

0

您的第二个和第三个 console.logs 发生在您的 apiService.getWeatherCity() 返回之前。它是异步的，因此不会阻塞执行。服务请求被触发，并立即命中下一行。接下来。在某个时候，服务调用返回，您的 .then() 方法运行。

于 2021-01-31T01:21:51.417 回答
0

如果要使用，http.get则需要订阅流，因为 http.get 返回一个Observable：

  public getWeatherCity(city_name) {
    return this.http.get(
      `https://api.openweathermap.org/data/2.5/weather?q=${city_name}&appid=${
        this.API_Key
      }`
    );
  }

// ....

  ngOnInit(): void {
    this.cityName = "Cleveland";
    this.subscription = this.apiService
      .getWeatherCity(this.cityName)
      .subscribe(data => {
        this.weather = data;
        this.weatherLocation = data["name"];
        console.log(this.weather);
        console.log(this.weatherLocation);
      });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

https://stackblitz.com/edit/angular-ivy-bzcnj2?file=src%2Fapp%2Fapp.component.ts

于 2021-01-31T01:24:18.073 回答