记得要安装axios 哦,npm install axios vue-axios -S
然后再main.js中全局使用
import axios from './utils/axios';
import VueAxios from 'vue-axios';
//axios,VueAxios的引入
Vue.use(VueAxios, axios);
先分了两个步骤:
1、抽取出来的config文件中就是生成环境以及开发环境的地址
// 开发环境地址
const devUrl = '/api/'
//生产环境地址
// const productionUrl = 'http://115.233.221.136/:81/hy_comm_api/'
const productionUrl = 'http://localhost:8080/api/'
const httpUrl = {
development: devUrl,
production: productionUrl
}
const config = {
baseUrl: httpUrl[process.env.NODE_ENV]
}
export default config
2、主要的是axios的响应跟请求的封装了
import axios from 'axios'
import Config from './config'
// import { Message } from 'element-ui'
const service = axios.create({
baseURL: Config.baseUrl,
timeout: 60000
})
service.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'
// request拦截器
service.interceptors.request.use(
config => {
return config
},
error => {
Promise.resolve(error)
}
)
// respone拦截器
service.interceptors.response.use(
response => {
if (response.data.errorcode != 200) {
console.log(response.config.url)
}
return response.data.data
},
error => {
// do something 拦截响应
return Promise.reject(error)
}
)
export default service