之前一直對封裝路由展露出很大的興趣，但是一直封裝的都是基本封裝，覺得層次化不夠分明芦昔，也不夠簡便！Ｍ拗住咕缎！在這里記錄一下
又是踩坑的一天...
以前的思路：
import axios from 'axios'
const http = axios.create({
? baseURL: '/api',
? timeout: 10000
})
http.interceptors.request.use( //請求攔截器
config => {
console.log(config);? // 該處可以將config打印出來看一下，該部分將發(fā)送給后端（server端）
config.headers.token = '該處可設(shè)置token內(nèi)容';
return config? // 對config處理完后返回料扰，下一步將向后端發(fā)送請求
},
error => {? // 當發(fā)生錯誤時凭豪，執(zhí)行該部分代碼
? ? console.log(error); //調(diào)試用
? ? return Promise.reject(error)
}
)
http.interceptors.response.use(? //響應攔截器
response => {? // 該處為后端返回整個內(nèi)容
const res = response.data;? // 該處可將后端數(shù)據(jù)取出，提前做一個處理
if ('正常情況') {
return response? // 該處將結(jié)果返回晒杈，下一步可用于前端頁面渲染用
} else {
alert('該處異常');
return Promise.reject('error')
}
},
error => {
console.log(error),
Promise.reject(error)
}
)
export default http
然后把這個js文件引入到main.js文件中嫂伞，掛載到vue的原型上，之前都是這樣做的拯钻！簡單吧...
### 但是這樣肯定是不夠完美的? ###
所以今天借鑒了vue element admin 這個專門寫后端管理的模板帖努，看了好久，覺得別人的特別好粪般，所以來分享一下拼余！畢竟好東西，肯定是要拿來多參考亩歹，多學習的嘛
現(xiàn)在的思路：
理念是這樣的：我把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)=>{ //根據(jù)id獲取指定公司信息
? ? return request({
? ? ? ? url:`/article/${id}`,
? ? ? ? method:'get'
? ? })
}
export const removearticle = (id:string)=>{ //根據(jù)id刪除指定公司信息
? ? return request({
? ? ? ? url:`/article/${id}`,
? ? ? ? method:'delete'
? ? })
}
export const updatearticle = (id:string,data:any)=>{ //根據(jù)id更新指定公司信息
? ? return request({
? ? ? ? url:`/article/${id}`,
? ? ? ? method:'put',
? ? ? ? data
? ? })
}
不需要掛載到Vue的原型上亭姥，哪里需要哪里引用...
通過按需引入的方法就可以了稼钩，我認為這樣最大的好處就是，條理清楚达罗，便于維護
也是初入介紹变抽，如果有不對的地方，希望您多多指正氮块，每一次的錯誤绍载，都是一次進步，畢竟我渴望進步
