vue 使用axios二次封装
1.axios封装代码
import axios from 'axios'
import { baseURL } from '../config/index.js'
// @lzy
// 创建实例
const instance = axios.create({
baseURL: baseURL,//设置接口请求ip地址
timeout:10000,//设置超时时间
headers:{//设置请求头
//使用这个application/json请求头会出现向服务器请求两次的情况.浏览器会首先使用 OPTIONS 方法发起一个预请求,
// 判断接口是否能够正常通讯,如果不能就不会发送真正的请求过来,如果测试通讯正常,则开始真正的请求。
// 解决方法:全局默认application/x-www-form-urlencoded 在请求时用qs转换数据给后台发送
"Content-Type": "application/json", //默认请求头为它
// "Content-Type": "text/html",
// 'Content-Type': 'application/x-www-form-urlencoded',
},
})
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
// config.headers.common[]
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
instance.interceptors.response.use(function (response) {
// 对响应数据做点什么
if (response.status === 200) {
return Promise.resolve(response.data);
} else {
return Promise.reject(response);
}
}, function (error) {
// 如果响应不是200状态码
// 对响应错误做点什么
// 列如:
// if (error.response.status) {
// switch (error.response.status) {
// 401: 未登录
// case 401:
// break;
// }
// }
return Promise.reject('未知错误-->'+error);
});
//将实例抛出去
export default instance;
2.api接口统一管理和引用二次封装axios
import axios from '../axios/index.js'
export const regionList = (data) => {
return axios({
method:'post',//请求方式
url:"/api/private/v1/login",//接口路径
data:data,//数据
// headers:{//请求头
// "Content-Type": "application/json"
// },
});
}