拿来即用,自己封装的 axios

这篇具有很好参考价值的文章主要介绍了拿来即用,自己封装的 axios。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、需求

在日常开发中,我们会经常用到 axios ,那么如何在自己的项目中自己封装 axios

二、分析

1. 安装axios

npm install axios

2. 新建一个 ts 文件,封装 axios

手写一个TS文件: src\utils\request.ts,我的习惯把它放在 utils 目录下,源码如下

import axios, { InternalAxiosRequestConfig, AxiosResponse } from "axios";
import { useUserStoreHook } from "@/store/modules/user";

// 创建 axios 实例
const service = axios.create({
  baseURL: import.meta.env.VITE_APP_BASE_API,
  timeout: 50000,
  headers: { "Content-Type": "application/json;charset=utf-8" },
});

// 请求拦截器
service.interceptors.request.use(
  (config: InternalAxiosRequestConfig) => {
    const userStore = useUserStoreHook();
    if (userStore.token) {
      config.headers.Authorization = userStore.token;
    }
    return config;
  },
  (error: any) => {
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  (response: AxiosResponse) => {
    const { code, msg } = response.data;
    if (code === "00000") {
      return response.data;
    }
    // 响应数据为二进制流处理(Excel导出)
    if (response.data instanceof ArrayBuffer) {
      return response;
    }

    ElMessage.error(msg || "系统出错");
    return Promise.reject(new Error(msg || "Error"));
  },
  (error: any) => {
    if (error.response.data) {
      const { code, msg } = error.response.data;
      // token 过期,重新登录
      if (code === "A0230") {
        ElMessageBox.confirm("当前页面已失效,请重新登录", "提示", {
          confirmButtonText: "确定",
          type: "warning",
        }).then(() => {
          localStorage.clear();
          window.location.href = "/";
        });
      } else {
        ElMessage.error(msg || "系统出错");
      }
    }
    return Promise.reject(error.message);
  }
);

// 导出 axios 实例
export default service;

3. store 存放 token 信息

我的 store 中存放了用户的登录信息,在封装 axios 时只用到了 token,因此下方代码可做参考文章来源地址https://www.toymoban.com/news/detail-654482.html

import { defineStore } from "pinia";

import { loginApi, logoutApi } from "@/api/auth";
import { getUserInfo } from "@/api/user";
import { resetRouter } from "@/router";
import { store } from "@/store";

import { LoginData } from "@/api/auth/types";
import { UserInfo } from "@/api/user/types";

import { useStorage } from "@vueuse/core";

export const useUserStore = defineStore("user", () => {
  // state
  const userId = ref();
  const token = useStorage("accessToken", "");
  const nickname = ref("");
  const avatar = ref("");
  const roles = ref<Array<string>>([]); // 用户角色编码集合 → 判断路由权限
  const perms = ref<Array<string>>([]); // 用户权限编码集合 → 判断按钮权限

  /**
   * 登录调用
   *
   * @param {LoginData}
   * @returns
   */
  function login(loginData: LoginData) {
    return new Promise<void>((resolve, reject) => {
      loginApi(loginData)
        .then((response) => {
          const { tokenType, accessToken } = response.data;
          token.value = tokenType + " " + accessToken; // Bearer eyJhbGciOiJIUzI1NiJ9.xxx.xxx
          resolve();
        })
        .catch((error) => {
          reject(error);
        });
    });
  }

  // 获取信息(用户昵称、头像、角色集合、权限集合)
  function getInfo() {
    return new Promise<UserInfo>((resolve, reject) => {
      getUserInfo()
        .then(({ data }) => {
          if (!data) {
            return reject("Verification failed, please Login again.");
          }
          if (!data.roles || data.roles.length <= 0) {
            reject("getUserInfo: roles must be a non-null array!");
          }
          userId.value = data.userId;
          nickname.value = data.nickname;
          avatar.value = data.avatar;
          roles.value = data.roles;
          perms.value = data.perms;
          resolve(data);
        })
        .catch((error) => {
          reject(error);
        });
    });
  }

  // 注销
  function logout() {
    return new Promise<void>((resolve, reject) => {
      logoutApi()
        .then(() => {
          resetRouter();
          resetToken();
          location.reload(); // 清空路由
          resolve();
        })
        .catch((error) => {
          reject(error);
        });
    });
  }

  // 重置
  function resetToken() {
    token.value = "";
    nickname.value = "";
    avatar.value = "";
    roles.value = [];
    perms.value = [];
  }
  return {
    token,
    nickname,
    avatar,
    roles,
    perms,
    login,
    getInfo,
    logout,
    resetToken,
    /**
     * 当前登录用户ID
     */
    userId,
  };
});

// 非setup
export function useUserStoreHook() {
  return useUserStore(store);
}

4. 使用

import request from "@/utils/request";
import { AxiosPromise } from "axios";
import { UserForm, UserInfo, UserQuery } from "./types";

/**
 * 登录成功后获取用户信息(昵称、头像、权限集合和角色集合)
 */
export function getUserInfo(): AxiosPromise<UserInfo> {
  return request({
    url: "/api/v1/users/me",
    method: "get",
  });
}

/**
 * 添加用户
 *
 * @param data
 */
export function addUser(data: any) {
  return request({
    url: "/api/v1/users",
    method: "post",
    data: data,
  });
}
/**
 * 修改用户
 *
 * @param id
 * @param data
 */
export function updateUser(id: number, data: UserForm) {
  return request({
    url: "/api/v1/users/" + id,
    method: "put",
    data: data,
  });
}
/**
 * 修改用户状态
 *
 * @param id
 * @param status
 */
export function updateUserStatus(id: number, status: number) {
  return request({
    url: "/api/v1/users/" + id + "/status",
    method: "patch",
    params: { status: status },
  });
}
/**
 * 删除用户
 *
 * @param ids
 */
export function deleteUsers(ids: string) {
  return request({
    url: "/api/v1/users/" + ids,
    method: "delete",
  });
}
/**
 * 下载用户导入模板
 *
 * @returns
 */
export function downloadTemplateApi() {
  return request({
    url: "/api/v1/users/template",
    method: "get",
    responseType: "arraybuffer",
  });
}

/**
 * 导出用户
 *
 * @param queryParams
 * @returns
 */
export function exportUser(queryParams: UserQuery) {
  return request({
    url: "/api/v1/users/_export",
    method: "get",
    params: queryParams,
    responseType: "arraybuffer",
  });
}

/**
 * 导入用户
 *
 * @param file
 */
export function importUser(deptId: number, file: File) {
  const formData = new FormData();
  formData.append("file", file);
  return request({
    url: "/api/v1/users/_import",
    method: "post",
    params: { deptId: deptId },
    data: formData,
    headers: {
      "Content-Type": "multipart/form-data",
    },
  });
}

5. 文件 type.js

/**
 * 用户查询对象类型
 */
export interface UserQuery {
  keywords?: string;
  status?: number;
  deptId?: number;
}

/**
 * 登录用户信息
 */
export interface UserInfo {
  userId: number;
  nickname: string;
  avatar: string;
  roles: string[];
  perms: string[];
}

/**
 * 用户表单类型
 */
export interface UserForm {
  /**
   * 用户头像
   */
  avatar?: string;
  /**
   * 部门ID
   */
  deptId?: number;
  /**
   * 邮箱
   */
  email?: string;
  /**
   * 性别
   */
  gender?: number;
  /**
   * 用户ID
   */
  id?: number;
  mobile?: string;
  /**
   * 昵称
   */
  nickname?: string;
  /**
   * 角色ID集合
   */
  roleIds?: number[];
  /**
   * 用户状态(1:正常;0:禁用)
   */
  status?: number;
  /**
   * 用户名
   */
  username?: string;
}

到了这里,关于拿来即用,自己封装的 axios的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 拿来即用修改密码功能

    2024年02月10日
    浏览(34)
  • 【MySQL】拿来即用 —— MySQL中的数据类型

    个人简介:Java领域新星创作者;阿里云技术博主、星级博主、专家博主;正在Java学习的路上摸爬滚打,记录学习的过程~ 个人主页:.29.的博客 学习社区:进去逛一逛~ 类型 类型举例 位类型 BIT 集合类型 SET 枚举类型 ENUM 定点数类型 DECIMAL 浮点类型 FLOAT、DOUBLE 日期时间类型

    2024年02月11日
    浏览(30)
  • html之实现生日快乐的效果(拿来即用)

    先看效果( 实际上是动画,我截的屏所以是图片 ): 直接上代码: 注意,我用的外联方式导入的css(在第十行),你可以看自己情况直接在一个页面内容上也是可以的。 CSS代码

    2024年02月16日
    浏览(42)
  • SpringBoot最简单好用的导出导入功能,拿来即用

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 提示:粘贴即可用 SpringBoot 项目整合的导入导出接口。 项目pom.xml 文件添加依赖,编写封装类即可。依赖、导入导出的封装类以及使用方法,以下文章都会一一列举,十分方便,已经经过测试,复制粘贴

    2024年02月05日
    浏览(65)
  • VUE 常用炫酷动画库(拿来即用系列)

    目录  打字机效果Vue动画库  代码示例 效果 炫酷背景动画库 代码示例  效果 npm install vue-typical  npm install particles-bg-vue  type:ball type: cobweb type:color type: fountain  type:custom  type:random 随机一个以上的动画

    2024年02月08日
    浏览(54)
  • 拿来即用的企业级安全运维体系搭建指南

    **作者介绍****林伟壕,**SecDevOpsor,先后在中国电信和网易游戏从事数据网络、网络安全和游戏运维工作。对Linux运维、虚拟化和网络安全防护等研究颇多,目前专注于网络安全自动化检测、防御系统构建。 在上篇《99%的人会中招的运维安全陋习,请规避!》中,我们花了很大

    2024年02月03日
    浏览(52)
  • 自己动手封装axios通用方法并上传至私有npm仓库:详细步骤与实现指南

    一、构建方法 确定工具库的需求和功能:在开始构建工具库之前,你需要明确你的工具库需要包含哪些方法及工具,以及这些工具或方法应该具备哪些功能。这有助于你更好地规划你的开发工作。 编写工具代码:使用你熟悉的前端框架(如React、Vue等)编写工具代码。确保你

    2024年04月14日
    浏览(44)
  • 前端进阶:Axios request 封装深入教程

    国企offer求比较 国企offer求比较 互联网VS国企央企,形势似乎又有新变化 腾讯网易米哈游,各游戏厂面试真题大公开 12月校招补录开启,职能大类岗位12.29已更新 12月校招补录开启,软开、IT信息大类岗位12.29已更新 中证登/中国结算深分体检后续 寒假别摆了,求个小老师。

    2024年02月20日
    浏览(54)
  • 全站最简单 “数据滚动可视化大屏” 【JS基础拿来即用】

      源码获取方式: 数据滚动大屏源码,原生js实现超级简单-Javascript文档类资源-CSDN下载 原生js实现的数据滚动大屏案例,实现应该是全网最简单的,拿来直接使用即可,没有会员的小伙伴去我文章主更多下载资源、学习资料请访问CSDN下载频道. https://download.csdn.net/download/wei

    2024年01月18日
    浏览(51)
  • 前端(二十七)——封装指南:Axios接口、常用功能、Vue和React中的封装技术

    😊博主:小猫娃来啦 😊文章核心: 前端封装指南:Axios接口、常用功能、Vue和React中的封装技术 在我们前端开发当中,封装是种将代码和功能组织起来以便重复使用的方式。它可以使开发人员更高效地编写、维护和管理代码。本文将探讨前端封装的定义、重要性以及在Web开

    2024年02月05日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包