javascript - 大家调后端接口传参的时候 是直接按照其 Json 键名传还是自己处理一下?

问题描述

问 题

如果直接按照后端给的键名传 万一后端接口要改键名怎么办 我这边不炸了？

解决方案

如果你担心这些问题，就用点设计模式来规避一下。

不过理论上来说，前后端的接口应该都是约定好的，一般如果要变，都不会只变名称这么简单

补充：通过设计模式处理服务端数据结构变化

version 1

假设原来的某接口服务端返回的数据示例如下：

{
    "name": "James",
    "isMale": true,
    "address": "Mianyang",
    "error": null
}

如果发生了错误，那么 error 的值变包括一个 code 和一个 message，比如

{
    "error": {
        "code": 48,
        "message": "通讯错误"
    }
}

verson 2

后来因为某些原因修改了数据结构(比如统一化处理)

{
    "code": 0,
    "message": "success",
    "data": {
        "name": "James",
        "isMale": true,
        "address": "Mianyang",
        "error": null
    }
}

前端使用适配器模式处理

为了适应这种改变，前端在设计获取数据的时候可以采用适配器模式，比如

为了清楚描述接口和关系，下面用 TypeScript 代替演示

interface IUser {
    name: string;
    isMale: boolean;
    address: string;
}

interface IError {
    readonly code: number;
    readonly message: string;
}

interface IDataAdapter<T> {
    readonly data;
    readonly error: IError;
    readonly isError: boolean;
}

abstract class UserDataAdapter implements IDataAdapter<IUser> {
    protected _user: IUser;
    protected _error: IError;

    constructor(serverData: any = {}) {
        this.parse(serverData);
    }

    protected abstract parse(serverData: any);

    public get data(): IUser {
        return this._user;
    }

    public get error(): IError {
        return this._error;
    }

    // 默认情况下，如果有 _error 对象，则表示出错
    public get isError(): boolean {
        return !this._error;
    }
}

class Ver1 extends UserDataAdapter {
    protected parse(serverData: any) {
        if (serverData.error) {
            this._error = serverData.error as IError;
            this._user = null;
            return;
        }

        this._user = ["name", "isMale", "address"]
            .reduce((o, key) => {
                o[key] = serverData[key];
                return o;
            }, {}) as IUser;
    }
}

class Ver2 extends UserDataAdapter {
    protected parse(serverData: any) {
        this._error = serverData.message
            ? {
                code: serverData.code,
                message: serverData.message
            }
            : null;
        this._user = serverData.data as IUser;
    }

    // 重载父类的 isError，根据 _error 是否为空和 _error.code 是否为 0
    // 两个条件联合来判断是否出错
    public get isError(): boolean {
        return !this._error || this.error.code === 0;
    }
}

上面的代码定义了 Ver1 和 Ver2 分别对应两个版本的服务端数据，如果服务端数据结构发生变化，前端只需要统一替换适配器就行，不需要修改其它业务逻辑代码。当然为了能很好的替换适配器，这里可能还需要使用工厂模式……

这篇关于javascript - 大家调后端接口传参的时候 是直接按照其 Json 键名传还是自己处理一下?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！