vue 封装request请求多域名访问-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue 封装request请求多域名访问。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.需求

我现在一个项目有可能涉及到的数据多服务器压力大，所以需要配置多个服务就出现了一个问题，当第一个服务调用不通或者失败了立马换下一个域名调用接口都是一一样的就是前段部分的域名不同

2.实现

import Taro from "@tarojs/taro";
// import QS from 'qs'
import qs from "qs";
import {
  getStorage,
  clearStorage,
  getCurrentPageUrlWithArgs,
} from "..//utils/tools";
import { useUserStore } from "../store";
import { log } from "console";
let needLoadingRequestCount = 0;
// loading配置，请求次数统计
function startLoading() {
  Taro.showLoading({ title: "加载中", mask: true });
}
function endLoading() {
  Taro.hideLoading();
} // 声明一个对象用于存储请求个数
function showFullScreenLoading() {
  if (needLoadingRequestCount === 0) {
    startLoading();
  }
  needLoadingRequestCount++;
}
function tryHideFullScreenLoading() {
  if (needLoadingRequestCount <= 0) return;
  needLoadingRequestCount--;
  if (needLoadingRequestCount === 0) {
    endLoading();
  }
}
export default function request(url, config: any = {}, needLoading = false) {
  const BASE_URLS = [
    "http://xxxx",
    "http://xxxx",
  ];
  const userStore = useUserStore();
  needLoading && showFullScreenLoading();

  const makeRequest = (baseUrl) => {
    return new Promise((resolve, reject) => {
      Taro.request({
        url: `${baseUrl}${url}`,
        method: config.type.toUpperCase() || "GET",
        data: config.data || {},
        header: {
          "Content-type": config.paramsFormdata || "application/json",
          "user-token": userStore.Token || "",
          ...config.header,
        },
        success: (result) => {
          const { statusCode, data } = result;
          console.log(result);

          if (statusCode === 200) {
            resolve(data);
          } else if (statusCode === 401) {
            Taro.removeStorageSync("TOKEN");
            Taro.removeStorageSync("userInfo");
            setTimeout(() => {
              Taro.redirectTo({
                url: "/pages/index/index",
              });
            }, 500);
          }
        },
        fail: (error) => {
          Taro.showToast({
            title: "网络错误",
            icon: "none",
          });
          reject(error);
        },
        complete: (res) => {},
      });
    });
  };

  // Attempt the first base URL
  return makeRequest(BASE_URLS[0]).catch((error) => {
    // If the first request fails, try the second base URL
    console.error(`Error with first base URL: ${error}`);
    return makeRequest(BASE_URLS[1]);
  });
}

3.总结

我这个域名目前配置了两个域名当前就是第一个域名调用不通的时候立马换第二个域名，当然如果需要多个可以进行一下循环，这样的需求不知道大家会不会有，我分享在这了文章来源地址https://www.toymoban.com/news/detail-829709.html

到了这里，关于vue 封装request请求多域名访问的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！