从 Angular HttpClient 调用异步方法 azure AI 计算机视觉中获取响应 Headers

Get Response Headers from Angular HttpClient call Async method azure AI computer vision

我正在尝试使用 Angular 实现 Azure Computer Vision Recognize text AI。我需要从第一个 Http 调用的响应中找到一个特定的 header,然后调用第二个。但是我找不到 header。你能帮我找到我在这里失踪的东西吗?你可以在下面的代码中看到我已经尝试过的东西。

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

我能够在浏览器网络中看到响应 header,但是 res object 始终为空。

Azure 文档显示“服务已接受请求,稍后将开始处理。 它将 return 立即接受并包含一个“Operation-Location” header。 Client 端应使用此 header 中指定的 URL 进一步查询操作状态。操作 ID 将在 48 小时后过期。"

尝试使用 HttpResponse 作为预期的响应类型,这会给您完整的响应。这样您就可以从中访问 headers。

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 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。我不得不将我的基础 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'"}]}]}]}