axios的介绍和引入
请求后台API
- 很多时候我们在构建应用时需要访问一个API并展示其数据; 做这件事的方法有好几种
axios
,fetch
,resource
; 而使用基于promise
的HTTP客户端axios
则是其中非常流行的一种; axios
这个是通用的,不是vue里面的,在其他前端框架都可以使用;
axios的介绍
axios
是一个基于Promise用于浏览器和nodejs的HTTP客户端, 本身具有以下特征
- 从浏览器中创建XMLHttpRequest
- 从node.js发出http请求
- 支持Prpmise API
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防止CSRF/XSRF
- 使用说明
- 使用之前必须先引入;
- github文档:
https://github.com/axios/axios
; - cdn引入:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
;
- 常用资料
axios.get('https://api.coindesk.com/v1/bpi/currentprice.json').then(function(res){
console.log(res.data)
})
then()方法是异步执行;
意思说: 就是当.then()前的方法执行完后再执行then()内部的程序,这样就避免了数据没获取等问题;
axios.get('https://api.coindesk.com/v1/bpi/currentprice.json').then($res=>{
console.log(res.data)
})
带参数
axios.get('https://api.coindesk.com/v1/bpi/currentprice.json',{params:{name:'lampol'}}).then($res=>{
console.log(res.data)
})
eg
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="app">
<button type="button" @click="getData">获取数据</button>
</div>
</body>
</html>
<script type="text/javascript">
var url = 'https://api.coindesk.com/v1/bpi/currentprice.json';
var vm = new Vue({
el:'#app',
data:{
},
methods:{
getData:function(){
axios.get(url).then(function(res){
console.log(res.data)
})
}
}
});
</script>