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

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

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

使用解构赋值简化axios返回对象属性元素的提取_第1张图片

 使用解构赋值简化axios返回对象属性元素的提取_第2张图片

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

使用解构赋值简化axios返回对象属性元素的提取_第3张图片

 那么如果要提取到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对象的数据时,在二级或更多层级里面,冒号后面的花括号一定不能少这个是正确解构的关键

你可能感兴趣的:(解构赋值,axios)