封装axios

Brilliant Nemo

于 2025-07-10 16:59:20 发布

阅读量369

点赞数 4

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/lzping_719/article/details/149254121

vue 专栏收录该内容

32 篇文章

订阅专栏

封装axios

网络请求的状态码

封装一个方法用于获取常见状态码对应的中文信息，将他放置在 /src/utils//status.ts:

export const getMessageInfo = (status: number | string): string => {
  let msg = "";
  switch (status) {
    case 400:
      msg = "请求错误(400)";
      break;
    case 403:
      msg = "拒绝访问(403)";
      break;
    case 401:
      msg = "未授权(401)";
      break;
    case 500:
      msg = "服务器错误(500)";
      break;
    case 503:
      msg = "服务不可用(503)";
      break;
    default:
      msg = `连接出错(${status})!`;
  }
  return msg;
};

然后我们在响应拦截器对响应码进行判断提示，如果不是成功响应发出提示给用户，这里直接使用ElementPlus的Message组件，大家可以根据习惯选择其他方式。
/src/utils/request.ts

import { getMessageInfo } from './status';
import { ElMessage } from 'element-plus';

// ...

// axios响应拦截
// 给予用户友好提示
service.interceptors.response.use(
  (response: AxiosResponse) => {
    if (response.status === 200) {
      return response;
    }
    ElMessage({
      message: getMessageInfo(response.status),
      type: 'error',
    });
    return response;
  },
  // 请求失败
  (error: any) => {
    const { response } = error;
    if (response) {
      // 请求已发出，但是不在2xx的范围
      ElMessage({
        message: getMessageInfo(response.status),
        type: 'error',
      });
      return Promise.reject(response.data);
    }
    ElMessage({
      message: '网络异常,请稍后再试!',
      type: 'error',
    });
  }
);

接口管理

在我们成功将axios进项目之后，总是在组件中直接单独引用axios再进行配置请求是十分不方便的，对于一个接口我们可能会有多个组件会用到。

接口一般会有一层最外围的规范，
下面以一个最简单的为例：

参数	类型	说明	备注
code	Number \| String	结果码	成功=1失败=-1未登录=401无权限=403
message	String	显示信息	给予用户的提示信息
data	Object	数据	JSON 格式

所有接口均会按照这样的格式返回，那么我们可以使用TS设计一个类型，便于我们获得类型提示与校验。
我们将他放置在 /src/utils/types.ts 下，并且可以传入一个泛型进行 data 数据格式的类型校验。

export interface BaseResponse<T = any> {
  code: number | string;
  message: string;
  data: T;
}

这样我们就可以对第一层响应进行特殊处理，如果code不为1则说明发生错误，直接给予用户提示。
/src/utils/request.ts

// BaseResponse 为 res.data 的类型
// T 为 res.data.data 的类型 不同的接口会返回不同的 data 所以我们加一个泛型表示
// 此处相当于二次响应拦截
// 为响应数据进行定制化处理
const requestInstance = <T = any>(config: AxiosRequestConfig): Promise<T> => {
  const conf = config;
  return new Promise((resolve, reject) => {
    service
      .request<any, AxiosResponse<BaseResponse>>(conf)
      .then((res: AxiosResponse<BaseResponse>) => {
        const data = res.data;
        // 如果data.code为错误代码返回message信息
        if (data.code != 1) {
          ElMessage({
            message: data.message,
            type: 'error',
          });
          reject(data.message);
        } else {
          ElMessage({
            message: data.message,
            type: 'success',
          });
          // 此处返回data信息 也就是 api 中配置好的 Response类型
          resolve(data.data as T);
        }
      });
  });
};

请求方式有多种，POST、GET、PUT、DELETE等等，为了简化axios配置项的使用，我们可以对不同的请求方式进行封装。
为了获得TS的类型校验与提示，我们传入两个泛型，一个代表请求参数类型，一个代表返回的data类型。
/src/utils/http/index.ts

// 在最后使用封装过的axios导出不同的请求方式
export function get<T = any, U = any>(
  config: AxiosRequestConfig,
  url: string,
  parms?: U
): Promise<T> {
  return requestInstance({ ...config, url, method: 'GET', params: parms });
}

export function post<T = any, U = any>(
  config: AxiosRequestConfig,
  url: string,
  data: U
): Promise<T> {
  return requestInstance({ ...config, url, method: 'POST', data: data });
}

接口分类

最基础的接口封装完毕了，接下来我们要使用这些接口。就需要将这些接口分类管理，负责用户信息管理的接口放在一起，负责权限管理的接口放在一起等等。
我们在/src/api下建立不同的文件夹代表不同类型的API，在index.ts中编写接口配置，在types.ts中编写接口所需的请求参数类型以及响应类型。
/src/api/user/types.ts

