从Angular HttpClient调用Async方法azure AI计算机视觉获取响应头

Question

I am trying to implement Azure Computer Vision Recognize text AI using Angular. I need to find a particular header from the response of the first Http call and then call the second one. But I am unable to find the header. Can you please help me find what I am missing here? You can see the things I had already tried in the code below.

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;
  }

I am able to see the response headers in the browser network, but the res object is always null.

The Azure documentation says "The service has accepted the request and will start processing later. It will return Accepted immediately and include an “ Operation-Location” header. Client side should further query the operation status using the URL specified in this header. The operation ID will expire in 48 hours. "

Answer 1

Try Using HttpResponse as the expected response type, which would give you full response. So that you can access headers from it.

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

Finally, I was able to fix the problem. Luckily I came to read this documentation where it is been mentioned that "Recognize Text method does not return any information in the body of a successful response". And later I was able to finish my requirement using the OCR API . I had to change my base URL to the one below.

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(' ');
    }
}

service.ts

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();
  }

I was able to get the desired output as below.

{"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'"}]}]}]}