Vue 2.0プロジェクトの中でAxiosは異なるbaseURLを構成して、異なるドメイン名のインタフェースを要求します

Vue 2.0プロジェクトの中でAxiosは異なるbaseURLを構成して、異なるドメイン名のインタフェースを要求します

プロジェクト需要

準備作業1、utlsを準備する.jsファイル(パスは自分で保存し、main.jsと同じディレクトリに置きます)

準備作業2、共通のcommonを準備する.jsファイル、インポートmain.js(パスは自分で保存し、main.jsと同じディレクトリに置きます)

最初のステップは、プロジェクト*main.js*はaxiosとutlsを導入する.jsとcommon.js

第2のステップは、コンポーネント内でカプセル化された方法を直接使用してサービスを呼び出し、データ

を要求する.

まとめ

プロジェクト要件
最近Vueを使ってバックグラウンド管理システムプロジェクトを開発して、開発過程は1つの特に騒がしい事に出会って、プロジェクトがオンラインになっていないため、すべてのインタフェースのアドレスはバックグラウンド人員のコンピュータがサーバーになるのです.しかし、このプロジェクトにはいくつかのバックグラウンドが同時にインタフェースを開発しており、大きなモジュールごとにインタフェースアドレスが異なります.すべてのリクエストに完全なアドレスを书くと、もちろん実现できますが、私たちのフロントエンドのパッケージの考えに合わないので、パッケージの方法を书いて、参考にして、间违いがあれば、伝言を歓迎します....
準備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

第2のステップは、コンポーネント内でパッケージされたメソッドを直接使用してサービスを呼び出し、データを要求することです.

<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のインタフェースはすべてオンラインインタフェースに交換すればよい.