开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）:前端技术-axios 使用(1)】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11314
前端技术-axios 使用(1)
内容介绍
一、axios
二、axios 的使用
一、axios
1.注意
acios 是独立的项目不是vue里面的一部分。只是 axios 经常与 vue 一起使用，实现ajax 操作
2. 使用 axios 应用场景
前端向后端发送 ajax 请求，后端接口返回数据，数据在前端得到进行显示或遍历等操作，这是 axios 的过程。
二、axios 的使用
1.第一步
创建 html 页面，引入 js 文件，包含两个 js 文件，vue 和 axios<script src="vue.min.js"></script>
<script src="axios.min. js"></script>
2.第二步
编写 axios 代码
(1)代码的基本结构
//固定的结构
data:{//在data定义变量和初始值
}，
created(){//页面渲染之前执行
//调用定义的方法
},
methods:{//编写具体的方法
｝
(2）如何在 created 调用方法，如 save(),在 created中this save()就可以调用了
(3）构建 json 数据
{
"sucess'" :true,
"code":20000,
"message":"成功"
"data":{
"items":[
{"name": "lucy","age":20},
{"name": "mary","age":30},
{"name":"jack","age":40}
(4）使用 axios 发送 ajax 请求，请求文件，得到数据，在页面显示
(此代码与 java 无关，只是有时长的相像，并无直接关系）
new Vue({
el;'#app',
//固定的结构
data:{//在data定义变量和初始值
//定义变量，值空数组
userlist:[]
}，
created(){//页面消染之前执行
//调用定义的方法
this. getUserlist()
},
methods:{//编写具体的方法
//创建方法查询所有用户数据
getUserList(){
//使用axios发送ajax请求
//axios.提交方式(“请求接口路径").then(箭头函数).catch(箭头函数)
axios.get("data.json"")
then(response =>{
//response就是请求之后返回数据
console .log(***'' +response)
})//请求成功执行then方法
.catch(error=>{
})//请求失败执行catch方法
(5) 执行结果
在浏览器中打开，点F12，找到 console。可以看到具体的输出，
证明已经可以执行到
