项目需求

最近使用 Vue 开发后台管理系统项目,开发过程遇到一个特别闹心的事情，由于项目没有上线,所有接口地址都是后台人员的电脑做为服务器。但是：这个项目有几个后台同时开发接口，每一个大模块对应的接口地址就不一样了。如果每一个请求都写完整的地址，当然可以实现，但是不符合我们大前端封装的思想呀，于是就写下封装的方法，供大家参考，如有不对，欢迎留言哟。。。。。

准备工作1, 准备一个utls.js 文件(路径自己存放,我放到main.js同一目录)

// 导出 对应的不同接口的URL地址
module.exports = {
        domain: {
            Base_M1_URL: 'http://192.168.2.54:8008', //模块一接口地址
            Base_M2_URL: 'http://192.168.2.90:8080', //模块二接口地址
            Base_M3_URL: 'http://192.168.2.102:6608', //模块三接口地址
            Base_M4_URL: 'http://192.168.2.222:9000', //模块四接口地址
        }
    }

准备工作2,准备一个公用的common.js文件,并导入的main.js中(路径自己存放,我放到main.js同一目录)

//1->common.js中引入axios
import Axios from 'axios'
Axios.defaults.timeout = 180000
//2->对get请求传递过来的参数处理
function paramsToUrl(url, params) {
    if (!params) return url
    for (var key in params) {
        if (params[key] && params[key] != 'undefined') {
            if (url.indexOf('?') != -1) {
                url += '&' + '' + key + '=' + params[key] || '' + ''
            } else {
                url += '?' + '' + key + '=' + params[key] || '' + ''
            }
        }
    }
    return url
}


//3->在common.js中封装公用方法-----封装请求的方法
function requireData(url,params,type,item){
	if(!url) return false
	switch(item){
		case 'M1':
			url=axios.defaults.baseM1URL+url
			break;
		case 'M2':
			url=axios.defaults.baseM2URL+url
			break;
		case 'M3':
			url=axios.defaults.baseM3URL+url
			break;
		default:
			url=axios.defaults.baseM4URL+url
	}
	if(type==='get'){
		url=paramsToUrl(url, params)
		return new Promise((resolve,reject)=>{
			Axios.get(url,params).then(res=>{
				resolve(res.data)
				}).catch(err=>{
					reject(err)
				})
		})
	}else{
		return new Promise((resolve,reject)=>{
			Axios.post(url,params).then(res=>{
				resolve(res.data)
				}).catch(err=>{
					reject(err)
				})
		})
	}
}




export default{
	install(Vue,options){
	//->接口1的请求数据方法
		Vue.prototype.reqM1Service=function(url,params,type){
			return requireData.call(this,url,params,type,'M1')
		}
	//->接口2的请求数据方法
		Vue.prototype.reqM2Service=function(url,params,type){
			return requireData.call(this,url,params,type,'M2')
		}
	//->接口3的请求数据方法
		Vue.prototype.reqM3Service=function(url,params,type){
			return requireData.call(this,url,params,type,'M3')
		}
	//->接口4的请求数据方法
		Vue.prototype.reqM4Service=function(url,params,type){
			return requireData.call(this,url,params,type,'M4')
		}
	}

}

第一步，在项目 main.js 引入axios和utls.js和common.js

import Vue from 'vue'
//在main.js中引入axios
import axios from 'axios'

//引入 utls.js
import {domain} from './utls.js'

//引入 common.js
import common from './common.js'
Vue.use(common)
//配置axios
//->1,模块一接口,url地址
axios.defaults.baseM1URL = domain.Base_M1_URL
//->2,模块二接口,url地址
axios.defaults.baseM2URL = domain.Base_M2_URL
//->3,模块三接口,url地址
axios.defaults.baseM3URL = domain.Base_M3_URL
//->4,模块四接口,url地址
axios.defaults.baseM4URL = domain.Base_M4_URL

第二步,在组件中直接使用封装好的方法调用服务,请求数据

<template>
  <h2>{{test}}</h2>
</template>
<script>
export default {
  data: function() {
    return {
      test: "这是一个测试案例"
    };
  },
  mounted() {
    let url = "/login";
    let params = {
      username: "test",
      pass: "123",
      token: "1112212123123"
    };
    
    //->调用第一个接口的请求服务
    this.reqM1Service(url, params).then(
      res => {
        console.log(res);
      }
    );
    
    //->调用第2个接口的请求服务
    this.reqM2Service(url, params).then(
      res => {
        console.log(res);
      }
    );
  }
};
</script>

总结

优点:
1,在不同的组件调用不同的方法就可以实现,不同的接口请求数据;
2,维护接口方便,以后上线之后,把utls.js中的接口全部更换成线上接口即可;