前端 axios 請求多個域名配置，和請求並發問題

廢話不多說，上干貨。

這里只說邏輯，和附帶部分重要代碼。

1.配置多個域名

在項目開發中 分生產環境，和開發環境，所以我們配置多個域名也要分本地和生產

　　本地開發配置：在請求反向代理的地方 通過請求接口的前綴區分 當前要請求轉發到那個域名去獲取資源

api.js（封裝api調用）

這里主要做兩步

1.設置接口前綴，讓在本地開發環境下完成多域名請求配置

2.給所有接口一個標識 domainName（主要是后面針對生產環境下的代碼邏輯使用）

import request from '@/utils/request'
import domainName from '@/utils/domainName'
// 請求代理中 /v3域名資源
export function userColors (data) {
  return request({url: '/v3/vehicle/colors',method: 'GET',domainName:domainName.domainNameA})
}
// 請求代理中 /prod域名資源
export function userUpdate (data) {
  return request({url: '/prod/user/update',method: 'POST',data,domainName:domainName.domainNameB})
}

// 請求代理中 /test域名資源
export function userCircles (data) {
  return request({url: '/test/user/circles',method: 'POST',data,domainName:domainName.domainNameC})
}
// 請求 /config域名資源
export function userBan (data) {
  return request({url: '/config/user/ban',method: 'POST',data,domainName:domainName.domainNameD})
}

 

domainName.js

module.exports = {
  domainNameA:'domainNameA',
  domainNameB:'domainNameB',
  domainNameC:'domainNameC',
  domainNameD:'domainNameD'
}

 

配置多個反向代理，實現請求不同域名資源

        proxy: {
            '/config': { 
                target: 'https://xxxx4',
                changeOrigin: true, // 如果接口跨域，需要進行這個參數配置
                pathRewrite: {
                    '^/config': ''
                }
            },
            '/test': { 
                target: 'https://xxxx3',
                changeOrigin: true, 
                pathRewrite: {
                    '^/test': ''
                }
            },
            '/prod': { 
                target: 'https://xxxx2',
                changeOrigin: true, 
                pathRewrite: {
                    '^/prod': ''
                }
            },
            '/v3': { 
                target: 'https://xxxx1',
                changeOrigin: true, 
                pathRewrite: {
                    '^/v3': ''
                }
            },
        },

 

　　生產環境配置：在打包上線后反向代理自動失效，並且會通過下面的條件進行 請求對應的域名

axios配置封裝

// 這里原來咋個寫 現在還是咋個寫 如果你不給接口打上域名標識，那么默認就會去請求這個配置里的域名資源
const service = axios.create({
    baseURL: process.env.NODE_ENV === 'development' ? '/test' :'https:生產域名', // api 的 base_url
    timeout: 5000 // request timeout
})


// 請求攔截  設置統一header
service.interceptors.request.use(
  config => {
　　// 生產環境生效 下面的代碼 實現具體接口請求具體域名的地址和資源
    if(process.env.NODE_ENV === 'production' && config.domainName){
        if(config.domainName === 'domainNameA'){
            config.baseURL = 'https:xxxx1'
        } else if(config.domainName === 'domainNameB'){
            config.baseURL = 'https:xxxx2'
        }else if(config.domainName === 'domainNameC'){
            config.baseURL = 'https:xxxx3'
        }else if(config.domainName === 'domainNameD'){
            config.baseURL = 'https:xxxx4'
        }
    }
    
    return config;
  },
  error => {
    return Promise.reject(error)
  }
)

 

2.請求並發 並且等待全部完成回調

這里同時並發請求倆個接口 ，並且等待全部服務器響應完畢后才會觸發回調

//調用all()方法，在里面傳入數組，在數組里寫上想要發送的請求，然后then(results => )拿到最終請求 進行統一相關處理
axios.all([
    axios({
        url:'http://123.207.32.32:8000/home/multidata',
        timeout:5,
    }),
    axios({
        url:'http://123.207.32.32:8000/home/data',
        timeout:5,
        params:{
            type:'sell',
            page:5
        }
    })
]).then(axios.spread((res1,res2) => {
    console.log(res1);
    ocnsole.log(res2);
}))

 

擴展： 因為瀏覽器限制請求並發 只能6個請求

可以在同樣的運行環境，同樣的資源在多個域名（同一個ip）情況下加載，這個需要后端去配置，

在DNS服務商中申請多個域名，指向同一個 IP 服務，

對后台返回的數據進行域名處理，

對圖片鏈接，進行域名替換，域名替換完成后，通過 localStorage 進行 key / value 保存。

以使得相同圖片在下一次展示時，能使用瀏覽器緩存，而非重復加載。

 

第一次拿到圖片鏈接數組 傳入下面的函數 ，吧圖片域名地址替換成下面多個域名地址，（因為指向同一個IP所以都可以訪問，並且加快響應速度50%以上）

 // 替換域名
    function replaceDomain(data) {
      let imgUrlObj = localStorage.getItem('imgUrlObj') || {} // 獲取本地保存的圖片鏈接，能正常使用緩存
      if (typeof(imgUrlObj) === 'string') { // 判斷是否為JSON對象，不是則轉換
        imgUrlObj = JSON.parse(imgUrlObj)
      }
      let index = Math.floor(Math.random() * 4.99) // 隨機0-4的下標
      try {
        data = JSON.stringify(data)
        data = data.replace(/www\.baidu\.com\/image(.*?)(jpg|png|jpeg)/g, (...params) => { // 查找圖片的url並對其進行操作
          let sourceUrl = params[1] + params[2] // 圖片資源名稱，未包含域名。如：整條圖片鏈接為：www.baidu.com/image/123.png; 現保存為：/image/123.png
          if (!imgUrlObj[sourceUrl]) { // 未保存在本地，則新產生域名
            let imgUrl = `node${[1, 2, 3, 4, 5][index % 5]}.baidu.com/image/${sourceUrl}` // 域名替換，如：從 www.baidu.com 替換到 node1.baidu.com,node2.baidu.com
            imgUrlObj[sourceUrl] = imgUrl // 同時保存好新的域名，在這就體現了使用JSON對象的好處，圖片資源路徑名當key值，圖片完整鏈接當value值
            localStorage.setItem('imgUrlObj', JSON.stringify(imgUrlObj))
            index++
            return imgUrl
          } else { // 保存到了本地，則直接使用localStorage的url
            return imgUrlObj[sourceUrl]
          }
        })
        data = JSON.parse(data)
      } catch (e) {
        console.log('replaceDomain error')
        console.log(e)
      }
      return data
    }

 

我是馬丁的車夫，歡迎轉發和收藏。