각도로 객체의 여러 배열 속성에서 여러 http 호출을 수행하려면 어떻게해야합니까?

Question

나는 각도를 배우고 있으며 나는 여전히 관찰 할 수있는 것들에 머리를 감싸려고 노력하고있다.

내 응용 프로그램에서는 "objects"라는 개체 배열 속성과 "photos"라는 개체 배열 속성이 (다른 속성들 사이에있는) Project 개체를 반환하는 API 호출을합니다. 각 사진에는 차례대로 "referenceImageUrl"이라는 속성과 "capturedImageUrl"이라는 속성이 있으며 여기에는 인터넷에있는 이미지의 URL이 포함되어 있습니다.

내가하고 싶은 일은 프로젝트를 다운로드 한 후 모든 참조 이미지와 포함 된 캡처 된 이미지를 다운로드하는 것입니다. 프로젝트를 다운로드하는 방법을 알아 냈고 이미지 유형 중 하나에 대해 각 이미지를 https로 호출하는 방법을 생각했습니다. 내가 알아낼 수없는 것은 다운로드 된 프로젝트의 폴더와 이미지를 개별적으로 반복하는 방법뿐만 아니라 각 이미지에 대해 두 가지 별도의 http 호출을 수행하는 방법입니다.

return this.http.get(getProjectUrl, { headers: headers }) 
    .timeout(30000) 
    .map(this.extractProjectData) 
    .do(project => { 
    return this.projectRepository.saveProject(project); 
    }) 
    .mergeMap(project => { return Observable.from(project.photos) }) 
    .mergeMap(photo => { 

     //Download each photo and save the photo to the database 
     // (returns an Observable<Photo>) 
     return this.photoService.downloadCapturedPhoto(photo); 

     //QUESTION: How can I also download the reference photos 
     //   using this.this.photoService.downloadReferencePhoto(photo)? 

    }) 
    .mergeMap(project => { 

    //QUESTION: How can I get back to working with the project 
       here so I can loop folders, assuming that 
       matrixItemService.downloadCapturedPhoto() does not 
       return the project object 
    }) 
    .catch(this.handleErrors); 

편집 : 마틴 게시 된 링크

좀 더 읽기를하고 유용한 요리법을 찾고 후, 나는했습니다 여기

는 지금까지이 작동하지 않는 코드 이제 다음과 같이 생각해보십시오 :

return this.http.get(getProjectUrl, { headers: headers }) 
    .map(this.extractProjectData) 
    .do(project => { 
    downloadedProject = project; 
    return this.projectRepository.saveProject(project); 
    }) 
    .mergeMap(project => { return Observable.from(project.photos) }) 
    .mergeMap(photo => { 
     //Download each photo and save the photo to the database 
      return this.photoService.downloadReferencePhoto(photo) 
       .concatMap(photoWithReferenceImage => { return this.photoService.downloadCapturedPhoto(photoWithReferenceImage); }) 
       .concatMap(photoWithBothImages => { return this.matrixItemRepository.savePhoto(photoWithBothImages); }); 
     }) 
    .mergeMap(project => { 
    //QUESTION: How can I get back to working with the project 
      here so I can loop folders 
    }) 
    .catch(this.handleErrors); 

나는 사진을 다우면 프로젝트로 작업하는 방법을 "이해할 수 없다" nload 그러면 폴더로 작업 할 수 있습니다.

Answer 1

좋아요, 알아 냈습니다. 내가 이해하지 못했던 핵심 개념은 다른 함수와 마찬가지로 observables 및 subject를 참조하는 변수를 선언 할 수 있으며 배열에서 직접 새로운 관찰 가능 스트림을 선언 할 수 있다는 것입니다.

다음은 내 질문에 대한 내 해결 방법입니다.이 프로젝트를 다운로드 한 다음 폴더를 저장하고 참조 이미지를 다운로드하고 저장하는 두 개의 개별 관찰을 선언합니다. 그런 다음이 두 관측 값을 forkJoins하고 결과 관측 가능 값을 반환하므로 호출 코드가 외부 관측 가능을 구독하면 두 스트림이 모두 실행됩니다.

return this.authHttp.get(getProjectUrl, { headers: headers }) 
     .timeout(30000) 
     .map(this.extractProjectData) 
     .do(extractedProject => { 
     return this.projectRepository.saveProject(extractedProject) 
     .then(() => { project = extractedProject; }); 
    }) 
    .mergeMap(() => { 

    totalPhotoCount = project.photos.length; 

    let folderWork = Observable.from(project.folders) 
     .concatMap((folder: Folder) => { 
     return this.matrixItemService.saveFolder(folder); 
     }); 

    let photoWork = Observable.from(project.photos) 
     .mergeMap((photo: Photo) => { 
     return this.matrixItemService.saveProjectPhoto(photo) 
      .then(() => { 
      ++completedPhotoCount; 
      this.minorProgressSource.next(`Downloading photo ${completedPhotoCount} of ${totalPhotoCount}`); 
      }); 
     }, undefined, 3); //3 = concurrent downloads and saves 

    return Observable.forkJoin(folderWork, photoWork); 


    }) 
    .catch(this.handleErrors); 

Answer 2

Angular 2를 모르지만 한 번에 여러 번 http를 호출하려는 경우 최신 JQuery에 새 $ .wi가 있는지 확인하십시오.