詳解基於vue封裝axios請求

特點：

• 支持瀏覽器和node.js
• 支持promise
• 能攔截請求和響應
• 能轉換請求和響應數據
• 能取消請求
• 自動轉換JSON數據
• 瀏覽器端支持防止CSRF(跨站請求僞造)

axios的相關配置信息

axios的併發請求

axios.all([axios({
	url:'http://127.0.0.1:8080/home'
}),axios({
	url:'http://127.0.0.1:8080/index'
})]).then(axios.spread((res1,res2)=>{
	console.log(res1)  // 這一個res1是打印的 第一個請求返回的信息
	console.log(res2) // 這一個res2是打印的 第二個請求返回的信息
}))

axios的實例和模塊封裝和請求攔截

攔截分爲

• 請求成功攔截
• 請求失敗攔截
• 響應成功攔截
• 響應失敗攔截

export function request(config) {
	// 1、創建axios實例
	const instance = axios.create({
	baseURL:'http://...'
	timeout:5000     //  設置請求超時 時間
})
	//  2、axios的攔截器
	instance.interceptors.request.use(config=>{ 
	//注意，這裏的參數也可以不是config，可以使任意的，但是在請求成功時獲取到的結果就是請求時的配置信息，所以這裏見名思意參數就寫config
	// 這裏是 發送請求成功時
	
	請求攔截的作用
	1、比如config中惡一些信息不符合服務器的要求
	2、比如每次發送網絡請求時，都希望在界面顯示一個圖標。可以在這裏顯示，然後在響應成功時再關閉掉
	3、某些網絡請求，比如登錄token，必須攜帶一些特殊的信息；
	console。log(config)  // 打印的結果是，請求時的配置信息
}, err =>{
	// 請求失敗時，比如沒網絡，這種情況一般出現的很少
	console.log(err)
});
	// 響應攔截
	instance.interceptors.use.response.use(res =>{
	// 響應成功
	return res.data  // 返回響應獲取到的data數據
}，err =>{
	// 響應失敗，	比如，接口地址寫錯了
	console.log(err)
})
	//  3、發送真正的網絡請求 
	return  instance(config)	// 這個返回的是一個 promise  
}

這就是一個大致的 axios 請求的封裝，如果有啥寫錯的地方，還請各位大佬提出來。