实现vue3 axios配置多个地址

概述

在实际开发中，有时候我们需要配置多个不同的后端接口地址，为了更好地管理和维护这些地址，我们可以通过axios拦截器来实现。在本文中，我将向你展示如何在Vue3项目中配置多个后端接口地址。

步骤

步骤 操作
1 创建axios实例
2 添加请求拦截器
3 添加响应拦截器

详细步骤

步骤一：创建axios实例

首先，在src目录下新建一个api文件夹，在该文件夹下创建一个index.js文件，用于统一管理接口地址和axios实例。

// api/index.js

import axios from 'axios';

const instance = axios.create({
  baseURL: ' // 默认接口地址
  timeout: 5000 // 请求超时时间
});

export default instance;

步骤二：添加请求拦截器

在index.js文件中添加请求拦截器，用于动态设置接口地址。

// api/index.js

instance.interceptors.request.use(
  config => {
    // 可在这里动态设置请求头或其他配置
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

步骤三：添加响应拦截器

在index.js文件中添加响应拦截器，处理返回的数据。

// api/index.js

instance.interceptors.response.use(
  response => {
    // 可在这里处理返回的数据
    return response.data;
  },
  error => {
    return Promise.reject(error);
  }
);

export default instance;

类图

classDiagram
    class axiosInstance {
        - baseURL: string
        - timeout: number
        + interceptors: Object
        + request(config: Object): Promise
        + response(response: Object): Promise
    }

通过以上步骤，你已经成功实现了在Vue3项目中配置多个后端接口地址的功能。希望这篇文章能帮助到你，加油！