js把异步改成同步？

Question

三个文件代码：
原本接口是从config.ts这里拿的，现在想改成从外部调用一个config.json文件，里面放了接口的请求地址，我需要先拿到这个地址再创建axios实例，这个要怎么实现。我实现到了可以从外部拿，但是如果请求时间长就会自动向下走。

service.ts

import axios, {
  AxiosInstance,
  AxiosRequestConfig,
  AxiosRequestHeaders,
  AxiosResponse,
  AxiosError
} from 'axios'

import qs from 'qs'

import { config} from './config'


import { useCache } from '@/hooks/web/useCache'
import { useAppStore } from "@/store/modules/app";



const { result_code, base_url } = config


export const PATH_URL = base_url[import.meta.env.VITE_API_BASEPATH]


const { wsCache } = useCache()

const appStore = useAppStore()
//axios.defaults.baseURL='ssss'


// 创建axios实例
const service: AxiosInstance = axios.create({
  baseURL: PATH_URL, // api 的 base_url
  timeout: config.request_timeout // 请求超时时间
})

// request拦截器
service.interceptors.request.use(
  (config: AxiosRequestConfig) => {
    if (
      config.method === 'post' &&
      (config.headers as AxiosRequestHeaders)['Content-Type'] ==='application/x-www-form-urlencoded') {
      config.data = qs.stringify(config.data)
    }
    const token=wsCache.get(appStore.getUserInfo)?.Token;
    if(token){
      (config.headers as AxiosRequestHeaders)['Authorization'] = token
    }

    // ;(config.headers as AxiosRequestHeaders)['Token'] = 'test test'
    // get参数编码
    if (config.method === 'get' && config.params) {
      let url = config.url as string
      url += '?'
      const keys = Object.keys(config.params)
      for (const key of keys) {
        if (config.params[key] !== void 0 && config.params[key] !== null) {
          url += `${key}=${encodeURIComponent(config.params[key])}&`
        }
      }
      url = url.substring(0, url.length - 1)
      config.params = {}
      config.url = url
    }
    return config
  },
  (error: AxiosError) => {
    // Do something with request error
    console.log(error) // for debug
    Promise.reject(error)
  }
)

// response 拦截器
service.interceptors.response.use(
  (response: AxiosResponse<any>) => {
    if (response.config.responseType === 'blob') {
      // 如果是文件流，直接过
      return response
    } else if (response.data.code === result_code) {
      return response.data
    } else {
      //ElMessage.error(response.data.msg)
      return response.data
    }
  },
  (error: AxiosError) => {
    console.log('err' + error) // for debug
    //ElMessage.error(error.message)
    return Promise.reject(error)
  }
)


export { service }

index.ts

import { service } from './service'

import { config } from './config'

const { default_headers } = config



const request = (option: any) => {
  const { url, method, params, data, headersType, responseType } = option
  return service?.({
    url: url,
    method,
    params,
    data,
    responseType: responseType,
    headers: {
      'Content-Type': headersType || default_headers
    }
  })
}
export default {
  get: <T = any>(option: any) => {
    return request({ method: 'get', ...option }) as unknown as T
  },
  post: <T = any>(option: any) => {
    return request({ method: 'post', ...option }) as unknown as T
  },
  delete: <T = any>(option: any) => {
    return request({ method: 'delete', ...option }) as unknown as T
  },
  put: <T = any>(option: any) => {
    return request({ method: 'put', ...option }) as unknown as T
  }
}

config.ts

const config: {
  base_url: {
    base: string
    dev: string
    pro: string
    test: string
  }
  result_code: number | string
  default_headers: AxiosHeaders
  request_timeout: number
} = {
  /**
   * api请求基础路径
   */
  base_url: {
    // 开发环境接口前缀
    //base: 'http://192.168.1.2:8001/',
    base: 'http://192.168.1.201:10013/',

    // 打包开发环境接口前缀
    dev: '',

    // 打包生产环境接口前缀
    pro: 'http://192.168.1.201:10013/',

    // 打包测试环境接口前缀
    test: '',

  },

  /**
   * 接口成功返回状态码
   */
  result_code:0,

  /**
   * 接口请求超时时间
   */
  request_timeout: 60000,

  /**
   * 默认接口请求类型
   * 可选值：application/x-www-form-urlencoded multipart/form-data
   */
  default_headers: 'application/json'
}
export { config}

Answer 1

所以为什么不直接用环境变量？