使用axios拦截器模拟mock服务
使用axios拦截器模拟mock服务
作者：我是腾腾啊
为什么自己弄个mock？还不是前后端联调过程，后端动不动就重启服务，接口没数据，界面没效果，真的烦。怎么不搞开发环境？我也想啊，就是不搭，诶，无奈！！
axios拦截器是什么呢？是在请求前跟响应后的一个处理方法，分为request拦截器和response拦截器。模拟mock主要用到response拦截器，接口正常就使用接口返回的，接口报错就使用本地预置的数据。
//创建自己的axios实例
const myPost = axios.create({
baseURL:process.env.VUE_APP_baseURL,//环境变量
timeout:10000,
withCredentiala:true
})
//声明response拦截器
myPost.interceptors.response.use(
res => res.data,
err => {
//开发环境下，返回带*使用mock数据*的标记
if(process.env.NODE_ENV === 'development'){
return Promise.resolve({
data:{
useMockData:true
}
})
}
}
)
//封装公共的post
const $myPost = function(url,data){
return new Promise((resolve,reject) => {
myPost({
url,
method:'POST',
data,
}).then(res => {
if(process.env.NODE_ENV === 'development'){
//由于上面已经在响应拦截做了处理，开发环境一定走这里
resolve(res.data.useMockData === true && mockData.get(url) || res.data)
}else{
//生产环境
reject(res.data)
}
}).catch(error => {
//处理生产环境接口异常
})
})
}
上面的mockData的是Map类型，结构如下
//[接口，返回数据]
const mockData = [
['getlist',{data:[],status:'success'}]
]
//由于腾腾这边是单独的文件
export default new Map(mockData)
通过上面处理，对新接口补充对应数据就行了。
前端: 我再也不用求后端启服务了，后端是个弟弟。
后端: 不好意思，接口数据结构变了一下。
前段: 后端小哥哥，我错了，我是弟弟。
………
未完待续……
作者：我是腾腾啊
