合理利用npm包get-value，防止页面崩塌(增加页面健壮性)

最新推荐文章于 2024-06-25 23:36:06 发布

yuan溜溜

最新推荐文章于 2024-06-25 23:36:06 发布

阅读量413

点赞数 1

本文链接：https://blog.csdn.net/YMX2020/article/details/106598923

版权

合理利用`npm`包`get-value`，防止页面崩塌(增加页面健壮性)

最近项目中遇到一个问题，由于有一组地址信息数据层级太深而且数据结构相对复杂，在回显的时候由于某些字段为null，导致拿不到数据，进而导致页面崩塌

比如从接口拿到的数据为rightAddress，想拿到这组数据中的某个字段的时候，大部分人都是通过rightAddress[0].address[0].contacts[0].xxxx来获取，这样获取数字段按照严格编码来说是没有问题的，问题在于很对人在数据结构复杂和字段过多的时候，无法全面到对每一个关键的字段都进行判空等兼容处理，从而来保证页面的健壮性

因此，一旦后端返回的数据稍微不符合规范,，如errAddress所示，那么当你再用点点点（.）的方式去获取某一个字段的时候因为contacts[0]获取不到，所以页面会崩塌并报错Cannot read property '0' of null，意思就是说null[0]，是不存在的用法，

var rightAddress = [
            {
                address: [
                    {
                        address: '四川成都XXXxxx',
                        contacts: [
                            {
                                contactId: '404913481520517120',
                                contactName: 'he cai xia',
                                contactType: 'COMPANY',
                                mail: '11543229090.com',
                                mobileNumber: '18091999923',
                                ownerId: '1242353465',
                                telephoneNumber: '112-520',
                            },
                        ],
                        countryCode: 'CN',
                        countryName: 'China',
                        districtCode: 'SCT104327',
                        districtName: 'Xinzheng',
                    },
                ],
                companyCode: '4102001',
                companyId: '4412726881',
                companyLegalPerson: 'HE TECHNOLOGY CO.LTD',
                companyName: 'HE CO.LTD',
                contact: null,
                costCode: 'TC205',
            },
        ];


var errAddress = [
            {
                address: [
                    {
                        address: '四川成都XXXxxx',
                        contacts: null,
                        countryCode: 'CN',
                        countryName: 'China',
                        districtCode: 'SCT104327',
                        districtName: 'Xinzheng',
                    },
                ],
                companyCode: '4102001',
                companyId: '4412726881',
                companyLegalPerson: 'HE TECHNOLOGY CO.LTD',
                companyName: 'HE CO.LTD',
                contact: null,
                costCode: 'TC205',
            },
        ];

试想一下，如果上线由于某一条不规范的数据导致页面突然崩塌，那就有点说不过去，因此解决办法用npm包get-Value，即使取不到数据也不会出现上线页面崩塌这样的不友好的提示

// 首先安装npm包
npm install --save get-value
// 项目中引入npm包
import getValue from 'get-value';
// 通过npm包取你想取得字段contactName,这个时候页面不会崩塌，增加看代码的健壮性
getValue(errAddress,'address.0.contacts.0.contactName')


// 老实的取字段方法，页面崩塌，报错Cannot read property '0' of null
errAddress[0].address[0].contacts[0].contactName