标签：Axios console log vue res 获取数据 axios

vue-axios认识及使用

• Axios 简介
• Axios 引入方式
• 安装 axios
• 导入 axios
• 使用 axios 的三种方法---GET,POST,FILE
• Axios 中 GET方法
• Axios 中 POST请求的三种方式
• POST的第一种----urlencoded方法
• POST的第二种----json数据方法
• POST的第三种----qs序列化
• Axios 中的---file方法--文件上传
• 案例---上传文件，显示进度条
• 通过axios 构造方法获取数据---就是直接使用axios不用注册原型的方法
• Axios 配置选项默认值
• 配置axios默认信息

Axios 简介

• 从浏览器中创建 XMLHttpRequest
• 从 node.js 发出 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求和响应数据
• 取消请求
• 自动转换JSON数据
• 客户端支持防止 CSRF/XSRF

Axios 引入方式

安装 axios

npm install axios -S  // -S 生产环境也可以

导入 axios

• 因为axios使用频繁，所以需要在main.js中导入，并注册原型

// 导入
import Axios from 'axios';
// 注册原型,将所有vue的实例，组件，都能拥有axios方法
Vue.prototype.$Axios = Axios;
		// $Axios 是自定义的axios方法名字

使用 axios 的三种方法—GET,POST,FILE

• 当我们使用时，注册的原型是什么，就使用什么

Axios 中 GET方法

• this.注册原型方法的名字.get("需要访问的数据地址",{params : {key1 : val1,key2 : val2,....}}).then( res => {成功的回调}).catch( err => {失败的回调})

// get方法使用
export default {
	created() {
		// 在创建之后，执行这个方法
		this.getJoker()
	},
	methods : {
		getJoker() {
			this.$Axios.get("http://www.520mg.com/mi/list.php?page=1")
			// 获取数据成功的回调函数
			.then( res => {
				console.log(res);
			})
			// 获取数据失败的回调函数
			.catch( err => {
				console.log("获取数据失败");
			})
		}
	}
}

Axios 中 POST请求的三种方式

POST的第一种----urlencoded方法

• this.注册原型方法的名字.post("需要访问的数据地址","参数字符串",{headers : {请求头信息}}).then( res => {成功的回调}).catch( err => {失败的回调})

// post方法使用
export default {
	created() {
		// 在创建之后，执行这个方法
		this.getMovies()
	},
	methods : {
		getJoker() {
			this.$Axios.get(
				"http://www.endata.com.cn/API/GetData.ashx",
				"areaId=50&typeId=0&year=0&initial=&pageIndex=1&pageSize=10&MethodName=BoxOffice_GetMovieData_List",
				{
					headers : {"Content-Type" : "application/x-www-form-urlencoded; charset=UTF-8"}
				}
			)
			// 获取数据成功的回调函数
			.then( res => {
				console.log(res);
			})
			// 获取数据失败的回调函数
			.catch( err => {
				console.log("获取数据失败");
			})
		}
	}
}

POST的第二种----json数据方法

• this.注册原型方法的名字.post("需要访问的数据地址",{key1 : val1,key2 : val2,....}).then( res => {成功的回调}).catch( err => {失败的回调})

// post方法使用
export default {
	created() {
		// 在创建之后，执行这个方法
		this.getMovies()
	},
	methods : {
		getJoker() {
			this.$Axios.get(
				"http://www.endata.com.cn/API/GetData.ashx",
				{
					areaId : 50,
					typeId : 0,
					initial : '',
					pageIndex : 1,
					pageSize : 10,
					MethodName : "BoxOffice_GetMovieData_List"
				}	
			)
			// 获取数据成功的回调函数
			.then( res => {
				console.log(res);
			})
			// 获取数据失败的回调函数
			.catch( err => {
				console.log("获取数据失败");
			})
		}
	}
}

POST的第三种----qs序列化

• 安装 qs

• npm install qs

• 导入 qs

import Qs from 'qs'

• 使用
• 可以使用定义导入的qs

// post方法使用
export default {
	created() {
		// 在创建之后，执行这个方法
		this.getMovies()
	},
	methods : {
		getJoker() {
			// 
			var data = {
				areaId : 50,
				typeId : 0,
				initial : '',
				pageIndex : 1,
				pageSize : 10,
				MethodName : "BoxOffice_GetMovieData_List"
			};
			this.$Axios.post(
				"http://www.endata.com.cn/API/GetData.ashx",
				qs.stringify(data);		// 这里是将声明的数据使用qs方法进行序列化，跟json数据类型的post方法基本一样
			)
			// 获取数据成功的回调函数
			.then( res => {
				console.log(res);
			})
			// 获取数据失败的回调函数
			.catch( err => {
				console.log("获取数据失败");
			})
		}
	}
}

Axios 中的—file方法–文件上传

• 使用FormData实例来进行创建数据表单

