axios请求,拦截器的使用

1. axios 创建请求

import axios from 'axios'
import {Message} from 'element-ui'
import router from "../router/index";

/** axios创建实例*/ 
let http=axios.create({ baseURL:'/ser/',
timeout:15000,
//formdata 提交 
headers:{
	 //配置类型  表单提交、json
	 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' 
 },
});

//请求体
function axiosHttp(method,url,params,response){
	http({
		method:method,
		url:url,
		data: method === 'POST' ? params:null,
		params: method === 'GET'? params:null,
	}).then((res)=>{ 
		response(res);
	}).catch((err)=>{
		 response(err);
	}) 
}

2. 请求方式

export default { 
/***
*post 请求
*@param url 接口名称
*@param param 参数
*@param response 响应 **/ 

post:(url,param,response)=>{ 
	return axiosHttp('POST',url,param,response);
},

 /***
*get 请求
*@param url
*@param param
*@param response**/
 get:(url,param,response)=>{
	 return axiosHttp('GET',url,param,response); 
	 }
  }

3. axios全局拦截器

/** 添加拦截设置*/

//请求拦截 
http.interceptors.request.use(config=>{
/** token 验证是否过期*/
//token 直接从cookie 中获取   一处添加，处处都有  根据是否有其他参数进行添加
 if (sessionStorage.getItem('token')){
	config.headers.token=sessionStorage.getItem('token');
	}
	return config;
},error=>{
	Message.error({ message:'请求超时!' })
	return Promise.reject(error) 
})


//响应拦截 
http.interceptors.response.use(data=>{
 	//根据相应 添加业务
	return data;
},error=>{
	Message.error({ message:'请求失败!' })
	return Promise.reject(error)
 })

以上为vue 中定义api 请求js.直接在 main.js 文件中引入即可。