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.总结

我这个域名目前配置了两个域名 当前就是第一个域名调用不通的时候 立马换第二个域名 ,当然如果需要多个 可以进行一下循环 ,这样的需求不知道大家会不会有 ,我分享在这了

你可能感兴趣的:(vue.js,前端,taro,javascript)