vue-axios（一）

时间：2025-03-25 10:14:54

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
  • 从 发出 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求和响应数据
  • 取消请求
  • 自动转换JSON数据
  • 客户端支持防止 CSRF/XSRF

Axios 引入方式

安装 axios

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

导入 axios

  • 因为axios使用频繁，所以需要在中导入，并注册原型
// 导入
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() {
		// 这里的?page=1参数可以使用{params : {page : 1}}来表示
			this.$Axios.get("http:///mi/?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.post(
				"/API/",
				"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.post(
				"/API/",
				{
					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(
				"/API/",
				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:///ajax/",data)
.then( res => {
	console.log(res);
})

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

<template>
	<div>
		<h1>首页</h1>
		<div v-if="">
			<img :src="'http://'+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:///ajax/",
				data,
				// 第1个参数 url 第二参数 data数据，第三个是配置渲染，
				// onUploadProgress 当上传进度时
				{onUploadProgress:e=>{
					 
					that.pre =Math.floor(e.loaded/e.total*100);
					//  已经上传的字节数据， 字节数据  转换为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 : "/API/",
	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 : "/API/",
	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默认信息

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

相关文章