前端 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
    }

 

我是马丁的车夫，欢迎转发和收藏。

 

来源：https://www.cnblogs.com/Allen-project/p/15914097.html