Angular中实现按钮触发Promise重复调用API获取不同JSON数据

嘿，我来帮你搞定这个需求！你现在已经能通过Promise拿到JSON数据了，要实现点击按钮刷新数据，只需要把API调用的逻辑封装成可重复触发的方法，然后在组件里绑定按钮的点击事件来调用它就行。下面分两步来改：

1. 完善QuotesProvider，封装可重复调用的API方法 #

首先修改你的quotes-provider.ts，把获取Quote的逻辑抽成一个独立的方法（比如getNewQuote()），这样每次调用这个方法都会发起新的API请求，拿到不同的结果。这里我帮你补全并优化了代码：

import { Injectable } from "@angular/core";
import { Http } from '@angular/http';
import { Quote } from './quote.model';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise'; // 引入toPromise把Observable转成Promise

@Injectable()
export class QuotesProvider {
  // 可选：存储当前的quote，方便后续快速获取
  private currentQuote: Quote;

  constructor(private http: Http) {}

  // 封装成可重复调用的方法，返回Promise<Quote>
  getNewQuote(): Promise<Quote> {
    // 替换成你的实际API地址
    return this.http.get('YOUR_API_ENDPOINT_HERE')
      .map(response => response.json() as Quote)
      .toPromise()
      .then(quote => {
        this.currentQuote = quote; // 更新当前存储的quote（可选操作）
        return quote;
      })
      .catch(error => {
        console.error('获取Quote失败:', error);
        // 可根据需求处理错误，比如返回默认值或抛出错误
        return Promise.reject(error);
      });
  }

  // 可选：获取当前已存储的quote
  getCurrentQuote(): Quote {
    return this.currentQuote;
  }
}

说明：

• 新增了toPromise()操作符，把Angular Http返回的Observable转换成Promise，贴合你当前的技术栈。
• 将API调用逻辑独立到getNewQuote()方法中，确保每次调用都会发起全新的请求。
• 保留了currentQuote属性用于存储最新数据，你可以根据实际需求选择是否保留。

2. 在组件中添加按钮并绑定点击事件 #

假设你有一个展示Quote的组件（比如QuoteComponent），现在要在模板里添加按钮，点击时触发刷新逻辑：

组件类（quote.component.ts） #

import { Component, OnInit } from '@angular/core';
import { QuotesProvider } from './quotes-provider';
import { Quote } from './quote.model';

@Component({
  selector: 'app-quote',
  templateUrl: './quote.component.html'
})
export class QuoteComponent implements OnInit {
  currentQuote: Quote;

  constructor(private quotesProvider: QuotesProvider) {}

  ngOnInit() {
    // 页面初始化时先获取一次Quote
    this.loadNewQuote();
  }

  // 按钮点击触发的方法
  onRefreshQuote() {
    this.loadNewQuote();
  }

  // 封装加载Quote的逻辑，避免重复代码
  private loadNewQuote() {
    this.quotesProvider.getNewQuote()
      .then(quote => {
        this.currentQuote = quote; // 更新组件数据，模板会自动刷新
      })
      .catch(error => {
        // 错误处理，比如给用户提示
        alert('获取新Quote失败，请稍后重试');
      });
  }
}

组件模板（quote.component.html） #

在模板里添加按钮和Quote展示区域：

<div *ngIf="currentQuote">
  <h3>{{ currentQuote.content }}</h3>
  <p>—— {{ currentQuote.author }}</p>
</div>
<button (click)="onRefreshQuote()">获取新Quote</button>

这样一来，每次点击按钮，都会触发onRefreshQuote()方法，进而调用Provider的getNewQuote()发起新的API请求，拿到新数据后更新组件的currentQuote，模板就会自动刷新显示最新内容啦！

内容的提问来源于stack exchange，提问作者Miguel Barra