Bokey的Axios封装【 Bokey Space 】

欢迎来到Bokey的空间🌼

加载中...

环境配置🔧

首先必不可少的，需要有对应的开发、测试、生产环境，隔离各个环境使用的配置，方便我们后期调试和开发👍

举个栗子：
在开发时，需要调用192.192.1.0这个服务器的接口，图片存储在OSS阿里云对象存储的/dev文件夹下
在测试时，需要调用199.166.5.4这个服务器的接口，图片存储在OSS阿里云对象存储的/test文件夹下
在生产时，需要调用155.155.14.2这个服务器的接口，图片存储在OSS阿里云对象存储的/pro文件夹下

我们环境配置就是为了实现在跑项目or打包项目的时候，可以实现一个命令告诉项目，使用哪个环境配置

第一步，创建各个环境的.env文件

注意是在和package.json同个目录下创建👀

每个配置文件里写入不同的配置内容，我一般还喜欢把一些全局变量写在.env里：
.env.dev文件：

env 复制代码

NODE_ENV = 'dev'
# 该环境的全局变量
VUE_APP_BASE_URL = http://localhost:3030
VUE_APP_OSS_IMAGE_BASE_URL = https://oss-name.oss-cn-shenzhen.aliyuncs.com
VUE_APP_OSS_BASE_DIR = /oss-test-dir

.env.beta文件：

env 复制代码

NODE_ENV = 'beta'
# 该环境的全局变量
VUE_APP_BASE_URL = http://xxx.xxx.xxx.xxx:8080
VUE_APP_OSS_IMAGE_BASE_URL = https://oss-name-beta.oss-cn-shenzhen.aliyuncs.com
VUE_APP_OSS_BASE_DIR = /oss-beta-dir

.env.pro文件：

env 复制代码

NODE_ENV = 'pro'
# 该环境的全局变量
VUE_APP_BASE_URL = http://xxx.xxx.xxx.xxx:8000
VUE_APP_OSS_IMAGE_BASE_URL = https://oss-name-pro.oss-cn-shenzhen.aliyuncs.com
VUE_APP_OSS_BASE_DIR = /oss-ori-dir

注意❗
除了 NODE_ENV 变量，其他全局变量必须使用 VUE_APP 开头！

在package.json中配置对应的script命令来加载不同环境

package.json：

JSON 复制代码

{
  "scripts": {
    "serve:dev": "vue-cli-service serve --mode dev --port 8080",
    "serve:beta": "vue-cli-service serve --mode beta --port 8501",
    "serve:pro": "vue-cli-service serve --mode pro --port 8001",
    "build": "vue-cli-service build",
    "build:beta": "vue-cli-service build --mode beta",
    "build:pro": "vue-cli-service build --mode pro",
    "lint": "vue-cli-service lint"
  },
}

在package.json的scripts中配置对应的启动环境，其中

--mode代表使用的开发环境，dev就会加载.env.dev、pro就会加载.env.pro
--port显而易见，就是指定运行端口

在项目的main.js中应用全局变量🎯
mian.js文件：

JavaScript 复制代码

import { createApp } from "vue";
// 引入接口
import api from "./api/api.js";
// 这里可能引入其他的库(省略)...
const app = createApp(App);
app.config.globalProperties.GLOBAL = process.env; // 引入全局环境变量
app.config.globalProperties.$api = api; // 引入axios全局变量(这里需要之后才加)
app.mount("#app");
// app.use(router).use(ant).use(store).use(JsonEditorVue).mount("#app"); // 我一般用的vue插件库🙂

这样，我们就完成了基础的环境配置啦🥳

Axios的封装

对Axios的封装主要是将所有对api的封装放到文件夹src/api里，目录如下：

api.js - 使用req.js的封装，将后端接口统一到该文件中

http.js - 对axios库进行全局的封装

req.js - 使用http.js的封装，对GET/POST/PUT/DELETE等请求方法进行封装

我的使用方法里还使用了一些其他的库，来帮助我封装：

qs - 对请求参数进行处理
js-cookie - 方便我的cookie操作
axios - 这个当然必不可少啦

在使用之前记得先下包哦✨

那下面就是各个文件的内容：

http.js：

JavaScript 复制代码

//导入axios
import axios from "axios";
import Cookies from "js-cookie";
import router from "@/router/index";