// 创建一个表单拿数据
var data = new FormData();
// 上传到服务器，
this.$Axios.post("https://www.520mg.com/ajax/file.php",data)
.then( res => {
	console.log(res);
})

案例—上传文件，显示进度条

<template>
	<div>
		<h1>首页</h1>
		<div v-if="pics.length">
			<img :src="'http://www.520mg.com'+item" v-for="item in pics" width="100" alt="">
		</div>
		<div>
			<label class="label"><input type="file" ref="file" @change="up()"> + <span class="before" :style="{width:pre+'%'}"></span></label>
		</div>
		
	</div>
</template>
<style>
	body{padding: 50px;}
	.label{
		height: 100px;
		width:  100px;
		display: inline-block;
		background-color: #CCCCCC;
		overflow: hidden;
		color:#fff;
		line-height: 100px;
		text-align: center;
		cursor: pointer;
		font-size: 48px;
		position: relative
		 
	}
	/* 设置宽高，颜色 文字内容信息  相对定位 */
	.label .before{
		position: absolute;
		left:0;
		bottom:0;
		content: "";
		display: inline-block;
		height: 2px;
		width: 0%;
		background-color: orange;
	}
	/* 绝对定定位  宽度默认0%  底部橙色的进度条*/
	.label input{ display: none;}
	/* 被lable包裹的input 单击input 和单击 label效果一致 ，把input隐藏 */
</style>
<script>
	import qs from 'qs';
	export default{
		data(){
			return {pics:[],pre:0}
		},
		created(){
			this.getJoks();
			// 获取笑话信息
		   this.getMovies();
		   // 通过post 获取电影信息
		},
		methods:{
			// 文件、图片上传
			up(){
				var that = this;
				// 获取到this 赋值给that
				var file = this.$refs.file.files[0];
				// 拿到上传的文件
			     if(!file){return} 
				// 如果没有文件就返回
				var data = new FormData();
				// 创建一个表单数据
				data.append("file",file);			 
				// 把图片或文件添加到data
				this.$http.post(
				"https://www.520mg.com/ajax/file.php",
				data,
				// 第1个参数 url 第二参数 data数据，第三个是配置渲染，
				// onUploadProgress 当上传进度时
				{onUploadProgress:e=>{
					 
					that.pre =Math.floor(e.loaded/e.total*100);
					// e.loaded 已经上传的字节数据，e.total 字节数据  转换为1-100的比例值 赋值个pre
					 
				}}
				)
				.then(res=>{
					console.log(res);
					if(res.data.error==0){
						// 如果错误为0
						this.pics.push(res.data.pic);
						// 把图片加入到图片pics数组
						
					}
					this.$refs.file.value="";
					// 清空表单数据
					this.pre = 0;
					// 清空上传进度数据
				})
			},
		}
	}
</script>	 

通过axios 构造方法获取数据—就是直接使用axios不用注册原型的方法

• POST 方法
• 需要在使用的地方进行导入：import axios form 'axios'
• 注册原型的方法名字({url: '地址',data : '参数字符串',method : "POST",headers : {请求头信息}}).then( res => {}).catch( err => {})

axios({
	url : "http://www.endata.com.cn/API/GetData.ashx",
	data : "areaId=50&typeId=0&year=0&initial=&pageIndex=1&pageSize=10&MethodName=BoxOffice_GetMovieData_List",
	method : "POST",
	headers : {"Content-Type" : "application/x-www-form-urlencoded; charset=UTF-8"}
}).then( res => {
	console.log("成功的回调");
}).catch( err => {
	console.log("失败的回调");
})

• GET方法
• 需要在使用的地方进行导入：import axios form 'axios'
• 注册原型的方法名字({url: '地址',params : {key1 : val1,key2 : val2,...},method : "GET").then( res => {}).catch( err => {})

axios({
	url : "http://www.endata.com.cn/API/GetData.ashx",
	params : {
		areaId : 50,
		typeId : 0,
		initial : '',
		pageIndex : 1,
		pageSize : 10,
		MethodName : "BoxOffice_GetMovieData_List"
	},
	method : "GET",
}).then( res => {
	console.log("成功的回调");
}).catch( err => {
	console.log("失败的回调");
})

Axios 配置选项默认值

• 获取数据的时候axios每次都要获取地址，如果地址改变了的时候，参数不变的时候，
• 更改每一个axios的地址就会非常麻烦
• 所以在定义axios之初，进行一些配置定义，这样就对后期维护就很方便

配置axios默认信息

• 在main.js文件中配置

// 导入axios
import Axios from 'axios';
// 配置默认的请求数据地址
Axios.default.baseURL = "https://www.520mg.com";
// 配置请求头的默认信息
Axios.default.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
// 注册原型
Vue.prototype.$Axios = Axios;

标签：Axios,console,log,vue,res,获取数据,axios
来源： https://blog.csdn.net/qq_34182705/article/details/107005951

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。