626566109
贫民
贫民
  • 最后登录2021-11-01
  • 发帖数3
阅读:2319回复:0

[typescript]【手把手】通过适配器来改变接受后端数据的键名

楼主#
更多 发布于:2021-10-14 13:13
  大家可能会遇到这样的情况:后端传给你的键名和你需要的形式不一致,比如一个学生管理系统的信息,后台返回给你的学生学号的键名为:id,而你的格式为:stuNo,这个时候一个适配器就可以解决问题。也就是说,你从后台请求的数据,不管你写的是怎样的,后台数据是怎样的,只要用这个东西就能解决,不用每次更改你写的数据名。而且之后你发请求的时候,你的前台都能转换成你所用的,而不是去更改后台的属性名。


例子如下:
// 这是后端返回来的数组
let studentHou = [
    {id:1,name:"小王",age:20,sex:0,address:"四川成都"},
    {id:2,name:"小名",age:25,sex:1,address:"四川绵阳"},
    {id:3,name:"小吴",age:18,sex:0,address:"四川成都"},
]
// 这是前端需要得到的形式的对象数组
let studentQian =  [
    {stuNo:1,Name:"小王",s_Age:20,sex:0,address:"四川成都"},
    {stuNo:2,Name:"小名",s_Age:25,sex:1,address:"四川绵阳"},
    {stuNo:3,Name:"小吴",s_Age:18,sex:0,address:"四川成都"},
]
思路:
// 写个数据适配的方法
// 目的:把studentHou这个对象数组传到方法里去,得到studentQian这种形式的对象数组


第一次错误尝试:
// 数据这样写并没有写活!仅仅适用于以上的案例;
 function dataAdapter(HouData){
     let arr = [];
     HouData.forEach((item)=>{
         let obj = new Object();
         obj.stuNo = item.id;
         obj.Name = item.name;
         obj.s_age = item.age;
     })
 }
第二次错误尝试:
        // 如果把方法写成:
         function dataAdapter(HouData,['stuNo','Name','s_age']){

         }
        // 这样也不行,这样需求键名一一对应

第三次正确的尝试:

阅读文档如下:

        /**
         * item -> 老对象的整体内容
         * console.log(item)
         *  **{stuNo:1,Name:"小王",s_Age:20,sex:0,address:"四川成都"},
            {stuNo:2,Name:"小名",s_Age:25,sex:1,address:"四川绵阳"},
            {stuNo:3,Name:"小吴",s_Age:18,sex:0,address:"四川成都"}**
         * newArr ->返回的新数组
         * HouData(也就是文中的studentHou) ->后端返回的数据
         * RelationObj(也就是文中的relObj) ->是传的对象,这个对象就是像stuNo对应id这样的对应关系
         * dataAdapter() ->适配器的方法
         * o ->new出来的新对象
         *
        */

js代码如下


        function dataAdapter(HouData,RelationObj){ // newArr是返回的新数组
            let newArr = [];
            // 不需要用map或者filter来循环产生新数组,所以用forEach
            HouData.forEach((item)=>{
                // new一个新对象把它每次循环的结果放到新数组里面去
                console.log(item);
                let o = new Object();
                for(let key in RelationObj){
                    // 新对象的键名对应的值等于老对象的键名
                    o[key] = item[RelationObj[key]];
                }
                newArr.push(o);
            })
            return newArr; }

// 调用这个方法

        let relObj = {"stuNo":"id","Name":"name","s_age":"age","address":"address"};
        let newStudent = dataAdapter(studentHou,relObj);
        console.log(newStudent);

 - w - 成功啦~ 我们继续把这个方法封装一下便于使用吧

 把橙色的那段代码粘贴到新建的js文件中封装并暴露出来,代码如下
;(function(){
    function dataAdapter(HouData,RelationObj){
        // newArr是返回的新数组
        let newArr = [];
        // 不需要用map或者filter来循环产生新数组,所以用forEach
        HouData.forEach((item)=>{
            // new一个新对象把它每次循环的结果放到新数组里面去
            console.log(item);
          let o = new Object();
           for(let key in RelationObj){
                // 新对象的键名对应的值等于老对象的键名
                o[key] = item[RelationObj[key]];
            }
            newArr.push(o);
        })
        return newArr;
    }
    window.dataAdapter = dataAdapter;
})()

再引入就可以啦~

  可是每次写几十个键名也很麻烦啊,如果你漏传递了一个键名,那么你就没有完全修改到,例如:
  let relObj = {"stuNo":"id","Name":"name","s_age":"age","address":"address"};
  那么改进一下,之后你传递relObj时候,只需要传前端和后端不相同的键名即可。
  let relObj = {"stuNo":"id","Name":"name","s_age":"age"};    



以下是优化:

  在蓝色的那行代码后面再加一句:

  o = {...item};

  但是这样有个问题:深拷贝过后,得删除重复的数据。

就像是输出这样的格式:

0:
Name: "小王"
address: "四川成都"
age: 20
id: 1
name: "小王"
s_age: 20
sex: 0
stuNo: 1
[[Prototype]]: Object

更新后的js代码为:

;(function(){
    function dataAdapter(HouData,RelationObj){
        // newArr是返回的新数组
        let newArr = [];
        // 不需要用map或者filter来循环产生新数组,所以用forEach
        HouData.forEach((item)=>{
            // new一个新对象把它每次循环的结果放到新数组里面去
            console.log(item);
            let o = new Object();
           o = {...item};
            for(let key in RelationObj){
                // 把这个对象里原来对应的值(键名和键值)给它删掉
           delete o[RelationObj[key]];
                // 新对象的键名对应的值等于老对象的键名
                o[key] = item[RelationObj[key]];
            }
            newArr.push(o);
        })
        return newArr;
    }
    window.dataAdapter = dataAdapter;
})()


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


搞定~!
[626566109于2021-10-14 15:14编辑了帖子]
游客


返回顶部

公众号

公众号