// --aixos默认设置--
axios.defaults.timeout = 5 * 60 * 1000; // 5 分钟
axios.defaults.headers.post["Content-Type"] = "application/json";
axios.defaults.baseURL = process.env.VUE_APP_BASE_URL; // 设置默认的请求地址

// --请求拦截器--
// 添加Authorization请求头，用于权限处理
axios.interceptors.request.use(
  (config) => {
    // 添加请求头等前置处理
    config.headers["Authorization"] = "Bearer" + " " + Cookies.get("token");
    return config;
  },
  (error) => {
    // 请求错误处理
    console.log("Request Error:", error);
    return Promise.reject(error);
  }
);

// --响应拦截器--
axios.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response) {
      // 检查是否是 token 过期的错误
      if (error.response.status === 401) {
        // 清除信息
        const allCookies = Cookies.get();
        for (const cookieName in allCookies) {
          if (Object.prototype.hasOwnProperty.call(allCookies, cookieName)) {
            Cookies.remove(cookieName);
          }
        }
        // 登录过期提示(省略)...
        router.push("/login"); // 返回登录页
      }
    }
    return Promise.reject(error);
  }
);

// //导出我们建立的axios实例模块
export default axios;

req.js：

JavaScript 复制代码

import axios from "./http";
import QS from "qs"; // 导入qs库来对请求参数进行处理

export default {
  // get方法 ?分割地址和参数方式传参 eg：www.baidu.com?id=1&name=2
  get: (url, params = {}) => {
    return new Promise((resolve, reject) => {
      axios
        .get(url + "?" + QS.stringify(params))
        .then((res) => {
          resolve(res.data);
        })
        .catch((err) => {
          reject(err);
        });
    });
  },
  // get方法 参数放在地址中方式传参 eg：www.baidu.com/1/2?id=3
  getParamsIn: (url, params = [],query = {}) => {
    return new Promise((resolve, reject) => {
      let paramsStr = "";
      params.forEach((value) => {
        paramsStr += "/" + value;
      });
      axios
        .get(url + paramsStr+ "?" + QS.stringify(query))
        .then((res) => {
          resolve(res.data);
        })
        .catch((err) => {
          reject(err);
        });
    });
  },
  // post方法
  post: (url, data = {}, headers) => {
    return new Promise((resolve, reject) => {
      axios
        .post(url, data, headers)
        .then((res) => {
          resolve(res.data);
        })
        .catch((err) => {
          reject(err);
        });
    });
  },
  // put方法
  put: (url, data = {}) => {
    return new Promise((resolve, reject) => {
      axios
        .put(url, data)
        .then((res) => {
          resolve(res.data);
        })
        .catch((err) => {
          reject(err);
        });
    });
  },
  // delete方法 ?分割地址和参数方式传参
  delete: (url, params = {}) => {
    return new Promise((resolve, reject) => {
      axios
        .delete(url + "?" + QS.stringify(params))
        .then((res) => {
          resolve(res.data);
        })
        .catch((err) => {
          reject(err);
        });
    });
  },
  // delete方法 参数放在地址中方式传参
  deleteParamsIn: (url, params = []) => {
    return new Promise((resolve, reject) => {
      let paramsStr = "";
      params.forEach((value) => {
        paramsStr += "/" + value;
      });
      axios
        .delete(url + paramsStr)
        .then((res) => {
          resolve(res.data);
        })
        .catch((err) => {
          reject(err);
        });
    });
  },
};

api.js：

JavaScript 复制代码

import req from "./req.js";

export default {
  // 这里放所有需要用到的api请求，例如下面：
  getSomeThing() {
    return req.get("/SomeThing/Eg")
  },
  geSomeThingParamsIn(data) {
    return req.getParamsIn("/SomeThingParamsIn/Eg", data);
  },
  postSomeThing(data) {
    return req.post("/PostSomeThing/Eg", data);
  },
  deleteOne(data) {
    return req.delete("/deleteOne/Eg", data);
  },
}

那么这样就完成了axios的封装啦✅，上面是我的封装方法，可能会比较粗略，但涵盖了大部分的情况😁

Bokey的Axios封装

发布于
2025-05-06
更新于
2025-10-10
类目
作者
Bokey
版权协议

BOKEY'S SPASE

BOKEY'S SPASE

Bokey的Axios封装

在日常开发中，Axios是我经常使用在Vue项目里的请求库，这篇文章介绍我对他进行的封装，开箱即用

环境配置🔧

Axios的封装