AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

vue3、ts如何封装 axios,使用mock.js

2023-01-05 590
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： vue3、ts如何封装 axios,使用mock.js

一、axios 的依赖安装与处理

 1. 依赖安装

       使用异步网络请求肯定离不开loading、message 等提示，今天我们配合 elementPlus 一起使用；

// 安装axios 
npm install axios --save
// 安装 elementPlus
npm install element-plus --save

 2. 全局 axios 封装

src 目录下 utils 目录下，新建 request.ts，因为使用的是TS，需要提前定义数据格式：


定义请求数据返回的格式，需要提前确认好

定义 axios 基础配置信息

请求拦截器：所有请求最先到达的地方，我们可以在此自定义请求头信息（比如：token、多语言等等）

响应拦截器：返回数据最先到达的地方，我们可以在此处理异常信息（比如：code为401重定向至登录、code为500提示错误信息）

import axios, { AxiosInstance, AxiosError, AxiosRequestConfig, AxiosResponse } from "axios";
import { ElMessage, ElLoading, ElMessageBox } from "element-plus";
// response interface { code, msg, success }
// 不含 data
interface Result {
    code: number,
    success: boolean,
    msg: string
}
// request interface，包含 data
interface ResultData<T = any> extends Result {
    data?: T
}
enum RequestEnums {
    TIMEOUT = 10000, // 请求超时 request timeout
    FAIL = 500, // 服务器异常 server error
    LOGINTIMEOUT = 401, // 登录超时 login timeout
    SUCCESS = 200, // 请求成功 request successfully
}
// axios 基础配置
const config = {
    // 默认地址，可以使用 process Node内置的，项目根目录下新建 .env.development
    baseURL: process.env.VUE_APP_BASE_API as string,
    timeout: RequestEnums.TIMEOUT as number, // 请求超时时间
    withCredentials: true, // 跨越的时候允许携带凭证
}
class Request {
    service: AxiosInstance;
    constructor(config: AxiosRequestConfig) {
        // 实例化 serice
        this.service = axios.create(config);
        /**
         * 请求拦截器
         * request -> { 请求拦截器 } -> server
         */
        this.service.interceptors.request.use(
            (config: AxiosRequestConfig) => {
                const token = localStorage.getItem('token') ?? '';
                return {
                    ...config,
                    headers: {
                        'customToken': "customBearer " + token
                    }
                }
            },
            (error: AxiosError) => {
                // 请求报错
                Promise.reject(error)
            }
        );
        /**
         * 响应拦截器
         * response -> { 响应拦截器 } -> client
         */
        this.service.interceptors.response.use(
            (response: AxiosResponse) => {
                const { data, config } = response;
                if (data.code === RequestEnums.LOGINTIMEOUT) {
                    // 表示登录过期，需要重定向至登录页面
                    ElMessageBox.alert("Session expired", "System info", {
                        confirmButtonText: 'Relogin',
                        type: 'warning'
                    }).then(() => {
                        // 或者调用 logout 方法去处理
                        localStorage.setItem('token', '');
                        location.href = '/'
                    })
                }
                if (data.code && data.code !== RequestEnums.SUCCESS) {
                    ElMessage.error(data);
                    return Promise.reject(data);
                }
                return data
            },
            (error: AxiosError) => {
                const { response } = error;
                if (response) {
                    this.handleCode(response.status);
                }
                if (!window.navigator.onLine) {
                    ElMessage.error("网络连接失败，请检查网络");
                    // 可以重定向至404页面
                }
            }
        )
    }
    public handleCode = (code: number): void => {
        switch (code) {
            case 401:
                ElMessage.error("登陆失败，请重新登录");
                break;
            case 500:
                ElMessage.error("请求异常，请联系管理员");
                break;
            default:
                ElMessage.error('请求失败');
                break;
        }
    }
    // 通用方法封装
    get<T>(url: string, params?: object): Promise<ResultData<T>> {
        return this.service.get(url, { params });
    }
    post<T>(url: string, params?: object): Promise<ResultData<T>> {
        return this.service.post(url, params);
    }
    put<T>(url: string, params?: object): Promise<ResultData<T>> {
        return this.service.put(url, params);
    }
    delete<T>(url: string, params?: object): Promise<ResultData<T>> {
        return this.service.delete(url, { params });
    }
}
export default new Request(config)

 3. 实际使用

