动态设置Axios默认baseURL遇404，疑与Promise相关求助

我一眼就发现问题所在了——你的getIp函数没有正确返回包含IP地址的Promise，再加上Vue实例可能在baseURL设置完成前就初始化，这两个因素共同导致了axios请求404的问题。

具体问题拆解 #

1. getIp函数没有返回有效Promise
   你写的getIp是async函数，但里面调用axios.get后，只是在then回调里return了拼接好的URL，却没有把axios.get本身的Promise返回出去。而且async函数如果没有明确return一个值，默认会返回一个resolved为undefined的Promise。这就导致await getIp()最终拿到的是undefined，axios的baseURL等于没设置，请求自然找不到正确的地址。

2. Vue实例初始化时机过早
   你直接调用setBaseURL()后就创建Vue实例，但setBaseURL是async函数，它的执行是异步的。这意味着Vue实例可能在baseURL设置完成前就已经挂载，此时组件里的axios请求会使用默认的baseURL（或者undefined），同样会触发404。

修复代码 #

方案一：用await简化getIp写法（推荐） #

这种写法更直观，也符合async/await的最佳实践：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'

async function getIp() {
  // 用await等待axios请求结果
  const response = await axios.get("https://api.ipify.org?format=json");
  // 直接获取ip，不需要额外的字符串处理（response.data.ip本身就是字符串）
  return `http://${response.data.ip}:8081`;
}

async function setBaseURL() {
  axios.defaults.baseURL = await getIp();
}

// 确保baseURL设置完成后再初始化Vue实例
async function initApp() {
  await setBaseURL();
  Vue.config.productionTip = false;
  new Vue({
    router,
    render: h => h(App)
  }).$mount('#app');
}

initApp();

方案二：保留then写法，确保返回Promise #

如果你更习惯Promise链式调用的写法，要记得把axios.get的Promise返回出去：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'

// 这里可以不用async，因为直接返回Promise
function getIp() {
  return axios.get("https://api.ipify.org?format=json")
    .then(response => {
      return `http://${response.data.ip}:8081`;
    });
}

async function setBaseURL() {
  axios.defaults.baseURL = await getIp();
}

async function initApp() {
  await setBaseURL();
  Vue.config.productionTip = false;
  new Vue({
    router,
    render: h => h(App)
  }).$mount('#app');
}

initApp();

额外说明 #

• 你之前用JSON.stringify(x.data.ip).replace(/"/g, '')是多余的，因为response.data.ip本身就是字符串类型，不需要再转成JSON字符串再去引号。
• 一定要等baseURL设置完成后再创建Vue实例，否则组件初始化时的请求会因为baseURL未就绪而失败。

内容的提问来源于stack exchange，提问作者podex