Apakah kaedah merangkum aksios dan menggunakan mock.js dengan vue3 dan ts?

Kata Pengantar

Kita harus memberi perhatian untuk membezakan Axios dan Ajax:

Ajax ialah istilah umum untuk teknologi dan kandungan teknikal termasuk: HTML atau XHTML , CSS, JavaScript, DOM, XML, XSLT, dan XMLHttpRequest yang paling penting, yang digunakan untuk menggunakan penghantaran data tak segerak (permintaan HTTP) antara penyemak imbas dan pelayan untuk membuat permintaan setempat untuk mencapai penyegaran setempat penggunaan adalah berdasarkan XMLHttpRequest;

Axios ialah perpustakaan HTTP berasaskan janji dan pustaka pihak ketiga

Timbunan teknologi utama: vue3, ts, axios, mock.js, elementPlus

1. Pemasangan dan pemprosesan ketergantungan Axios

1 Pemasangan Ketergantungan

Menggunakan permintaan rangkaian tak segerak pastinya tidak dapat dipisahkan daripada pemuatan, mesej dan gesaan lain gunakannya dengan elementPlus;

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

2. Pakej global axios

Dalam direktori utils di bawah direktori src, buat request.ts baharu perlu ditakrifkan terlebih dahulu:

• Tentukan format pemulangan data permintaan, yang perlu disahkan terlebih dahulu

• Tentukan konfigurasi asas axios maklumat

• Pemintas permintaan: Tempat di mana semua permintaan tiba dahulu, di mana kami boleh menyesuaikan maklumat pengepala permintaan (seperti token, berbilang bahasa, dll.)

• Pemintas respons: kembalikan tempat data mula-mula sampai , kami boleh mengendalikan maklumat pengecualian di sini (contohnya: kod 401 mengubah hala untuk log masuk, kod 500 menggesa mesej ralat)

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(&#39;token&#39;) ?? &#39;&#39;;
                return {
                    ...config,
                    headers: {
                        &#39;customToken&#39;: "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: &#39;Relogin&#39;,
                        type: &#39;warning&#39;
                    }).then(() => {
                        // 或者调用 logout 方法去处理
                        localStorage.setItem(&#39;token&#39;, &#39;&#39;);
                        location.href = &#39;/&#39;
                    })
                }
                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(&#39;请求失败&#39;);
                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. Penggunaan sebenar

Tambah api/index.ts dalam direktori src

• Tentukan jenis parameter permintaan

• Tentukan jenis parameter khusus respons

Di sini kami menggunakan ruang nama dalam ts Dalam pembangunan sebenar, kebanyakan API kami mungkin mempunyai nama yang sama dengan makna yang berbeza, jadi kami menggunakan ruang nama untuk mentakrifkannya

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(&#39;Params and params in path can not empty!&#39;)
    // 这里因为是全局的一个info，根据路由地址去请求侧边栏，所需不用把地址写死
    return request.post<System.Sidebar>(params.path, { routeName: params.routeName })
}

Panggil

<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 = &#39;/&#39; + routeName.replace(routeName[0], routeName[0].toLocaleLowerCase()) + &#39;Info&#39;
    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>

dalam fail Vue 2. Pemasangan dan pemprosesan ketergantungan mock.js

1. Pasang kebergantungan

# 安装
npm install mockjs --save

apabila digunakan dalam ts , kita perlu membuang modul dalam fail shims-vue.d.ts sekarang, jika tidak, akan ada masalah dengan memperkenalkan ralat

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

2. Cipta fail yang diperlukan untuk mock baharu

index.ts (kepunyaan fail konfigurasi global mockjs), mockjs/javaScript/index.ts (fail data khusus), kedua-dua ini perlu diberi perhatian, dan yang lain tidak perlu diberi perhatian

1 Buat mockjs /javaScript/index.ts baharu (fail data khusus)

Oleh kerana data di sini adalah terutamanya data dalam bar sisi, yang semuanya tetap, jadi peraturan mockjs tidak digunakan untuk menjana data

import { GlobalSidebar, Sidebar } from "../../sidebar";
 
namespace InfoSidebar {
    export type InfoSidebarParams = {
        body: string,
        type: string,
        url: string
    }
}
 
const dataSource: Array<GlobalSidebar> = [
    {
        mainTitle: &#39;JavaScript基础问题梳理&#39;,
        mainSidebar: [
            {
                id: 0,
                hashId: &#39;This&#39;,
                title: &#39;this指向&#39;,
                routeName: &#39;JsBasic&#39;,
                children: [
                    {
                        id: 1,
                        parentId: 0,
                        hashId: &#39;GlobalFunction&#39;,
                        title: &#39;全局函数&#39;
                    },
                    {
                        id: 2,
                        parentId: 0,
                        hashId: &#39;ObjectMethod&#39;,
                        title: &#39;对象方法&#39;
                    },
                    {
                        id: 3,
                        parentId: 0,
                        hashId: &#39;Constructor&#39;,
                        title: &#39;构造函数&#39;
                    },
                    {
                        id: 4,
                        parentId: 0,
                        hashId: &#39;SetTimeout&#39;,
                        title: &#39;定时器、回调函数&#39;
                    },
                    {
                        id: 5,
                        parentId: 0,
                        hashId: &#39;EventFunction&#39;,
                        title: &#39;事件函数&#39;
                    },
                    {
                        id: 6,
                        parentId: 0,
                        hashId: &#39;ArrowFunction&#39;,
                        title: &#39;箭头函数&#39;
                    },
                    {
                        id: 7,
                        parentId: 0,
                        hashId: &#39;CallApplyBind&#39;,
                        title: &#39;call、apply、bind&#39;
                    },
                ]
            },
            {
                id: 2,
                hashId: &#39;DeepClone&#39;,
                title: &#39;深拷贝和浅拷贝&#39;,
                routeName: &#39;JsBasic&#39;,
                children: []
            }
        ]
    },
];
 
export default {
    name: &#39;jsBasicInfo&#39;,
    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. Buat mockjs/index.ts baharu

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 memperkenalkan

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');

3 Digunakan dalam gabungan

sebenarnya kod yang baru dipanggil 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 = &#39;/&#39; + routeName.replace(routeName[0], routeName[0].toLocaleLowerCase()) + &#39;Info&#39;
    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>

Atas ialah kandungan terperinci Apakah kaedah merangkum aksios dan menggunakan mock.js dengan vue3 dan ts?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!