src 目录下新增 api/index.ts

  1. 定义请求的参数类型
  2. 定义响应想具体参数类型

这里我们使用到ts 中的 namespace ，实际开发中我们很多 api 可能会出现相同名字不同含义，所以我们使用 namespace 进行定义

import request from "@/utils/request";
namespace User {
    // login
    export interface LoginForm {
        userName: string,
        password: string
    }
}
export namespace System {
    export interface Info {
        path: string,
        routeName: string
    }
    export interface ResponseItem {
        code: number,
        items: Array<Sidebar>,
        success: boolean
    }
    export interface Sidebar {
        id: number,
        hashId: string | number,
        title: string,
        routeName: string,
        children: Array<SidebarItem>,
    }
    export interface SidebarItem {
        id: number,
        parentId: number,
        hashId: string | number,
        title: string,
    }
}
export const info = (params: System.Info) => {
    // response 
    if (!params || !params.path) throw new Error('Params and params in path can not empty!')
    // 这里因为是全局的一个info，根据路由地址去请求侧边栏，所需不用把地址写死
    return request.post<System.Sidebar>(params.path, { routeName: params.routeName })
}

   Vue 文件中调用

<script lang="ts" setup name="Sidebar">
import { ref, reactive, onBeforeMount } from "vue"
import { info } from "@/api"
import { useRoute } from "vue-router"
const route = useRoute();
let loading = ref<boolean>(false);
let sidebar = ref<any>({});
const _fetch = async (): Promise<void> => {
    const routeName = route.name as string;
    const path = '/' + routeName.replace(routeName[0], routeName[0].toLocaleLowerCase()) + 'Info'
    try {
        loading.value = true;
        const res = await info({ path, routeName });
        if (!res || !res.data) return;
        sidebar.value = res.data;
    } finally {
        loading.value = false
    }
}
onBeforeMount(() => {
    _fetch();
})
</script>

二、 mock.js 的依赖安装与处理

 1. 安装依赖

# 安装
npm install mockjs --save

 在 ts 中使用时，我们需要现在 shims-vue.d.ts 文件中去抛出模块，不然会出现引入报错的问题

/* eslint-disable */
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}
declare module 'mockjs';

 2. 新建 mock 所需的文件

20210527153548522.png

index.ts（属于mockjs全局配置文件），mockjs/javaScript/index.ts（具体的数据文件），这两个需要关注，别的不用关注


 1. 新建 mockjs/javaScript/index.ts（具体的数据文件）

  因为我这里的数据主要是 侧边栏的数据，都是固定好的，所以并没有用到 mockjs 的规则生成数据

import { GlobalSidebar, Sidebar } from "../../sidebar";
namespace InfoSidebar {
    export type InfoSidebarParams = {
        body: string,
        type: string,
        url: string
    }
}
const dataSource: Array<GlobalSidebar> = [
    {
        mainTitle: 'JavaScript基础问题梳理',
        mainSidebar: [
            {
                id: 0,
                hashId: 'This',
                title: 'this指向',
                routeName: 'JsBasic',
                children: [
                    {
                        id: 1,
                        parentId: 0,
                        hashId: 'GlobalFunction',
                        title: '全局函数'
                    },
                    {
                        id: 2,
                        parentId: 0,
                        hashId: 'ObjectMethod',
                        title: '对象方法'
                    },
                    {
                        id: 3,
                        parentId: 0,
                        hashId: 'Constructor',
                        title: '构造函数'
                    },
                    {
                        id: 4,
                        parentId: 0,
                        hashId: 'SetTimeout',
                        title: '定时器、回调函数'
                    },
                    {
                        id: 5,
                        parentId: 0,
                        hashId: 'EventFunction',
                        title: '事件函数'
                    },
                    {
                        id: 6,
                        parentId: 0,
                        hashId: 'ArrowFunction',
                        title: '箭头函数'
                    },
                    {
                        id: 7,
                        parentId: 0,
                        hashId: 'CallApplyBind',
                        title: 'call、apply、bind'
                    },
                ]
            },
            {
                id: 2,
                hashId: 'DeepClone',
                title: '深拷贝和浅拷贝',
                routeName: 'JsBasic',
                children: []
            }
        ]
    },
];
export default {
    name: 'jsBasicInfo',
    jsBasicInfo(params: InfoSidebar.InfoSidebarParams) {
        const param = JSON.parse(params.body)
        if (!param) throw new Error("Params can not empty!");
        const data = dataSource.find((t: GlobalSidebar) => {
            return t.mainSidebar.filter((x: Sidebar) => {
                return x.routeName === param.routeName
            })
        })
        return {
            data,
            success: true,
            code: 200
        }
    }
}

 Sidebar.ts

