角度：在JSON HttpRequest和HttpResponse对象中序列化/取消序列化

Question

我想缓存到本地存储HttpRequest和HttpSolutions类从@角/通用/超文本传输协议。

localstorage只接受string，因此我想用JSON序列化/取消序列化这两个对象（HttpRequest和HttpResponse）。stringfy（）和JSON。parse（）。

问题是HttpRequest和HttpResponse都是复杂的类，带有一些ES6映射（例如HttpHeaders）和一些getter/setter函数，带有JSON。stringfy（）和JSON。parse（）序列化/非序列化不会返回相同的对象，并且某些信息会丢失。

有一种方法可以序列化/取消序列化HttpRequest和HttpResponse类？

我正在搜索完整的序列化/非序列化（标题、参数、正文等）

在本例中，有两种方法用于序列化和取消序列化HttpRequest，例如：

function serializeRequest(angularRequest: HttpRequest): string {
  return null; // to implement
}
function unserializeRequest(jsonRequest: string): HttpRequest {
  return null; // to implement
}

// this is an example of request
const originalRequest = new HttpRequest('POST', 'https://angular.io/docs?foo=bar', {foo: true}, {
  params: new HttpParams().set('verbose', 'true'),
  headers: new HttpHeaders({
    BAR: 'baz',
  }),
  reportProgress: true,
  responseType: 'json',
  withCredentials: true
});

// serializeRequest trasform HttpRequest in json format
const jsonRequest: string = serializeRequest(originalRequest);

// unserializeRequest trasform json format to HttpRequest
const unserializedRequest : HttpRequest = unserializeRequest(jsonRequest);

// unserializedRequest as same object of originalRequest
expect(originalRequest).toEqual(unserializedRequest);

响应的相同序列化/反序列化

function serializeResponse(angularResponse: HttpResponse): string {
  return null; // to implement
}
function unserializeResponse(jsonResponse: string): HttpResponse {
  return null; // to implement
}

// this is an example of response
const originalResponse = new HttpResponse({
  headers: new HttpHeaders({
    BAR: 'baz',
  }),
  status: 200,
  statusText: 'OK',
  url: 'https://angular.io/docs',
  body: {foo: true}}
);

// serializeResponse trasform HttpResponse in json format
const jsonResponse: string = serializeResponse(originalRequest);

// unserializeResponse trasform json format to HttpResponse 
const unserializedResponse: HttpResponse = unserializeResponse(jsonResponse);

// unserializedResponse as same object of originalResponse
expect(originalResponse).toEqual(unserializedResponse);

Answer 1

下面提到的方法是在Angular中序列化Http响应的最佳方法。res.json（）函数将显示正文、标头和参数。

this.http.get('/app/lists.json').map((res:Response) => res.json());

Answer 2

如果您只是想序列化HttpRequest，那么类本身提供了序列化身体（）方法，在这里

Answer 3

虽然我会推荐一个服务工作者进行缓存，但我所知道的最简单的方法是克隆请求/响应，然后获取它们的信息：

function serializeRequest(req: HttpRequest<any>): string {
    const request = req.clone(); // Make a clone, useful for doing destructive things
    return JSON.stringify({
        headers: Object.fromEntries( // Just a helper to make this into an object, not really required but makes the output nicer
            request.headers.keys.map( // Get all of the headers
                (key: string) => [key, request.headers.getAll(key)] // Get all of the corresponding values for the headers
            )
        ),
        method: request.method, // The Request Method, e.g. GET, POST, DELETE
        url: request.url, // The URL
        params: Object.fromEntries( // Just a helper to make this into an object, not really required but makes the output nicer
            request.headers.keys.map( // Get all of the headers
                (key: string) => [key, request.headers.getAll(key)] // Get all of the corresponding values for the headers
            )
        ), // The request parameters
        withCredentials: request.withCredentials, // Whether credentials are being sent
        respnseType: request.responseType, // The response type
        body: request.serializeBody() // Serialize the body, all well and good since we are working on a clone
    })
}

以类似的方式，我们也可以序列化响应（假设T与JSON兼容，这在HTTP请求中是一个公平的假设）：

function serializeResponse(res: HttpResponse<any>): string {
    const response = res.clone();
    return JSON.stringify({
        headers: Object.fromEntries( // Just a helper to make this into an object, not really required but makes the output nicer
            response.headers.keys.map( // Get all of the headers
                (key: string) => [key, response.headers.getAll(key)] // Get all of the corresponding values for the headers
            )
        ),
        status: response.status,
        statusText: response.statusText,
        url: response.url,
        body: response // Serialize the body, all well and good since we are working on a clone
    })
}

然后，由于我们保存了所有必需的信息，因此反序列化是一件轻而易举的事：

function deserializeRequest<T = any>(req: string): HttpRequest<T> {
    const request = JSON.parse(req);
    const headers = new HttpHeaders(request.headers);
    const params = new HttpParams(); // Probably some way to make this a one-liner, but alas, there are no good docs
    for(let parameter in request.params){
        request.params[parameter].forEach((paramValue: string) => params.append(parameter, paramValue));
    }
    return new HttpRequest(request.method, request.url, request.body, {
        headers,
        params,
        respnseType: request.respnseType,
        withCredentials: request.withCredentials
    });
}

function deserializeResponse<T = any>(res: string): HttpResponse<T> {
    const response = JSON.parse(res);
    const headers = new HttpHeaders(response.headers);
    return new HttpRequest({
        headers,
        body: response.body,
        status: response.status,
        statusText: response.statusText,
        url: response.url,
    });
}

整个事情的操场（虽然，遗憾的是，角度类型不能正确加载）

请注意，我没有在任何环境中测试过这一点，因此这是按原样提供的，我不确定expect如何处理两个HttpHeaders/HttpParams，尤其是因为它们的顺序可能不完全相同。