axios拦截器
<p>src/axios/axios.js</p>
<pre><code>import axios from 'axios'
import config from '@/config'
const baseUrl = process.env.NODE_ENV ==='development'?config.baseUrl.dev:config.baseUrl.pro
class HttpRequest {
constructor(baseUrl){
this.baseURL = baseUrl
this.queue = {}
}
getInsideConfig(){
const config = {
baseURL:this.baseUrl,
header:{
//
},
}
return config
}
// 拦截请求
interceptors(instance,url){
instance.interceptors.request.use(config=>{
//处理config
console.log('拦截和处理请求')
console.log(config)
return config
})
instance.interceptors.response.use(res=>{
//处理响应
console.log('处理响应')
console.log(res)
return res
},error=>{
// 请求出问题，处理问题
console.log('网络出错了')
console.log(error)
})
}
request(options){
const instance = axios.create()// 创造实例对象
options = Object.assign(this.getInsideConfig(),options)
this.interceptors(instance,options.url)
return instance(options)
}
}
const axiosObj = new HttpRequest(baseUrl)
export default axiosObj</code></pre>
<p>src/axios/data.js</p>
<pre><code>import axios from '@/axios/axios'
export const getBannerData = ()=>{
return axios.request({
url:'/api/cplusplus/get_default_code',
method:'post'
})
}</code></pre>
<p>src/config/index.js</p>
<pre><code>export default {
title:'axiosinterceptor',
baseUrl:{
dev:'/api/',
pro:'http://127.0.0.1:3000'
}
}</code></pre>
<p>config/index.js <strong>OR</strong> vue.config.js</p>
<pre><code>...
proxyTable: {
'/api': {
target: 'http://cplus.shanshancode.com',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
},
...</code></pre>