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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了从Angular HttpClient调用Async方法azure AI计算机视觉获取响应标头相关的知识,希望对你有一定的参考价值。

我正在尝试使用Angular实现Azure Computer Vision Recognize text 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。

enter image description here

Azure文档说“服务已接受请求并将在稍后开始处理。它将立即返回Accepted并包含”Operation-Location“标头。客户端应使用此标头中指定的URL进一步查询操作状态。身份证将在48小时后到期。“

答案

尝试使用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();
);
另一答案

最后,我能够解决问题。幸运的是,我来阅读this documentation,其中提到“识别文本方法不会在成功响应的主体中返回任何信息”。后来我能够使用OCR API完成我的要求。我必须将我的基本URL更改为下面的URL。

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

我能够得到如下所需的输出。

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

以上是关于从Angular HttpClient调用Async方法azure AI计算机视觉获取响应标头的主要内容,如果未能解决你的问题,请参考以下文章

HttpClient Angular 5 不发送请求

Angular:如何从 httpClient 请求中获取参数并用于循环相同的请求

Angular:无法使用 HttpClient 获取本地 json

Angular 打字稿异步 HTTPClient 调用

角度:httpClient请求被调用两次

Angular 6 和 Spring boot - 无法使用简单的 HttpClient 调用获取数据