각도 4 사용하기 관찰 가능 환경에서 http promise 호출을하는 방법은 무엇입니까?

Question

각도 4 사용 Observable에서 http promise 호출을하는 방법은 무엇입니까? Cognito Federated 계정으로 AWS API Gateway를 사용하고 있습니다. 각 http 호출에 서명하려면 apigClient.invokeApi를 사용해야합니다. 나는 약속의 결과를 얻고 그 결과를 관찰 할 수있는 것으로 되돌리고 싶다. 아래의 코드는 실행되지만 관찰 가능한 코드의 나머지는 전혀 얻지 못합니다. 관찰 대상에 가입하면 구독 내부 코드로 도달하지 않습니다. 어떤 컴파일 오류도 발생하지 않습니다. 어떤 도움이 도움이 될 것입니다. 아약스는 다음과 같이 호출하지만 관찰 가능한을 사용하여, 당신의 코드를 사용하여 문제를 생각하고 중첩 된 약속은 당신이 너무 일찍 때, /users/upload에 대한 호출이 완료되지 않은 invokeApi HTTP 호출을 시작할 것입니다으로

public upload(image, fileType): Observable<FileReturnData> { 
    const apigClient = apigClientFactory.newClient({ 
    accessKey: this.auth.cognitoAccessKey, 
    secretKey: this.auth.cognitoSecretKey, 
    sessionToken: this.auth.cognitoSessionToken, 
    invokeUrl: this.auth.URL 
    }); 
    const data = new FileData() 
    data.image = image; 
    data.fileType = fileType; 
    const uploadPromise = apigClient.invokeApi({}, '/users/upload', 'POST', {}, {image: image, fileType: fileType}); 


const observable = new Observable<FileReturnData>(observer => { 

    uploadPromise.then(function (uploadResult) { 
     console.log(uploadResult); // I see this in the console 

     const fileReturnData = new FileReturnData(); 

     const responseBody = JSON.parse(uploadResult.body); 

     fileReturnData.filename = responseBody.filename; 
     console.log('IN OBSERVABLE'); // I never get to this result 
     observer.next(fileReturnData); 
     observer.complete(); 


     return() => console.log('upload image user observable disposed'); 

    }).catch(function (uploadImageError) { 

     return() => console.error(uploadImageError); 
    }); 

    }); 

    return observable; 

} 

Answer 1

난 단지 중첩 된 약속을 사용 예상 한대로, upload이 (가) observer.complete()을 uploadPromise.then으로 호출했기 때문에 observer.complete()를 기다리는 관찰자의 가입자는 의도하지 않은 결과를 낳습니다. 아직 완료되지 않았거나 아직 완료되지 않았습니다.

public upload(image, fileType): Observable<FileReturnData> { 
     const apigClient = apigClientFactory.newClient({ 
     accessKey: this.auth.cognitoAccessKey, 
     secretKey: this.auth.cognitoSecretKey, 
     sessionToken: this.auth.cognitoSessionToken, 
     invokeUrl: this.auth.URL 
     }); 

    const observable = new Observable<FileReturnData>(observer => { 

     const data = new FileData() 
     data.image = image; 
     data.fileType = fileType; 

     apigClient.invokeApi({}, '/users/upload', 'POST', {}, {image: image, fileType: fileType}) 
     .then(function (uploadResult) { 
      console.log(uploadResult); // I see this in the console 

      const fileReturnData = new FileReturnData(); 

      const responseBody = JSON.parse(uploadResult.body); 

      fileReturnData.filename = responseBody.filename; 
      console.log('IN OBSERVABLE'); // I never get to this result 
      observer.next(fileReturnData); 
      observer.complete(); 

     }).catch(function (uploadImageError) { 

      //handle error 
     }); 

     }); 

     return observable; 

    } 

나는 개인적으로 내가 완전히 시나리오를 이해하고있는 경우 관리 호출 HTTP 쉽게를 중첩 약속을 사용하여 찾을 수 :

이이 코드를 수정하는 경우를 참조하십시오. 약속에 그들이 Observables은 위해와 동일한 방식으로

public upload(image, fileType): Promise<FileReturnData> { 
     const apigClient = apigClientFactory.newClient({ 
     accessKey: this.auth.cognitoAccessKey, 
     secretKey: this.auth.cognitoSecretKey, 
     sessionToken: this.auth.cognitoSessionToken, 
     invokeUrl: this.auth.URL 
     }); 



    const promise = new Promise<FileReturnData>((resolve, reject) => { 

     const data = new FileData() 
     data.image = image; 
     data.fileType = fileType; 
     //I moved this "invokeApi" call here because it does not seem like a factory method 
     //it seems like you start an ajax call when "invokeApi" is called 
     //so you must keep this all within the promise you are returning to callers 
     //of the upload function 
     apigClient.invokeApi({}, '/users/upload', 'POST', {}, {image: image, fileType: fileType}) 
     .then(uploadResult => { 
      console.log(uploadResult); // I see this in the console 

      const fileReturnData = new FileReturnData(); 

      const responseBody = JSON.parse(uploadResult.body); 

      fileReturnData.filename = responseBody.filename; 

      resolve(fileReturnData); 

     }, msg => { 
      reject(msg); 
     }).catch(ex => { 
      return() => console.error(ex); 
     }); 

     }); 

     return promise; 

    }