简单的axios请求返回数据解构赋值
本地 data.json 文件
{
"name": "大熊",
"age": 18,
"fnc": [
1,
2,
3
]
}
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> </head> <body> </body> </html>
//引入axios 的cdn
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
//通常的写法:
axios.get('./js/data.json').then(function(res){
console.log(res)
})
</script>
打印:
解构赋值 写法: 花括号,里面的data字段解构赋值,记住花括号
axios.get('./js/data.json').then(({ data }) => {
console.log(data)
})
打印:
直接取 data里面的 name age
axios.get('./js/data.json').then(({ data: { name, age } }) => {
console.log(name, age)
})
打印: 大熊 18
解构赋值正确用法:
简单的axios请求返回数据解构赋值的更多相关文章
- 变量的解构赋值////////////z
变量的解构赋值 数组的解构赋值 对象的解构赋值 字符串的解构赋值 数值和布尔值的解构赋值 函数参数的解构赋值 圆括号问题 用途 数组的解构赋值 基本用法 ES6允许按照一定模式,从数组和对象中提取值, ...
- ECMAScript 6入门 - 变量的解构赋值
定义 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 解构赋值不仅适用于var命令,也适用于let和const命令. 解构赋值的规则是,只要 ...
- ECMAScript 6之变量的解构赋值
1,数组的解构赋值 基本用法 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前,为变量赋值,只能直接指定值. var a = 1; va ...
- ES5-ES6-ES7_解构赋值
解构赋值的概念 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring) 传统对变量赋值的方式,以前,为变量赋值,只能直接指定值. var a = 1; ...
- ES6的新特性（3）——变量的解构赋值
变量的解构赋值 数组的解构赋值 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). let a = 1; let b = 2; le ...
- 《ES6标准入门》(阮一峰)--3.变量的解构赋值
1.数组的解构赋值 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前,为变量赋值,只能直接指定值. let a = 1; l ...
- 03 | 变量的解构赋值 | es6
变量的解构赋值 数组的解构赋值 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前,为变量赋值,只能直接指定值. let a ...
- Es6 新增解构赋值
1.数组的解构赋值 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 要想实现解构,就必须是容器,或者具有可遍历的接口. 以前,为 ...
- ES6学习笔记（let,const,变量的解构赋值）
1.let: ; i < 3; i++) { let i = 'abc'; console.log(i); } // abc // abc // abc 不存在变量提升,它所声明的变量一定要在声 ...
随机推荐
- springCould注解和配置以及pom依赖
SpringCloud注解和配置以及pom依赖说明 在本文中说明了pom依赖可以支持什么功能,以及支持什么注解,引入该依赖可以在application.properties中添加什么配置. 1.Spr ...
- tp5三级联动的实现
tp5三级联动的实现 首先注意这里 如果说一级菜单不选中的话 后边的二级菜单是没有数据的 这里就要用到三级联动 第一步:先把一级菜单的数据查询展示出来 所以 pid 默认等于 0 代码实例: publ ...
- 自学java一路以来，心血心得整理分享
✿ 贴心提示:文章内容比较长,但都是干货,请大家耐心看完.时间不够充裕的小伙伴,建议收藏,一定要耐心看完,保证对你有后续学习java有所帮助. 一.推荐背景介绍 (一)我是怎么学的? ★ 非常普通的人 ...
- RENIX板卡V2-100G系列工作模式速率切换——网络测试仪实操
本文主要介绍了RENIX板卡V2-100G系列工作模式速率切换相关操作.全文分为五部分内容.文章开头对V2-100G系列板卡进行了概述,之后分别详细介绍了100G工作模式.40G工作模式.25G工作模 ...
- CF1117G题解
题意:区间建笛卡尔树,求每个节点的siz之和. 首先看到笛卡尔树,就应该想到,因为这是一个排列,可以找到通过左边和右边第一个比自己大的元素来"建立"笛卡尔树. 设 \(l(u)\) ...
- Docker修改默认IP
Docker修改默认IP 删除原有配置 sudo systemctl stop docker sudo ip link set dev docker0 down sudo brctl delbr do ...
- react中使用截图组件Cropper组件
--最近项目用react,学习react并使用cropper组件裁剪图片. (这里开发组件不够统一有用tsx(TypeScript + xml/html)写的组件,有用jsx(javascript+x ...
- GoldenEye
靶机准备 将靶机ova文件导入虚拟机,并将网络模式设置为NAT 先进行ip扫描 netdiscover -r 192.168.164.0/24 kali:192.168.164.137 渗透测试 扫描 ...
- TransactionScope是什么
TransactionScope使用说明 TransactionScope是.Net Framework 2.0滞后,新增了一个名称空间.它的用途是为数据库访问提供了一个"轻量级" ...
- Ubuntu16.04 oh_my_zsh 安装与配置
参考文章 Ubuntu上使终端显示Git分支(oh-my-zsh) oh-my-zsh的安装与基本配置 Ubuntu 下安装oh-my-zsh 前言 之前学习Laravel的时候,经常要切换git分支 ...