Axios配置为可复用模块时调用post方法报非函数错误

http.js通过export default导出的是包含两个Axios实例的普通对象，而非backendApi实例本身。actions.js导入时将整个默认导出对象赋值给backendApi变量，该对象本身不存在post方法，因此抛出post is not a function的类型错误。

提供两种可落地的实现方案，按需选择即可：

• 方案1：不修改原有http.js配置，调整导入逻辑，从导出对象中取出目标实例
  修正后的actions.js代码如下：

  import http from "@/http"
  // 从导出的配置对象中取出backendApi实例
  const backendApi = http.backendApi
  
  const userRegister = (context, user) => {
    backendApi
      .post("users/register", user)
      .then((resp) => {
        // 编写响应处理逻辑
      })
      .catch((err) => {
        // 编写错误处理逻辑
      })
  }
  
  export default {
    userRegister
  }
  

• 方案2：调整http.js的导出规则，改用具名导出，后续可直接按需导入对应实例，代码可读性更高
  修正后的http.js代码如下：

  import axios from "axios";
  
  export const backendApi =  axios.create({
    baseURL: process.env.VUE_APP_API_BASE_URL + "api/",
  });
  
  export const anotherApi =  axios.create({
    baseURL: "https://example.com",
  });
  

  对应调整actions.js的导入语句即可直接使用：

  // 直接导入需要的具名导出实例
  import { backendApi } from "@/http"
  
  const userRegister = (context, user) => {
    backendApi
      .post("users/register", user)
      .then((resp) => {
        // 编写响应处理逻辑
      })
      .catch((err) => {
        // 编写错误处理逻辑
      })
  }
  
  export default {
    userRegister
  }
  

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