统计

随笔 - 52
文章 - 0
评论 - 15
阅读 - 68145

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