vue axios的封装

npm下载

npm i axios --save

可以在 main.js 中引入 也可以在需要用到请求的页面进行引入

不封装的

// 在main.js中
import axios from 'axios'
Vue.prototype.$axios = axios; //全局挂载
//在页面中
this.$axios.get && this.$axios.post

// 在xxx.vue中
import axios from 'axios'
//在页面中
axios.get && axios.post

往下看

<button @click="getHandle">发送get请求</button>
<button @click="postHandle">发送post请求</button>

/**
 * axios.get()  发起get请求
 * 参数一  表示请求地址
 * 参数二  表示配置信息
 * params  表示传递到服务端的数据,以url参数的形式拼接在请求地址后面
 *         { page:1 , per:3 }
 *	比如：https:xxx
	 *	最终生成的URL为：
	 *	https:xxx
 * headers 表示请求头	
 */
getHandle(){
	axios.get("https:xxx",{
		params:{
			page:3
			per:1
		},
		headers:{}
	}).then(res=>{
		console.log(res)
	})
},

/**
 * post请求传递三个参数
 *   请求地址
 *   传递的数据,在请求体中传递
 *       axios默认发送的数据是json格式的
 *    配置信息
 *       headers
 *         Content-Type：'application/json' 默认
 */
postHandle(){
	axios.post("https:xxxxxx",
	{
		userName:'xiaoming'
		password:"111111"
	},
	{
		params:{
			a:123,
			b:'哈哈哈'
		}
	}).then(res=>{console.log(res))
	   .catch(err=>{console.log(err)})
}


// axios.put()
// axios.delete()

封装axios

// 新建 utils  -> request.js  写入

//引入axios

import axios from 'axios'

/**
 * 创建一个新对象
 * baseURL  会在发送请求的时候拼接在url参数前面
 * timeout  请求超时时间
 */
const instance = axios.create({
	baseURL:"你的请求地址前缀", // 例如 http:localhost:3000
	timeout:5000
	
})

// 全局请求拦截
// 所有的网络请求都会先执行此方法，我们可以在他里面为请求加一些自定义内容
instance.interceptors.request.use(
	function(config){
		console.group('全局请求拦截，网络请求都会先执行此方法');
		console.log(config);
		console.groupEnd();
		config.headers.token = "12345"  //token字段根据需要自行修改
		return config;
	},
	function(err){
		return Promise.reject(err);
	}
)
// 全局响应拦截
// 所有的网络请求返回数据之后都会先执行此方法
// 此处可以根据服务器的返回状态码做相应的处理
instance.interceptors.response.use(
	function(response){
		console.group('全局响应拦截，网络请求返回数据之后都会先执行此方法');
		console.log(response);
		console.groupEnd();
		return response;
	},
	function(err){
		return Promise.reject(err);
	}
)


 //此处可单独写文件分类管理↓

export function get(url,params){
	return axios.get(url,{
		params
	});
}

export function post(url,data){
	return axios.post(url,data)
}

export function del(url){
	return axios.delete(url)
}

export function put(url,data){
	return axios.put(url,data)
}