vue3和ts封裝axios以及使用mock.js詳解

更新時間：2023年02月17日 17:12:18 作者：程序員啊楠

目前前端最流行的網(wǎng)絡(luò)請求庫還是axios,所以對axios的封裝很有必要,下面這篇文章主要給大家介紹了關(guān)于vue3和ts封裝axios以及使用mock.js的相關(guān)資料,文章通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

今天我們一起來看一看 vue3+ts如何優(yōu)雅的封裝axios，并結(jié)合 mock.js 實現(xiàn)敏捷開發(fā)；

但是我們要注意區(qū)分 Axios 和 Ajax ：

Ajax 是一種技術(shù)統(tǒng)稱，技術(shù)內(nèi)容包括：HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest，用于瀏覽器與服務(wù)器之間使用異步數(shù)據(jù)傳輸(HTTP 請求),做到局部請求以實現(xiàn)局部刷新，使用是基于 XMLHttpRequest 進(jìn)行使用；

Axios 是一個基于 promise 的 HTTP 庫，是一個是第三方庫

今天主要技術(shù)棧：vue3，ts，axios，mock.js，elementPlus

一、axios 的依賴安裝與處理

1. 依賴安裝

使用異步網(wǎng)絡(luò)請求肯定離不開loading、message 等提示，今天我們配合 elementPlus 一起使用；

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

2. 全局 axios 封裝

src 目錄下 utils 目錄下，新建 request.ts，因為使用的是TS，需要提前定義數(shù)據(jù)格式：

定義請求數(shù)據(jù)返回的格式，需要提前確認(rèn)好
定義 axios 基礎(chǔ)配置信息
請求攔截器：所有請求最先到達(dá)的地方，我們可以在此自定義請求頭信息（比如：token、多語言等等）
響應(yīng)攔截器：返回數(shù)據(jù)最先到達(dá)的地方，我們可以在此處理異常信息（比如：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, // 服務(wù)器異常 server error
    LOGINTIMEOUT = 401, // 登錄超時 login timeout
    SUCCESS = 200, // 請求成功 request successfully
}
 
// axios 基礎(chǔ)配置
const config = {
    // 默認(rèn)地址，可以使用 process Node內(nèi)置的，項目根目錄下新建 .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)
            }
        );
 
        /**
         * 響應(yīng)攔截器
         * response -> { 響應(yīng)攔截器 } -> 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(() => {
                        // 或者調(diào)用 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("網(wǎng)絡(luò)連接失敗，請檢查網(wǎng)絡(luò)");
                    // 可以重定向至404頁面
                }
            }
 
        )
    }
 
    public handleCode = (code: number): void => {
        switch (code) {
            case 401:
                ElMessage.error("登陸失敗，請重新登錄");
                break;
            case 500:
                ElMessage.error("請求異常，請聯(lián)系管理員");
                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

定義請求的參數(shù)類型
定義響應(yīng)想具體參數(shù)類型

這里我們使用到ts 中的 namespace ，實際開發(fā)中我們很多 api 可能會出現(xiàn)相同名字不同含義，所以我們使用 namespace 進(jìn)行定義

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，根據(jù)路由地址去請求側(cè)邊欄，所需不用把地址寫死
    return request.post<System.Sidebar>(params.path, { routeName: params.routeName })
}

Vue 文件中調(diào)用

<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 中使用時，我們需要現(xiàn)在 shims-vue.d.ts 文件中去拋出模塊，不然會出現(xiàn)引入報錯的問題

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

2. 新建 mock 所需的文件

index.ts（屬于mockjs全局配置文件），mockjs/javaScript/index.ts（具體的數(shù)據(jù)文件），這兩個需要關(guān)注，別的不用關(guān)注

1. 新建 mockjs/javaScript/index.ts（具體的數(shù)據(jù)文件）

因為我這里的數(shù)據(jù)主要是側(cè)邊欄的數(shù)據(jù)，都是固定好的，所以并沒有用到 mockjs 的規(guī)則生成數(shù)據(jù)

import { GlobalSidebar, Sidebar } from "../../sidebar";
 
namespace InfoSidebar {
    export type InfoSidebarParams = {
        body: string,
        type: string,
        url: string
    }
}
 
const dataSource: Array<GlobalSidebar> = [
    {
        mainTitle: 'JavaScript基礎(chǔ)問題梳理',
        mainSidebar: [
            {
                id: 0,
                hashId: 'This',
                title: 'this指向',
                routeName: 'JsBasic',
                children: [
                    {
                        id: 1,
                        parentId: 0,
                        hashId: 'GlobalFunction',
                        title: '全局函數(shù)'
                    },
                    {
                        id: 2,
                        parentId: 0,
                        hashId: 'ObjectMethod',
                        title: '對象方法'
                    },
                    {
                        id: 3,
                        parentId: 0,
                        hashId: 'Constructor',
                        title: '構(gòu)造函數(shù)'
                    },
                    {
                        id: 4,
                        parentId: 0,
                        hashId: 'SetTimeout',
                        title: '定時器、回調(diào)函數(shù)'
                    },
                    {
                        id: 5,
                        parentId: 0,
                        hashId: 'EventFunction',
                        title: '事件函數(shù)'
                    },
                    {
                        id: 6,
                        parentId: 0,
                        hashId: 'ArrowFunction',
                        title: '箭頭函數(shù)'
                    },
                    {
                        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');

三、結(jié)合使用

實際上就是剛剛調(diào)用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>

總結(jié)

到此這篇關(guān)于vue3和ts封裝axios以及使用mock.js詳解的文章就介紹到這了,更多相關(guān)vue3 ts封裝axios使用mock.js內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

vue3和ts封裝axios以及使用mock.js詳解

目錄

前言

一、axios 的依賴安裝與處理

1. 依賴安裝

2. 全局 axios 封裝

3. 實際使用

二、 mock.js 的依賴安裝與處理

1. 安裝依賴

2. 新建 mock 所需的文件

三、結(jié)合使用

總結(jié)

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

vue3和ts封裝axios以及使用mock.js詳解

目錄

前言

一、axios 的依賴安裝與處理

1. 依賴安裝

2. 全局 axios 封裝

3. 實際使用

二、 mock.js 的依賴安裝與處理

1. 安裝依賴

2. 新建 mock 所需的文件

三、結(jié)合使用

總結(jié)

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

一、axios 的依賴安裝與處理

二、 mock.js 的依賴安裝與處理

三、結(jié)合使用