我在Angular中收到了一个多部分响应正文,但应用程序未正确处理响应。事实证明,Angular中的HttpClient无法正确解析多部分响应主体(请参见this issue on GitHub)。
HttpClient
仅返回HttpResponse
对象主体内的原始多部分响应,而我希望让多部分响应中的application/json
块在我的{{1}内部访问}对象。
如何正确处理Angular中的多部分响应?
答案 0 :(得分:1)
在this other post的基础上,我提出了一个快速而肮脏的解决方案,它对stackoverflow产生了很大的启发,并创建了一个HTTP拦截器类,该类显示了如何解析多部分响应。
拦截器从多部分响应(multipart/mixed
,multipart/form-data
或multipart/related
)中返回第一个“ application / json”部分作为响应主体。
通过映射,可以轻松地将其他内容类型的其他解析器添加到类中。
我将在此处分享此代码,这可能会给其他人带来启发:
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
@Injectable({
providedIn: 'root',
})
export class MultipartInterceptService implements HttpInterceptor {
private parserMap = {
'application/json': JSON.parse,
};
private parseMultipart(multipart: string, boundary: string): any {
const dataArray: string[] = multipart.split(`--${boundary}`);
dataArray.shift();
dataArray.forEach((dataBlock) => {
const rows = dataBlock.split(/\r?\n/).splice(1, 4);
if (rows.length < 1) {
return;
}
const headers = rows.splice(0, 2);
const body = rows.join('');
if (headers.length > 1) {
const pattern = /Content-Type: ([a-z\/+]+)/g;
const match = pattern.exec(headers[0]);
if (match === null) {
throw Error('Unable to find Content-Type header value');
}
const contentType = match[1];
if (this.parserMap.hasOwnProperty(contentType) === true) {
return this.parserMap[contentType](body);
}
}
});
return false;
}
private parseResponse(response: HttpResponse<any>): HttpResponse<any> {
const contentTypeHeaderValue = response.headers.get('Content-Type');
const body = response.body;
const contentTypeArray = contentTypeHeaderValue.split(';');
const contentType = contentTypeArray[0];
switch (contentType) {
case 'multipart/related':
case 'multipart/mixed':
case 'multipart/form-data':
const boundary = contentTypeArray[1].split('boundary=')[1];
const parsed = this.parseMultipart(body, boundary);
if (parsed === false) {
throw Error('Unable to parse multipart response');
}
return response.clone({ body: parsed });
default:
return response;
}
}
// intercept request and add parse custom response
public intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
return next.handle(request)
.pipe(
map((response: HttpResponse<any>) => {
if (response instanceof HttpResponse) {
return this.parseResponse(response);
}
}),
);
}
}
代码从Content-Type
响应头中读取边界,并使用该边界将响应主体拆分为多个块。然后,它尝试解析每个部分,并从响应中返回第一个成功解析的application/json
块。
如果您有兴趣返回另一个代码块,或者想要在最终响应中组合多个代码块,则需要使用自己的解析器或更改逻辑。这需要对代码进行一些自定义。
注意::此代码是实验性的,经过严格测试,尚未投入生产,请谨慎使用。