接口的运行过程

1、在api文件夹创建一个ts文件，用于管理需要的api

// 引入封装好的 request
import request from '@/plugins/request'

//枚举API
enum API {
  // 用户列表：USERLIST是一个常量，表示API的URL或路径
  USERLIST = '/admin/base/sys/role/page'
}

//导出用户列表接口userList 
//在使用该接口时，data: any为接收到的形参,不限制data的数据类型
export const userList = (data: any) =>
  //向API.USERLIST这个地址发送一个post请求，携带的参数为接收到的data
  request.post<any, any>(API.USERLIST, data)

//request.post函数会返回一个Promise，这个Promise在请求成功时会解析为服务器返回的数据

2、在store中创建一个仓库，用于存放用户列表的仓库

import { defineStore } from 'pinia'
//引入api
import { userList } from '@/api/information/index.ts'

//创建store实例，'information'此处一般与文件名一致
export const useManageStore=defineStore('information',{
    state:()=>{
       // 用户列表的数据
       userListData: []
    },
    actions:{
        // 获取用户列表的方法:这里的data是在使用的网页传递过来的
        async userListMethod(data:any){
            const result:any=await userList(data)
            if(result.code==1000){
                this.userListData=result
//如果需要的是接口数据，酒返回数据;不需要数据（只需要确定调用是否成功），可以返回'ok',然后在页面调用时需要写 if (result == 'ok') {
                return this.userListData
            }else {
                //抛出一个promise对象，返回错误信息
                return Promise.reject(new Error(result.message))
            }
        }
    }
})

3、在需要使用的页面中，定义函数

//引入仓库
import useManageStore from '@/store/modules/information.ts'

//定义调用接口时需要传递的参数，这个参数是从接口文档获取的，可以在网络的载荷里面看到
const data= reactive({
  page: 1,
  size: 20
})

//设置默认传递参数为空
const getData= async (reqData:any =null)=>{
    //后续有可能需要传递参数，需要传递参数的时候是data，不需要传递参数是reqData
    const requestData=reqData || data
    const result=await useManageStore().userListMethod(requestData)
    // 解构出调用接口的参数的相关数据
    const { page, size, total } = result.data.pagination
    //拿到用户数据,给其他数据赋值
    tableData.value = result.data.list
    currentPage.value = page
    pageSize.value = size
    totalNum.value = total
}


//因为在仓库中已经设置过Promise.reject(new Error(result.message))，所有这里可以不用写if(result.code ==200)