vue_ajax-axios的使用

1.这个世纪技术根新迭代太快所以闲的时候接触点新东西吧

1.1提供一个axios的中文手册:点击传送
1.2使用的时候一定要导入js文件为了方便这里提供一个cdn:

<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
  • 使用方法很简单
    vue_ajax-axios的使用

2.直接上代码撸起袖子就是干(代码中提供的接口都是可以使用的):

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title></title>

	</head>
	<body>
		<input type="button" name="" id="" class="get" value="get请求" />
		<input type="button" value="post请求" class="post">
		<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
		<script>
			// 接口1:随机笑话,
			// 请求地址:https://autumnfish.cn/api/joke/list
			// 请求方法:get,
			// 请求参数:num(笑话条数,数字)
			// 响应内容:随机笑话
			document.querySelector(‘.get‘).onclick = function() {
				axios.get("https://autumnfish.cn/api/joke/list?num=3")
					.then(function(response) { //回调执行成功的函数
						console.log(response)
					}, function(err) { //回掉执行失败的函数
						console.log(err)
					})
			}
			// 接口2:用户注册,
			// 请求地址:https://autumnfish.cn/api/user/reg
			//  请求方法:username(用户名,字符串)
			// 响应内容:注册成功或者失败
			document.querySelector(‘.post‘).onclick=function(){
				//post提交的数据放在第二个参数里面
				axios.post("https://autumnfish.cn/api/user/reg",{username:‘姚留洋‘})
			     .then(function(response){
					 console.log(response)
				 },function(err){
					 console.log(err)
				 })
			} 
		</script>
	</body>
</html>

时间关系就演示一个get请求吧

vue_ajax-axios的使用

vue_ajax-axios的使用

上一篇:原来华为手机拍照这么简单!开启"万能模式",随手一拍都是大片


下一篇:7. 移动端性能优化?