/**
 * @param { number } id Unique value
 * @param { string } hashId href Unique value
 * @param { string } title show current title
 * @param { string } routeName page find data
 */
interface GlobalSidebar {
    mainTitle: string,
    mainSidebar: Array<Sidebar>
}
interface Sidebar {
    id: number,
    hashId: string | number,
    title: string,
    routeName: string,
    children: Array<SidebarItem>,
}
interface SidebarItem {
    id: number,
    parentId: number,
    hashId: string | number,
    title: string,
}
export {
    GlobalSidebar,
    Sidebar,
    SidebarItem
}

 2. 新建 mockjs/index.ts 

import Mock from "mockjs";
import jsBasicInfo from "./tpl/javaScript/index";
const requestMethod = 'post';
const BASE_URL = process.env.VUE_APP_BASE_API;
const mocks = [jsBasicInfo];
for (let i of mocks) {
    Mock.mock(BASE_URL + '/' + i.name, requestMethod, i.jsBasicInfo);
}
export default Mock

 3. main.ts 引入

import { createApp } from 'vue'
import App from './App.vue'
if(process.env.NODE_ENV == 'development'){
    require('./mockjs/index')
}
const app = createApp(App);
app.mount('#app');

三、结合使用

  实际上就是刚刚调用axios 的那一段代码

