从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。
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计算机视觉获取响应标头的主要内容,如果未能解决你的问题,请参考以下文章
Angular:如何从 httpClient 请求中获取参数并用于循环相同的请求