axios是现在前端最常用发请求的工具库,本文将对axios进行封装
第一步: 引入axios
cnpm install axios -S
第二步: 封装get/post/put等方法
import axios from 'axios';
import { Message } from 'element-ui';
axios.defaults.timeout = 5000;
axios.defaults.baseURL ='';
//http request 拦截器
axios.interceptors.request.use(
config => {
// const token = getCookie('名称');注意使用的时候需要引入cookie方法,推荐js-cookie
config.data = JSON.stringify(config.data);
config.headers = {
'Content-Type':'application/x-www-form-urlencoded'
}
// if(token){
// config.params = {'token':token}
// }
return config;
},
error => {
return Promise.reject(err);
}
);
//http response 拦截器
axios.interceptors.response.use(
response => {
if(response.data.errCode ==2){
router.push({
path:"/login",
querry:{redirect:router.currentRoute.fullPath}//从哪个页面跳转
})
}
return response;
},
error => {
return Promise.reject(error)
}
)
/**
* 封装get方法
* @param url
* @param data
* @returns {Promise}
*/
const fetch = (url,params={}) => {
return new Promise((resolve,reject) => {
axios.get(url,{
params:params
})
.then(response => {
resolve(response.data);
})
.catch(err => {
reject(err)
})
})
}
/**
* 封装post请求
* @param url
* @param data
* @returns {Promise}
*/
const post = (url,data = {}) => {
return new Promise((resolve,reject) => {
axios.post(url,data)
.then(response => {
resolve(response.data);
},err => {
reject(err)
})
})
}
/**
* 封装patch请求
* @param url
* @param data
* @returns {Promise}
*/
const patch = (url,data = {}) => {
return new Promise((resolve,reject) => {
axios.patch(url,data)
.then(response => {
resolve(response.data);
},err => {
reject(err)
})
})
}
/**
* 封装put请求
* @param url
* @param data
* @returns {Promise}
*/
const put = (url,data = {}) => {
return new Promise((resolve,reject) => {
axios.put(url,data)
.then(response => {
resolve(response.data);
},err => {
reject(err)
})
})
}
/*
* 将方法统一输出
*/
export default {
patch,
post,
put,
fetch
}
第三步: 拦截响应与请求
//拦截所有的请求
axios.interceptors.request.use(config => { console.log(config)
// 在需要带上token数据的地方,加上token
if(!config.url.endsWith('/login')){ //login接口不用加上token
config.headers.Authorization = localStorage.getItem('myToken');
}
return config;
}, error => {
// 对请求错误做些什么
return Promise.reject(error);
})
// 添加响应拦截器
axios.interceptors.response.use(function (response) { console.log(response)
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
可以将拦截的js代码放置到VUE中的main.js里面,这样就可以做到全局拦截了
二、 实际案例:
三、对齐微服务架构
为了对齐微服务架构,做到RESTful风格,我做出如下调整:
3.1 目录结构调整
├─api
index.js axios底层封装
├─base 负责调用基础服务,basecenter
├─business 负责调用具体业务服务,businesscenter
└─user 负责调用用户相关服务,usercenter
这样就可以将所有与api有关的代码,放在一起便于维护
3.2 增加适配层
import api from '../index'
import { paramsFilter } from "@/utils/helper";
// 添加角色
export const addRole = params => api.post(`role/add`, paramsFilter(params));
其中的paramsFilter方法是作为处理接口数据的方法,这样在.vue文件中调用方法的时候,就可以直接使用处理好的数据,将接口数据的处理放在适配层里面。极大减少了业务逻辑的耦合。
四、进一步抽离业务逻辑
4.1 为什么要抽离
因为每次调用接口都要import这样调用不同文件里的接口就要import多次,那么为什么不利用类的思维来管理接口呢?同时还可以增加命名空间,极大的优化api的管理。
4.2 源码