axios的介绍和引入一点点透

最新推荐文章于 2024-05-12 09:34:07 发布

俗世凡人行

最新推荐文章于 2024-05-12 09:34:07 发布

阅读量320

点赞数

分类专栏： Vue 文章标签： axios

本文链接：https://blog.csdn.net/weixin_41887155/article/details/107635901

版权

Vue 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

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>