axios+vue

网络应用 Vue结合网络数据开发应用 axios+vue

他与本地应用的不同点是 data中的数据有一部分是从网络中获取到的
axios(网络请求库) 内部就是ajax 但是通过封装后用起来更加便捷
axios是一个功能强大的网络请求库 js库
作为js库 首先我们需要导包 确保在有网的状态下

在引入后 他会在页面上注册一个全局的axios对象 来发送请求
axios.get(提供的接口地址?查询字符串key=value&key2=values).then(function(response){},function(err){})
axios.post(提供的接口地址,{查询字符串key:value,key2:values}).then(function(response){},function(err){})
前者用来接收数据 err是错误 里面的参数response和err都可以获取到
axios里面的this会变 但在axios外部可以获取到vue的this
我们就可以将this赋值给that var that = this

ajax和axios的优缺点对比
ajax：
本身是针对MVC的编程,不符合现在前端MVVM的浪潮
基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案
JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务
axios：
从 node.js 创建 http 请求
支持 Promise API
客户端支持防止CSRF
提供了一些并发请求的接口（重要，方便了很多的操作）

案例：

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>axios+vue基本使用</title>
	</head>

	<body>
		<div id="app">
			<input type="button" value="获取笑话" @click="getJoke">
			<p> {{ joke }}</p>
		</div>
		<input type="button" value="get请求" class="get">
		<input type="button" value="post请求" class="post">
		<!-- 官网提供的 axios 在线地址 -->
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script src="js/vue.js"></script>
		<script>
			/*
		            接口:随机获取一条笑话
		            请求地址:https://autumnfish.cn/api/joke
		            请求方法:get
		            请求参数:无
		            响应内容:随机笑话
		        */
			var app = new Vue({
				el: "#app",
				data: {
					joke: "很好笑的笑话"
				},
				methods: {
					getJoke: function() {
						// console.log(this.joke);
						var that = this;
						axios.get("https://autumnfish.cn/api/joke").then(function(response) {
							// console.log(response)
							console.log(response.data);
							// console.log(this.joke);
							that.joke = response.data;
						}, function(err) {})
					},
				},
			})
			
			
			/*
			    接口1:随机笑话
			    请求地址:https://autumnfish.cn/api/joke/list
			    请求方法:get
			    请求参数:num(笑话条数,数字)
			    响应内容:随机笑话
			*/
			document.querySelector(".get").onclick = function() {
				axios.get("https://autumnfish.cn/api/joke/list?num=6")
					// axios.get("https://autumnfish.cn/api/joke/list1234?num=6")
					.then(function(response) {
						console.log(response);
					}, function(err) {
						console.log(err);
					})
			}
			/*
			     接口2:用户注册
			     请求地址:https://autumnfish.cn/api/user/reg
			     请求方法:post
			     请求参数:username(用户名,字符串)
			     响应内容:注册成功或失败
			 */
			document.querySelector(".post").onclick = function() {
				axios.post("https://autumnfish.cn/api/user/reg", {
						username: "盐焗西兰花"
					})
					.then(function(response) {
						console.log(response);
						console.log(this.skill);
					}, function(err) {
						console.log(err);
					})
			}
		</script>
	</body>

</html>
posted @ 2022-03-17 16:27  没有烦恼的猫猫  阅读(82)  评论(0)    收藏  举报