关于VUE的vue-axios使用_vue axios vue resoyece-CSDN博客

关于VUE的vue-axios使用

安装

//npm
$ npm i axios -S
$ npm i vue-axios -S

//main.js

//全局注册 axios
import Vue from 'vue';
import axios from 'axios';
Vue.prototype.$axios = axios;//this.$axios使用

//或 vue-axios
import Vue from 'vue';
import axios from 'axios';
import vueAxios from 'vue-axios';
Vue.use(vueAxios，axios);//Vue.axios/this.axios/this.$http使用axios，一次封装方便协作规范

//template.vue
//模板中局部引入
import axios from 'axios';//this.axios使用

使用

GET请求、POST请求
axios.get(url[,params]).then(function(response){...}).catch(function(error){...});
axios.post(url,data).then(function(response){...}).catch(function(error){...})
多个并发请求
并发的助手函数axios.all(iterable);axios.spread(callback)

function get1(){};
function get2(){};
function get3(){};
axios.all([get1(),get2(),get3()]).then(axios.spread(function(data1,data2,data3){
	...
}))

传递相关配置参数创建请求：

axios(config)发送POST请求：

	axios({
		method:'post',
		url:'url',
		data:{datas}
	})

axios(url[,config])发送GET请求：

	axios('/url?id=123456')
	//或
	axios('/url',
	params:{
		id:123456
	}
	)

所有方法别名

别名	说明
axios.request(config)	创建请求
axios.get(url[,config])	GET
axios.delete(url[,config])	DELETE
axios.head(url[,config])	HEAD
axios.post(url[,data[,config]])	POST
axios.put(url[,data[,config]])	PUT
axios.patch(url[,data[,config]])	PATCH

创建实例
axios.creat([config])
可用的config配置选项

axios.creat({
	baseURL:'url',
	url:'url',
	method:'get(默认)/post',
	transformRequest:[function(data){...处理数据...}],//‘POST’,‘PUT’,‘PATCH’发送前，修改请求数据
	transformResponse:[function(data){...处理数据...}],//传递给then/catch前，处理响应数据
	headers:{'X-Request-With':'XMLHttpRequest'},//自定义请求头
	params:{ID:123456},//一起发送的URL参数
	paramsSerializer:function(params){...},//处理params的序列化函数
	data:{data},//‘POST’,‘PUT’,‘PATCH’请求主体被发送的数据
	timeout:1000,//超时中断请求时间
	withCredentials:false(默认),//跨域请求是否需要凭证
	auth:{},//设置并覆盖'Authorization'头信息，HTTP基础验证及凭据
	adapter:function(config){},//自定义处理请求，便于测试
	responseType:'json'(默认)，//‘arraybuffer’，‘blob’，‘document’，‘json’，‘text’，‘stream’
	xsrfCookieName:'XSRF-TOKEN',
	xsrfHeaderName:'XSRF-TOKEN',//xsrf token值的cookie名称和HTTP头名称
	onUploadProgress:function(){},
	onDownloadProgress:function(){},//对原生进度事件的处理
	maxContentLenth:2000,//响应内容的最大尺寸
	validateStatus:function(status){},
	maxRedirects:5(默认),//为0不follow任何重定向
	httpAgent:new.http.Agent({keepAlive:false}),
	httpsAgent:new.https.Agent({keepAlive:false}),//node.js中是否开启自定义代理
	proxy:{
		host:'107.0.0.1',
		port:9000,
		auth:{username:'Michal',password:'123456'}
		},//自定义代理服务器及凭据，设置并覆盖HTTP中的Proxy-Authorization头信息
	cancelToken:new CancelToken(function(cancel){...})//取消请求的cancel token
	})

响应的结构

//then(response=>{...})得到的数据结构
response：｛
	data:{},
	status:200,
	statusText:"OK",
	headers:{},
	config:{},
	｝
//catch(error=>{...})得到的数据结构
error:{
	response:{
		data:{},
		status:'',
		headers:{},
		},
	message:'',
	config:{},
	}

配置默认值

全局的axios默认值

axios.defaults.baseURL = '';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN ;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded' ;

自定义实例的axios配置

例如创建实例时var api = axios.create({baseURL:'URL'})；创建后修改api.defaults.headers.conmon['Authorization']=AUTH_TOKEN;
配置合并优先顺序

库的默认lib/defaults.js => 实例创建时axios.create() => 请求发送时的config参数

拦截器

请求或响应被then或catch处理前拦截：

 axios.interceptors.request.use(function(config){
 	...发送前...
 	return config
 	},function(error){
 	...错误处理...
 	return Promise.reject(error)
 	});

移除拦截器：
var myInterceptor = axios.interceptors.request.use(function(){...});
axios.interceptors.request.eject(myInterceptor);
自定义实例添加：
var api = axios.create();
api.interceptors.request.use(function(){...})

vue生态下的vue-axios

//全局注册
import Vue from 'vue';
import axios from 'axios';
import vueAxios from 'vue-axios';
Vue.use(vueAxios，axios);

Vue.axios/this.axios/this.$http使用axios，一次封装方便协作规范；

qs.js序列化处理数据：qs.parse()和qs.stringify()；以及与JSON.parse()/stringify()的异同；