從Angular HttpClient調用Async方法azure AI計算機視覺獲取響應頭

Question

我正在嘗試使用Angular實現Azure計算機視覺識別文本AI 。 我需要從第一個Http調用的響應中找到特定的標頭，然后再調用第二個。 但是我找不到標題。 您能幫我在這里找到我所想念的嗎？ 您可以在下面的代碼中看到我已經嘗試過的東西。

async post(url: string): Promise<any> {
    const body = {
      url: url,
      observe: 'response'
    };
    const options = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
        'Ocp-Apim-Subscription-Key': config.api.apiKey,
        'Access-Control-Expose-Headers': 'allow',
        'resolveWithFullResponse': 'true',
        'responseType': 'text'
      })
    };
    const result = await this.http.post(config.api.baseUrl, body, options)
      .subscribe(async (res: Response) => {
        console.log(res);
        const operationLocation = res.headers.get('Operation-Location');
        return await this.http.get(operationLocation, options).toPromise();
      });
    return result;
  }

我能夠在瀏覽器網絡中看到響應頭，但是res對象始終為null。

Azure文檔說：“該服務已接受請求，稍后將開始處理。它將立即返回Accepted並包括“ Operation-Location”標頭。客戶端應進一步使用此標頭中指定的URL查詢操作狀態。 ID將在48小時后過期。 ”

Answer 1

嘗試使用HttpResponse作為預期的響應類型，這將為您提供完整的響應。 這樣您就可以從中訪問標頭。

const result = await this.http.post<HttpResponse<Object>>(config.api.baseUrl, body, options)
      .subscribe(async (res: Response) => {
        console.log(res);
        const operationLocation = res.headers.get('Operation-Location');
        return await this.http.get(operationLocation, options).toPromise();
});

Answer 2

最后，我能夠解決問題。 幸運的是，我開始閱讀本文檔 ，其中提到“識別文本方法不會在成功響應的正文中返回任何信息”。 后來，我能夠使用OCR API完成我的要求。 我必須將基本網址更改為以下網址。

https://westeurope.api.cognitive.microsoft.com/vision/v2.0/ocr

home.component.ts

async submit() {
    if (this.url.value) {
        const result: any = await this.detectionService.post(this.url.value);
        const resultArray: Array < string > = [];
        this.lines = result.regions[0].lines.forEach((obj: any) => {
            obj.words.forEach((word: any) => {
                resultArray.push(word.text);
            });
        });
        this.stringResult = resultArray.join(' ');
    }
}

服務

async post(url: string): Promise<any> {
    const body = {
      url: url
    };
    const options = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
        'Ocp-Apim-Subscription-Key': config.api.apiKey
      })
    };
    return await this.http.post(config.api.baseUrl, body, options).toPromise();
  }

我能夠獲得所需的輸出，如下所示。

{"language":"en","textAngle":0,"orientation":"Up","regions":[{"boundingBox":"74,172,995,446","lines":[{"boundingBox":"159,172,884,76","words":[{"boundingBox":"159,177,47,58","text":"If"},{"boundingBox":"221,194,129,54","text":"you"},{"boundingBox":"369,183,180,53","text":"want"},{"boundingBox":"566,183,73,53","text":"to"},{"boundingBox":"657,172,185,64","text":"shine"},{"boundingBox":"864,176,124,60","text":"like"},{"boundingBox":"1008,194,35,42","text":"a"}]},{"boundingBox":"74,261,995,76","words":[{"boundingBox":"74,279,243,52","text":".—sun,"},{"boundingBox":"335,261,145,60","text":"first"},{"boundingBox":"501,261,158,68","text":"burn"},{"boundingBox":"683,261,124,60","text":"like"},{"boundingBox":"827,279,35,42","text":"a"},{"boundingBox":"882,279,187,58","text":"sun.."}]},{"boundingBox":"381,347,436,43","words":[{"boundingBox":"381,347,51,43","text":"X:"},{"boundingBox":"440,348,222,42","text":"P.TAbdul"},{"boundingBox":"680,352,137,38","text":"Kalam"}]},{"boundingBox":"541,589,158,29","words":[{"boundingBox":"541,589,17,22","text":"B"},{"boundingBox":"560,589,139,29","text":"rainyQ!0te'"}]}]}]}