前言:咱们在开发项目的时候,每每要处理大量的接口.而且在测试环境 开发环境 生产环境使用的接口baseurl都不同 这时候若是在开发环境完成以后切换每个接口的baseurl会变的很是的麻烦,(要去每个发出请求的页面都要去修改地址) html
因此为了更好的管控这些api,咱们须要本身封装一个axios定义统一的接口baseurl 这样在环境的切换的时候更好的管控和修改.话很少说上代码!!!java
本身建立一个api文件夹 便可
1 import axios from 'axios'
为了处理java字符串问题 2 import qs from 'qs' 3 建立一个axios实例 在其中设置超时时间和响应头 4 const http = axios.create({ 5 baseURL: process.env.VUE_APP_MOCK_DATA_URL, // api 的 base_url 6 timeout: 3000, 7 headers: { 8 'Content-Type': 'application/json;charset=utf-8' 9 } 10 }) 11 /** 12 * 请求拦截 能够在发送请求的时候加上判断信息 13 */ 14 http.interceptors.request.use(config => { 15 ***** 16 return config 17 }, error => { 18 return Promise.reject(error) 19 }) 20 21 /** 22 * 响应拦截 能够对传回的数据作出判断 23 */ 24 http.interceptors.response.use(response => { 25 26 return response 27 }, error => { 28 return Promise.reject(error) 29 }) 30 31 32 将这个封装好的axios 暴露出去 33 export default http
在main.js中引入而且挂载到原型对象上ios
1 import http from '@/api/api.js' json
2 Vue.prototype.$http = http axios
第一种封装的方式通常就是对于api数量不是特别多的时候 复杂层级不高的状况 这样封装彻底能够api
第二种方式app
1 'use strict' 2 3 一样的也须要引入这两个包 4 import axios from 'axios' 5 import qs from 'qs' 6 7 // 设置拦截器 默认请求url得前缀 8 // axios.defaults.baseURL = process.env.NODE_ENV === 'production' ? '/custInfo' : 9 // '127.0.0.1:8888', 11 // axios.interceptors.request.use(config => { 12 // // // loading 13 // return config 14 // }, error => { 15 // return Promise.reject(error) 16 // }) 17 // 18 // axios.interceptors.response.use(response => { 19 // return response 20 // }, error => { 21 // return Promise.resolve(error.response) 22 // }) 23 24 export default { 25 post(url, data) { 26 return new Promise((resolve, reject) => { 27 axios({ 28 method: 'post', 29 url, 30 // qs这个插件主要是为了解决java后台接受到得参数必须是字符串 31 data: qs.stringify(data), 32 headers: { 33 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' 34 } 35 }).then((res) => { 36 resolve(res) 37 }).catch((error) => { 38 reject(error) 39 }) 40 }) 41 }, 42 get (url, params) { 43 return new Promise((resolve, reject) => { 44 axios({ 45 method: 'get', 46 url, 47 params, // get 请求时带的参数 48 }).then((res) => { 49 resolve(res) 50 }).catch((error) => { 51 reject(error) 52 }) 53 }) 54 } 55 }
这种封装好以后,就能够在建立一个文件夹 而后把全部的接口都写在一块儿post
getCustValue(params) { return $http.post('/custOverview/getCustValue', params); }, getTacntrt(params) { return $http.get('/dict/getTacntrtMgmtMsgMonth', params); }, query(params) { return $http.post('/indexManager/queryVipFlowCount', params); }
而后一一列举 就能够很是好的梳理api 测试
别忘了点个赞哦!!谢谢url