开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）:前端技术-axios 使用（2）】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11315
前端技术-axios 使用（2）
内容介绍
一、如何使想要得到的数据做出显示
二、写代码可能遇到的问题
一、如何使想要得到的数据做出显示
1.response 得到的是
{
"sucess'" :true,
"code":20000,
"message":"成功"
"data":{
"items":[
{"name": "lucy","age":20},
{"name": "mary","age":30},
{"name":"jack","age":40}
]
这份数据，最终目的是想
{"name": "lucy","age":20},
{"name": "mary","age":30},
{"name":"jack","age":40}
这些数据在页面中做出显示，
{
"sucess'" :true,
"code":20000,
"message":"成功"
"data":{
"items":[
这些都是提示信息
2.如何得到这份数据？
response 里有所有的数据，而 response 里究竟有什么？刷新，Object {dato: Object,stotus:200, stotusText:"OK", headers:Object,config:Obect...｝为 response 的值，点开 Object
config:Object
data:Object
headers:Object
request:XMLHttpRequest
status:200
statusText: "OK"
__proto__:Object 可以看到很多的信息，这些信息包含响应中的所有信息，htp 中有请求响应，status:200就是状态200，statusText: "OK"表示已成功，数据在 data中，将 data 点开
data:Obfect
code:20000
data:Object
message:"成功"
sucess:true
__proto___:Object
这些值是真正的数据
data 中还有一个 data,这个 data 里含有 items
Json 数据就是 key value
"sucess'" :true,
"code":20000,
"message":"成功"
"data":{
"items":[
{"name": "lucy","age":20},
{"name": "mary","age":30},
{"name":"jack","age":40}
黄色为 key,绿色为 value,data.items 得到内容(key.value得到内容)
3.items 内容如何得到？
response 整体内容.data.data.items 得到里面数据，主要是看层级结构。
代码
//通过response获取具体数据，赋值给定义空数组
this.userlist = response.data.data.items
console. log(this.userlist)
刷新一下看是否成功
Array[3]
0:0bject
1:0bject
2:0bject
__ob___:_e
length:3
__proto__:Array
这些数据出现，表示已经成功
4.如何将 userlist 中的数据进行显示
将数组用 v-for 进行遍历
<!--把userList数组里面数据显示使用v-for指令 -->
<div v-for="user in userlist">
{{user .name}} -- {fuser.age}}
</div>
执行结果
lucy-- 20
mary 30
jack --40
数据在页面中已经做出了显示，表明已经成功
二、写代码可能遇到的问题
1.单词写错
例如前面 Response 中 R 大写，下面 r 小写，刷新数据没有，但是点击 F12里面没有报错，可能会有人认为是系统问题，这就是前端问题不好调制的原因
2.response.data.data.items 中 json 文件中命名为 items 要与 html 中的 items 相对应。
