前言:我们在开发项目的时候,往往要处理大量的接口.并且在测试环境 开发环境 生产环境使用的接口baseurl都不一样 这时候如果在开发环境完成之后切换每一个接口的baseurl会变的非常的麻烦,(要去每一个发出请求的页面都要去修改地址)
所以为了更好的管控这些api,我们需要自己封装一个axios定义统一的接口baseurl 这样在环境的切换的时候更好的管控和修改.话不多说上代码!!!
自己创建一个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中引入并且挂载到原型对象上
1 import http from '@/api/api.js'
2 Vue.prototype.$http = http
第一种封装的方式一般就是对于api数量不是特别多的时候 复杂层级不高的情况 这样封装完全可以
第二种方式
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 }
这种封装好之后,就可以在创建一个文件夹 然后把所有的接口都写在一起
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
别忘了点个赞哦!!谢谢