当前位置: 首页 > news >正文

使用解构赋值简化axios返回对象属性元素的提取

axios返回的response通常都会进行一层封装,把响应的数据封装到了data这个对象,所以提取数据起来不太方便,往往需要res.data.xxx这样获取里面的数据,

具体可以参考下面的数据结构:

 

 假如data的数据是下面的结构:

 那么如果要提取到lyric , 就必须通过res.data.lrc.lyric这样的语法进行提取非常繁琐。

但是如果通过解构赋值,就可以大大简化表达式:

{ data: { lrc: { lyric }, code } } = response

具体到axios代码,就是这样来写:

 axios
        .get(url, { params: { id: this.id } })
        // 这里通过解构赋值直接从response提取出想要的内部对象属性
        .then(({ data: { lrc: { lyric }, code } }) => {     
          if (code == 200) {
            this.lyric = lyric;
            resolve(this.lyric);
          } else {
            reject("no lyric for this song");
          }
        });
    });

注意点: 使用解构赋值提取resonse对象的数据时,在二级或更多层级里面,冒号后面的花括号一定不能少这个是正确解构的关键

相关文章:

  • root赋权
  • nodejs+vue水浒鉴赏平台系统
  • linux下文件存储系统(inode/目录项/硬链接)
  • MySQLJDBC入门与SQL注入
  • 至强服务器BIOS/UEFI驱动开发笔记
  • 【MySQL】表的查询与连接
  • C# 图解教程 第5版 —— 第5章 类的基本概念
  • 智能油烟机 优化烹饪体验
  • python树状打印项目路径
  • spark读取hive表字段,区分大小写问题
  • 【计算机网络笔记】分组交换 vs 电路交换
  • 数据库事务及事务隔离级别
  • KMP 算法 + 详细笔记
  • ROS键盘遥控机器人,通过参数服务器指定速度
  • SpringMVC的响应处理
  • Paddle build_cinn_pass_test源码阅读(fluid目录下)
  • C++学习——string 详解(即C++字符串详解)
  • 【面试HOT100】子串普通数组矩阵
  • flutter 开发中的问题与技巧
  • ETL数据转换方式有哪些
  • 98岁动物学家、北京大学教授杨安峰逝世
  • 央视315晚会曝光“保水虾仁”后,湛江4家涉事企业被罚超800万元
  • 印巴战火LIVE|巴基斯坦多地遭印度导弹袭击,巴总理称“有权作出适当回应”
  • 俄乌交换205名被俘人员,俄方人员已抵达白俄罗斯
  • 原四川省农村信用社联合社党委副书记、监事长杨家卷被查
  • 澎湃读报丨央媒头版五四青年节集中刊文:以青春之我,赴时代之约