如何在 Angular HTTP 服务中创建自定义响应库？答案

【问题标题】：How to create a custom response base in Angular HTTP service?如何在 Angular HTTP 服务中创建自定义响应库？
【发布时间】：2022-02-08 22:58:44
【问题描述】：

我正在从 Spring Boot API 返回一个自定义响应，如下所示：

public static ResponseEntity<Object> generateResponse(String message, HttpStatus status, Object responseObj) {
        Map<String, Object> map = new HashMap<String, Object>();
        map.put("Message", message);
        map.put("Status", status.value());
        map.put("Output", responseObj);

        return new ResponseEntity<Object>(map,status);
    }

它将返回：消息、状态和输出。所以现在我想知道如何在 Angular 中做出自定义响应来接收所有这三个属性。我应该如何替换“？？？”和？我应该自定义响应库吧？

public Get(): Observable<Book>{
    return this.http.get< ???<Book> >(this.baseUrl).pipe(map(response => response.Output))
  }

【问题讨论】：

标签： angular api http

【解决方案1】：

您可以为此使用generics。

interface ApiResponse<T> {
    message: string;
    status: string;
    output: T;
}

interface User {
    id: number;
    username: string;
}

interface BlogPost {
    id: number;
    title: string;
    postedDate: Date;
}

然后您可以拥有返回某个特定类型的ApiResponse 的函数。一个普通的打字稿示例：

const getUser = function(): ApiResponse<User> {
    const response: ApiResponse<User> = {
        message: 'test',
        status: 'good',
        output: {
            id: 1,
            username: 'test'
        }
    }
    return response;
} 

const getBlog = function(): ApiResponse<BlogPost> {
    const response: ApiResponse<BlogPost> = {
        message: 'test',
        status: 'good',
        output: {
            id: 1,
            title: 'Stuff!',
            postedDate: new Date()
        }
    }
    return response;
}

如果您知道output 中的数据也有一些共同的属性，您甚至可以使用generic constraints 来进一步减少您的打字稿模型中的任何重复。

interface ApiResponse<T extends DbModel> {
    message: string;
    status: string;
    output: T;
}

interface DbModel {
    id: number;
}

interface User extends DbModel {
    username: string;
}

interface ThingThatDoesNotExtendDbModel {
    someField: string;
}

//totally valid
const valid: ApiResponse<User> = { /* fields */};

/*
 * Typescript compile error: Type 'ThingThatDoesNotExtendDbModel' does not satisfy the constraint 
 * 'DbModel'.
 *  Property 'id' is missing in type 'ThingThatDoesNotExtendDbModel' but 
 *   required in type 'DbModel
 */
 const invalid: ApiResponse<ThingThatDoesNotExtendDbModel> = { /*fields*/};

【讨论】：