详解基于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 请求的封装，如果有啥写错的地方，还请各位大佬提出来。