<script lang="ts" setup name="Sidebar">
import { ref, reactive, onBeforeMount } from "vue"
import { info } from "@/api"
import { useRoute } from "vue-router"
const route = useRoute();
let loading = ref<boolean>(false);
let sidebar = ref<any>({});
const _fetch = async (): Promise<void> => {
    const routeName = route.name as string;
    const path = '/' + routeName.replace(routeName[0], routeName[0].toLocaleLowerCase()) + 'Info'
    try {
        loading.value = true;
        const res = await info({ path, routeName });
        if (!res || !res.data) return;
        sidebar.value = res.data;
    } finally {
        loading.value = false
    }
}
onBeforeMount(() => {
    _fetch();
})
</script>
文章标签：
JavaScript
前端开发
自然语言处理
API
数据格式
关键词：
封装axios
vue axios
axios封装
vue3 ts封装axios
ts封装axios
游客6w5iiviqxobva
目录
相关文章
java冯坚持
|
1月前
|
资源调度 JavaScript 前端开发
vue-element-admin 综合开发四：axios安装和封装、mock安装/学习/使用
这篇文章是关于如何在Vue项目中使用axios进行网络请求、二次封装axios以及使用mockjs模拟响应数据的教程。
java冯坚持
74 1
vue-element-admin 综合开发四：axios安装和封装、mock安装/学习/使用
光明顶阳顶天
|
1月前
|
缓存 JavaScript 搜索推荐
在 Vue 项目中，Axios 的请求拦截器的作用
【10月更文挑战第3天】
光明顶阳顶天
103 61
小王老师呀
|
2天前
|
资源调度 前端开发 JavaScript
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第10天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤，包括安装依赖、创建混淆脚本、修改 `package.json` 脚本命令、构建项目并执行混淆，以及在 HTML 文件中引用混淆后的文件。通过这些步骤，可以有效提高代码的安全性。
小王老师呀
13 2
龙大吉
|
18天前
|
JavaScript 前端开发 持续交付
构建现代Web应用：Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展，Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新，为Web应用的构建提供了更多可能。在本篇文章中，我们将探讨Vue.js和Node.js这两大热门技术如何完美结合，构建现代Web应用。
龙大吉
18 4
想飞的雪糕
|
22天前
|
JavaScript 测试技术 API
跟随通义灵码一步步升级vue2(js)项目到vue3版本
Vue 3 相较于 Vue 2 在性能、特性和开发体验上都有显著提升。本文介绍了如何利用通义灵码逐步将 Vue 2 项目升级到 Vue 3，包括备份项目、了解新特性、选择升级方式、升级依赖、迁移组件和全局 API、调整测试代码等步骤，并提供了注意事项和常见问题的解决方案。
想飞的雪糕
58 4
邹荣乐
|
27天前
|
前端开发 JavaScript 安全
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
邹荣乐
71 4
小王老师呀
|
5天前
|
前端开发 JavaScript 安全
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第7天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤。包括项目准备、安装 `javascript-obfuscator`、配置 Vite 构建以应用混淆，以及最终构建项目进行混淆。通过这些步骤，可以有效提升前端代码的安全性，防止被他人轻易分析和盗用。
小王老师呀
17 0
那年春天
|
1月前
vue3 + Ts 中 使用 class 封装 axios
【10月更文挑战第8天】
那年春天
100 1
mao29955
|
1月前
vue3 + Ts 中 使用 class 封装 axios
【10月更文挑战第5天】
mao29955
121 1
光明顶阳顶天
|
1月前
|
JavaScript UED
在 Vue 项目中使用 Axios 发送请求时如何处理错误？
【10月更文挑战第3天】
光明顶阳顶天
46 2

热门文章

最新文章

  • 1
    vite 如何做到让 vue 本地开发更快速？
  • 2
    Vue 3和Element组件库的分页功能实现
  • 3
    Vue $watch监听对象属性，数组内对象属性改变
  • 4
    Vue打包后页面出现空白解决办法（臻享版）
  • 5
    【ElementUI】Vue+ElementUI多文件上传，一次请求上传多个文件！
  • 6
    自制简单的range（Vue）
  • 7
    vue 里怎么使用 echarts 实现地图自动轮播功能、自定义 tooltip 悬浮位置提示、自定义 label 标签位置样式？
  • 8
    Vuejs设计与实现 —— 编译层面的优化
  • 9
    Vue与React编程式路由导航
  • 10
    写Vue就是在写一个个的组件
  • 1
    前端框架与库 - Vue.js基础：模板语法、数据绑定
    133
  • 2
    《JavaScript权威指南第7版》中文PDF+英文PDF+源代码 +JavaScript权威指南(第6版)(附源码)PDF下载阅读分享推荐
    260
  • 3
    js【详解】arr.reduce() 数组缩减
    45
  • 4
    【vue】 vue2 | js 实现数字滚动效果
    98
  • 5
    【vue】 网站动态背景 | vanta.js的使用
    408
  • 6
    JavaScript进阶-JavaScript库与框架简介
    57
  • 7
    DVWA JavaScript 通关解析
    66
  • 8
    WEB三大主流框架之Vue.js
    44
  • 9
    断网之后的页面，Autox.js是点击还是上下滑动比较好？
    60
  • 10
    autox.js如何监听异常情况，比如网络中断、内存慢、应用死机或者页面无响应
    215

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • JavaScript入门与实战
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • JavaScript 自学手册文档教程
  • Node.js 入门与实战

    • 相关电子书

    更多
  • JavaScript异步编程
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • Html5和Webpack2：Webpack5打包JS和样式表
  • 前端开发基础6：Node.js和LESS预编译工具
  • 搭建Node.js编程环境
    • 下一篇
    阿里云OSS设置跨域访问