vue3组件封装

choorn

已于 2023-09-18 20:54:16 修改

阅读量642

点赞数 1

分类专栏： vue3 文章标签：前端 vue.js

于 2023-05-05 22:22:36 首次发布

本文链接：https://blog.youkuaiyun.com/choorn/article/details/130516499

版权

vue3 专栏收录该内容

9 篇文章

订阅专栏

文章展示了如何在TypeScript中封装一个基于axios的HTTP请求函数，用于处理GET和POST请求。这个函数使用了qs库进行参数序列化，并在请求出错时使用ElementPlus的ElMessage显示错误信息。此外，文中还演示了如何在组件中调用这个函数来获取数据并更新表格数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、封装http.ts文件

import axios from 'axios';
import { ElMessage } from 'element-plus';
import { stringify } from 'qs';

/**
 * 请求地址公共部分
 */
const baseUrl = "/srv";

/**
 * type指定访问类型，post，get，……
 * 发送请求并将response.data返回
 */
async function sendRequest(type:string,url:string,param: unknown) {
    
    try {
        const response = await axios({
            url: `${baseUrl}${url}`,
            method: type,
            params: param,
            paramsSerializer: params => {
                return stringify(params,{indices:false,allowDots:true}); 
            }
        });
        return response.data;

    } catch (error) {
        ElMessage(String(error));
    }
}


export { sendRequest }

2、调用处先引入

import { sendRequest } from '@/api/http'

定义函数调用，同一组件中调用基本都是同一个请求，避免多处重复编写

/**
 * 定义函数获取数据，并更新tableData
 */
 async function list() {
    tableData.value = await sendRequest("get", "/department/page", p);
    console.log(tableData);
}

直接调用list（）

/**
 * 挂载生命周期
 */
onMounted(() => {
    list();
})


const handleSizeChange = (val:number)=>{
    p.pageSize = val;
    list();
    
}

const handleCurrentChange = (val:number)=>{
    p.page = val-1;
    list();
    
}