1、什么是axios
Axios中文官网：Axios中文官网
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
然而什么是promise呢？
Promise 是异步编程的一种解决方案：从语法上讲，promise是一个对象，从它可以获取异步操作的消息；从本意上讲，它是承诺，承诺它过一段时间会给你一个结果。promise有三种状态：pending(等待态)，fulfiled(成功态)，rejected(失败态)；状态一旦改变，就不会再变。创造promise实例后，它会立即执行。
具体可以移步到：https://juejin.cn/post/7062155174436929550
2、axios的特性
- 从浏览器中创建XMLHttpRequests
- 从js 创建 http请求
- 支持Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防御XSRF
3、体验axios
伪造json数据：
命名message.json
{
"sites": [
{ "name":"百度" , "url":"https://www.baidu.com" },
{ "name":"google" , "url":"https://www.google.com" },
{ "name":"微博" , "url":"https://www.weibo.com" }
]
}
axios代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学习Vue的axios请求</title>
</head>
<body>
<!--view层，模板-->
<div id="app">
<div>数据：{{info}}</div>
<div>名字：{{info.sites[0].name}}</div>
<div>url：<a v-bind:href="info.sites[0].url">{{info.sites[0].url}}</a></div>
<div>名字：{{info.sites[1].name}}</div>
<div>url：<a v-bind:href="info.sites[1].url">{{info.sites[0].url}}</a></div>
</div>
<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
//data：属性：vm
data(){
return{
info:''
}
},
mounted(){//钩子函数
axios.get('message.json').then(response=>(this.info=response.data));
}
});
</script>
</body>
</html>
说明：
