之前一直对封装路由展露出很大的兴趣，但是一直封装的都是基本封装，觉得层次化不够分明，也不够简便！！！在这里记录一下
又是踩坑的一天...
以前的思路：
import axios from 'axios'
const http = axios.create({
baseURL: '/api',
timeout: 10000
})
http.interceptors.request.use( //请求拦截器
config => {
console.log(config); // 该处可以将config打印出来看一下，该部分将发送给后端（server端）
config.headers.token = '该处可设置token内容';
return config // 对config处理完后返回，下一步将向后端发送请求
},
error => { // 当发生错误时，执行该部分代码
console.log(error); //调试用
return Promise.reject(error)
}
)
http.interceptors.response.use( //响应拦截器
response => { // 该处为后端返回整个内容
const res = response.data; // 该处可将后端数据取出，提前做一个处理
if ('正常情况') {
return response // 该处将结果返回，下一步可用于前端页面渲染用
} else {
alert('该处异常');
return Promise.reject('error')
}
},
error => {
console.log(error),
Promise.reject(error)
}
)
export default http
然后把这个js文件引入到main.js文件中，挂载到vue的原型上，之前都是这样做的！简单吧...
### 但是这样肯定是不够完美的 ###
所以今天借鉴了vue element admin 这个专门写后端管理的模板，看了好久，觉得别人的特别好，所以来分享一下！毕竟好东西，肯定是要拿来多参考，多学习的嘛
现在的思路：
理念是这样的：我把axios的请求和响应拦截单独封装进a，所有的用户请求也单独封装为b，在封装的用户请求b中，使用a
大概就是这个意思：话不多说上代码
文件a：
import axios from 'axios'
import {Message} from 'element-ui'
const http = axios.create({
baseURL:'/api',
timeout:5000
})
http.interceptors.request.use((config)=>{ //请求拦截器
// if (UserModule.token) { //做token验证的
// config.headers['X-Access-Token'] = UserModule.token
// }
return config
},
(error)=>{
Promise.reject(error)
})
http.interceptors.response.use((response)=>{ //响应拦截器
return response
},
(error)=>{
Message({
message:error.message,
type:'error',
})
return Promise.reject(error)
})
export default http
文件b：
import request from '../utils/request' //引用a （用了ts的写法）
export const article = ()=>{ //获取所有的公司信息
return request({
url:'/article',
method:'get'
})
}
export const addarticle = (data:any)=>{ //添加公司信息
return request({
url:'/article',
method:'post',
data
})
}
export const articleinfo = (id:string)=>{ //根据id获取指定公司信息
return request({
url:`/article/${id}`,
method:'get'
})
}
export const removearticle = (id:string)=>{ //根据id删除指定公司信息
return request({
url:`/article/${id}`,
method:'delete'
})
}
export const updatearticle = (id:string,data:any)=>{ //根据id更新指定公司信息
return request({
url:`/article/${id}`,
method:'put',
data
})
}
不需要挂载到Vue的原型上，哪里需要哪里引用...
通过按需引入的方法就可以了，我认为这样最大的好处就是，条理清楚，便于维护
也是初入介绍，如果有不对的地方，希望您多多指正，每一次的错误，都是一次进步，毕竟我渴望进步
