javascript - 大家调后端接口传参的时候 是直接按照其 Json 键名传还是自己处理一下?
阿神
阿神 2017-04-11 13:12:24
[JavaScript讨论组]

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

阿神
阿神

闭关修行中......

全部回复(2)
大家讲道理

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

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

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

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

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

PHP中文网

不按照后端键名传怎么传?后端又怎么去取值?
我理解一定是前后端定好了接口大家按照接口来,如果要变一定是要周知到的,如果能随便改键名你们迟早是要炸的。。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号