vue3 axios配置

在Vue3中配置axios有多种方法，可以根据你的具体需求选择适合你的方式。以下是一些常用的配置方法：

方法一：在main.js中直接挂载axios
如果只需要简单地使用几个页面，无需太过复杂的配置，可以直接在main.js中进行挂载。首先，需要下载axios，可以使用以下命令：

npm i axios

或者

yarn add axios

然后，在main.js中引入axios，并将其挂载为Vue的原型属性：

import Vue from "vue";
import axios from 'axios'

Vue.prototype.$http = axios

接下来，你可以通过`this.$http`来进行axios的请求。

方法二：使用Composition API
如果你正在使用Composition API，可以使用getCurrentInstance方法来获取当前实例，并通过该实例获取全局实例的配置。首先，需要在页面中引入相关的Composition API方法：

import { reactive, onMounted, getCurrentInstance } from "vue";

然后，在setup函数中使用getCurrentInstance方法获取当前实例，并通过该实例获取全局实例的config.globalProperties。具体代码如下：

setup() {
  let data = reactive([]);

  const currentInstance = getCurrentInstance();
  const { $axios } = currentInstance.appContext.config.globalProperties;

  const getData = async () => {
    data = await $axios({ url: "/one/data" });
    console.log("data", data);
  };

  onMounted(() => {
    getData();
  });

  return {
    getData
  };
},

这样，在页面中就可以通过`$axios`来进行axios的请求。

方法三：使用拦截器
如果需要添加拦截器，可以在axios.js中进行配置。首先，创建一个axios实例，并进行相关的配置：

import axios from "axios";

const initAxios = axios.create({
  timeout: 1800000 //设置数据响应过期时间
});

// 请求拦截器
initAxios.interceptors.request.use(
  (config) => {
    // 在发送之前做点什么
    return config;
  },
  (error) => {
    // 对请求错误做点什么
    return error;
  }
);

// 响应拦截器
initAxios.interceptors.response.use(
  (response) => {
    if (response.resultCode === 200) {
      return response.data;
    } else {
      return { resultCode: -1 };
    }
  }
);

export default () => initAxios;

然后，在需要使用axios的地方引入该配置文件，并调用函数获取配置好的axios实例：

import initAxios from "./axios";

const axiosInstance = initAxios();

现在，你可以使用`axiosInstance`进行axios的请求，并且拦截器已经生效。

以上是一些常用的Vue3配置axios的方法，你可以根据具体情况选择适合你的方式进行配置。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [Vue3中全局配置 axios 的两种方式](https://blog.csdn.net/weixin_56650035/article/details/125610295)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"]
- *3* [Vue3使用axios的配置教程详解](https://blog.csdn.net/qq_38682174/article/details/125416084)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]