vue ts 封装查询方法

你可以通过以下步骤来封装一个查询方法：

1. 创建一个新的 TypeScript 文件，比如 `query.ts`。

2. 定义一个接口来描述查询的参数和返回值。例如，假设你要查询一个用户信息，你可以创建一个名为 `UserInfo` 的接口：

interface UserInfo {
  id: number;
  name: string;
  email: string;
  // 其他属性
}

3. 创建一个函数来执行查询操作。这个函数可以接受查询参数，并返回一个 Promise，用于处理异步操作。例如：

import axios from 'axios';

export function queryUserInfo(userId: number): Promise<UserInfo> {
  return axios.get(`/api/user/${userId}`)
    .then(response => response.data)
    .catch(error => {
      console.error('查询用户信息失败:', error);
      throw error;
    });
}

这里使用了 axios 库来发送异步请求，并返回一个 Promise 对象。

4. 在需要调用查询方法的地方，导入该函数并调用它。例如，在 Vue 组件中：

import { queryUserInfo } from './query';

export default {
  // ...
  methods: {
    getUserInfo(userId: number) {
      queryUserInfo(userId)
        .then(userInfo => {
          // 处理返回的用户信息
          console.log(userInfo);
        })
        .catch(error => {
          // 处理错误
          console.error('获取用户信息失败:', error);
        });
    }
  }
  // ...
}

通过封装查询方法，你可以在多个组件中重复使用它，并且在需要时方便地进行修改和扩展。