React Await语法中const {data: roles} = await getRoles()的含义是什么？

语法说明 #

const {data: roles}属于ES6的对象解构赋值+属性重命名语法，不属于React特有，所有支持ES6规范的JavaScript运行环境都可以使用。
它的作用分为两步：

• 从等号右侧的对象（也就是getRoles接口返回的结果对象）中取出data属性的值
• 将取出的data属性值赋值给你自定义的新变量roles，不会在当前作用域生成名为data的变量

最终赋值结果 #

接口返回的对应数据最终赋值给roles变量，你后续代码只能通过访问roles拿到对应数据，如果直接访问data会抛出变量未定义的错误。

你可以把它理解为下面这段常规写法的简化版，两者效果完全一致：

const apiResult = await getRoles();
const roles = apiResult.data;

内容的提问来源于stack exchange，提问作者lebron james