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();
    
}