vue封装axios
记得要安装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