Vue项目自动更换BaseUrl

需求逻辑：利用axios响应拦截中error.code == "ECONNABORTED"中判断baseUrl已经无效，清除无效域名后重新发起请求。

1、baseUrl域名

let index = -1 ;
const baseUrls = [
  "https://api.bvinvites.cc/",
  "https://api.invitebv.cc/",
  "https://api.invitesbv.cc/",
  "https://api.bv-invite.cc/"
]

2、获取baseUrl，优先从本地缓存中获取,缓存中未取到继续从baseUrls中获取

export function getBaseUrl() {
    let baseUrl = localStorage.getItem("baseUrl") ;
    if(baseUrl) return baseUrl ;
    if(index > baseUrls.length - 1) throw new Error("所有域名均不可用") ;
    index++ ;
    return baseUrls[index] ;
}

将baseUrl放入缓存以及清除缓存

export function setBaseUrl(baseUrl){
  localStorage.setItem("baseUrl" , baseUrl) ;
}

export function clearBaseUrl(){
  localStorage.removeItem("baseUrl") ;
}

3、由于缓存中的域名有可能已经失效不能用，这个时候我们需要重新检查baseUrl清除无效的域名，优先使用缓存中的可用域名

export function resetBaseUrl(config){
  let cacheValideUrl = localStorage.getItem("baseUrl") ;
  if(cacheValideUrl && baseUrls.includes(cacheValideUrl)) {
    config.baseURL = cacheValideUrl ;
  }
  if (!baseUrls.includes(config.baseURL)){
    clearBaseUrl();
    config.baseURL = getBaseUrl();
  }
}

4、在axios请求拦截器中调用resetBaseUrl()方法，检查baseUrl剔除无效域名

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    config.headers.Authorization = localStorage.getItem('token') ;
    resetBaseUrl(config);
    return config;
}, function (error) {
    console.error("catch axios request global error",error);
    return Promise.reject(error);
});

5、在axios响应拦截器中做如下处理

（1）响应成功时设置将可用域名存入本地缓存，调用setBaseUrl（）方法

（2）响应失败时，清除本地缓存调用clearBaseUrl()方法，获取可用域名将其存入本地缓存中

// 添加响应拦截器
axios.interceptors.response.use(async function ({data = {},config}) {
    console.log("config",config);
  //设置可用域名
  setBaseUrl(config.baseURL);
  return data;
}, function (error) {
  let config = error.config ;
  console.log("error config",config);
  //接口响应超时
  if(error.code == "ECONNABORTED") {
    clearBaseUrl(); //清除本地域名缓存
    config.baseURL = getBaseUrl() ;
    axios.request(config);
    return ;
  }
  //设置可用域名
  setBaseUrl(config.baseURL);
    console.error('catch axios response global error',error);
    return Promise.reject(error);
});

总结：

1、将元素存入本地缓存方法：localStorage.setItem("缓存空间名称" , 需要存入的元素)

2、从缓存中取出某个元素：localStorage.getItem('缓存空间名称')

3、清除本地缓存：localStorage.removeItem(”缓存空间名称“)

4、includes()方法用于判断字符串是否包含指定的子字符串，或者判断数组中是否有指定的元素

5、在axios请求拦截中需要注意的是，之前存入缓存中的域名可能已经失效，这里就需要重置域名，将缓存中无效的域名清除掉，将可用的存在缓存中

Vue项目自动更换BaseUrl

猜你喜欢