// 登录所需的参数
export type LoginRequest = {
  username: string;
  password: string;
};

// 刷新登录信息需要的参数
export type reLoginRequest = {
  accessToken: string;
};

// 登录后返回的响应信息
export type LoginResponse = {
  username: string;
  roles: Array<string>;
  accessToken: string;
};

然后我们就可以对此类型不同的接口进行封装，之后在组件中或者再次封装在Store中使用即可。
/src/api/user/index.ts

import { post } from '@/utils/request';
// 导入类型
import { LoginRequest, LoginResponse, reLoginRequest } from '@/api/user/types';

// post 请求直接传入一个 data 即可 url 我们直接在此处封装好
// 需要更改时也只需在此处更改
export const userLogin = async (data?: LoginRequest) => {
  return post<LoginResponse>({}, '/login', data);
};

export const refreshUserInfo = async (data?: reLoginRequest) => {
  return post<LoginResponse>({}, '/getUserInfo', data);
};

使用的时候我们可以直接在组件中引用，也可将其封装在store的action中，将相关的store与接口关联起来

封装router

router在使用过程中如果我们直接在一个文件的一个数组中配置，最后路由越来越多会导致不易管理，我们可以将一个页面的路由配置在一个数组中最后统一导入，这样就会方便很多。
我们将不同页面的路由放置在/src/router/modules/login.ts

import { RouteRecordRaw } from 'vue-router';

export default {
  path: '/login',
  name: 'LoginPage',
  component: () => import('@/views/login/index.vue'),
  meta: {
    role: ['common', 'admin'],
  },
  children: [],
} as RouteRecordRaw;

然后我们在/src/router/index.ts导入这个路由

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
import { ElMessage } from 'element-plus';

// import.meta.glob 为 vite 提供的特殊导入方式
// 它可以将模块中全部内容导入并返回一个Record对象
// 默认为懒加载模式 加入配置项 eager 取消懒加载
const modules: Record<string, any> = import.meta.glob(['./modules/*.ts'], {
  eager: true,
});
const routes: Array<RouteRecordRaw> = [];

// 将路由全部导入数组
Object.keys(modules).forEach((key) => {
  routes.push(modules[key].default);
});

//导入生成的路由数据
const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

router.beforeEach(async (_to, _from, next) => {
  next()
});

router.afterEach((_to) => {
  NProgress.done();
});

export default router;

这样我们就可以在module中直接创建路由，无需再次在index.ts中手动引入了。

封装store

同axios与touter一样，也拥有许多同类别的store数据，我们将他们放置在一个模块中便于调用，例如 user 模块专门用于保存与用户相关的信息与方法。
/src/store/index.ts

这里用于导出需要使用的pinia并使用持久化插件

import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);
export default pinia;

/src/store/user/types.ts

以 user 为例
这里用于定义stroe中state数据的类型

export interface UserState {
  username: string;
  accessToken: string;
  refreshToken: string;
  roles: Array<string>;
}

/src/store/user/index.ts

定义store模块的主要内容，state、getter、actions
state用于报错与用户相关的数据
getter保存需要二次处理的数据
action封装一些与user模块相关的方法，我们刚刚封装过的api如果需要直接改变用户数据直接在action中调用即可

import { defineStore } from 'pinia';
import { UserState } from './types';
import pinia from '@/store';
import { refreshUserInfo, userLogin } from '@/api/user';
import router from '@/router';

export const useUserStoreHook = defineStore(
  // 唯一ID
  'User',
  {
    state: () => ({
      username: '大伟',
      accessToken: '',
      roles: ['common'],
    }),
    getters: {},
    actions: {
      // 用于更新store数据
      // UserState为定义好的state类型
      updateInfo(partial: Partial<UserState>) {
        this.$patch(partial);
      },
      // 用户登录
      storeUserLogin(data) {
        return userLogin(data).then((res) => {
          this.username = res.username;
          this.roles = res.roles;
          this.accessToken = res.accessToken;
          return res;
        });
      },
      // 刷新用户信息
      refreshUserInfo() {
        if (this.username == '大伟' && this.accessToken != '') {
          refreshUserInfo({
            accessToken: this.accessToken,
          })
            .then((res) => {
              this.username = res.username;
              this.roles = res.roles;
              this.accessToken = res.accessToken;
            })
            .catch(() => {
              this.accessToken = '';
            });
        }
      },
    },
    // 持久化保存 accessToken
    persist: {
      key: 'userInfo',
      storage: sessionStorage,
      paths: ['accessToken'],
    },
  }
);

// 导出该Store
export function useUserStore() {
  return useUserStoreHook(pinia);
}

使用的时候我们直接在需要使用store数据的组件中引用并使用即可

<script lang='ts' setup>
  import { useUserStore } from '@/store/modules/user'
  userStore = useUserStore()
</script>