API 的延迟响应

Question

我正在学习 TypeScript，目前我正在尝试使用谷歌 API 来购买书籍。 我遇到的问题是，在期望得到响应时，我有 null。 但是，我正在记录响应并且数据显示在控制台中。 接下来奇怪的是，这个数据被记录下来并且我所有的代码都结束了（就像最后一件事，但不是当我实际做记录方法时）。 有没有办法等待响应？ 我的代码部分：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { OrderPage } from '../order/order';
import { BooksApiProvider } from '../../providers/books-api/books-api';

@Component({
  selector: 'page-book',
  templateUrl: 'book.html'
})
export class BookPage {

    books:any;

    constructor(public navCtrl: NavController, public booksProvide: BooksApiProvider) {
    }

  moveToOrder() {
    debugger;
    this.books = this.booksProvide.getBook();
  }
}

import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';


@Injectable()
export class BooksApiProvider {

  constructor() {
  }

  getBook(){
    fetch('https://www.googleapis.com/books/v1/volumes?q=isbn:9780439139601')
    .then(res => res.json())
    .then(data => console.log(data))
  }
}

Answer 1

您的getBook()方法不返回任何内容，因此， this.books将始终为 null。
当您在此处使用fetch时，您可以在getBook()方法中返回 promise，从而允许您对检索到的数据执行任何操作。

getBook(): Promise<any> {
  return fetch('https://www.googleapis.com/books/v1/volumes?q=isbn:9780439139601')
    .then(res => res.json())
    .then(data => {
      console.log(data);
      return Promise.resolve(data);
    });
}

然后你可以在getBook()上调用.then来对数据做任何你想做的事情。
（例如，将数据分配给this.books ）

this.booksProvide.getBook()
  .then(data => this.books = data);

您正在使用 Angular 想，您应该看看HttpClient 。 它与fetch几乎相同，除非它处理 RxJS 和在 Angular 中广泛使用的Observables 。