javascript - วิธีใช้คำขอ Http หลายรายการใน Angular 4

ฉันกำลังสร้างแอปง่ายๆ ด้วย Angular 4 และ API ที่มีหลายหน้าเพื่อการร้องขอของพวกเขา

ตัวอย่างเช่น ฉันได้ตัวอักษร 10 ตัวแรกด้วย URL นี้: http://swapi.co/api/people/

และในการที่จะได้คนอีก 10 คนต่อไป ฉันต้องส่งคำขอไปยัง URL นี้: http://swapi.co/api/people/?page=2

ฉันจะดึงข้อมูลทุกคนในการขอครั้งเดียวได้อย่างไร? หรือมีวิธีแก้ปัญหาอย่างไรที่จะทำให้ทุกคำขอเป็นไปตามแนวทางที่ดี?

คำตอบ #1

คุณต้องใช้วิธี forkJoin เพื่อโหลดข้อมูลจากมากกว่าหนึ่งแหล่ง

ก่อนอื่น ให้รวมพวกเขาไว้ในไฟล์ typescript

import {Observable} from 'rxjs/Rx';

อัปเดต

สำหรับเวอร์ชันใหม่ของ Angular ใช้สิ่งนี้:

import { forkJoin } from 'rxjs';

หลายครั้ง เราจำเป็นต้องโหลดข้อมูลจากหลายแหล่ง และเราจำเป็นต้องรอจนกว่าข้อมูลทั้งหมดจะถูกโหลด

วิธี forkJoin ห่อหลาย Observables อีกนัยหนึ่ง เราใช้ forkJoin เพื่อเรียกใช้งาน concurrent http requests

เมธอด subscribe() ของ forkJoin จะตั้งตัวจัดการกับชุดทั้งหมดของ Observables

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับ forkJoin ได้ที่นี่ รวมถึงตัวอย่างจำนวนมาก

สมมติว่าคุณต้องได้หน้าแรก 10 หน้า

var pages:number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

หรือเรียบง่ายเพียง: var pages:number[]=new Array(10).fill().map((v, i) => i + 1);

// map them into a array of observables and forkJoin
return Observable.forkJoin(
   pages.map(
      i => this.http.get('http://swapi.co/api/people/?page=' + i)
        .map(res => res.json())
   )
).subscribe(people => this.people = people);