關於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使用

使用

1. GET請求、POST請求
   axios.get(url[,params]).then(function(response){...}).catch(function(error){...});
   axios.post(url,data).then(function(response){...}).catch(function(error){...})
2. 多個併發請求
   併發的助手函數axios.all(iterable);axios.spread(callback)

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

3. API

傳遞相關配置參數創建請求：

• axios(config)發送POST請求：

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

• axios(url[,config])發送GET請求：

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

4. 所有方法別名

別名	說明
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

5. 創建實例
   axios.creat([config])

6. 可用的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
	})

7. 響應的結構

//then(response=>{...})得到的數據結構
response：｛
	data:{},
	status:200,
	statusText:"OK",
	headers:{},
	config:{},
	｝
//catch(error=>{...})得到的數據結構
error:{
	response:{
		data:{},
		status:'',
		headers:{},
		},
	message:'',
	config:{},
	}

8. 配置默認值

• 全局的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參數

9. 攔截器

• 請求或響應被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()的異同；