亚洲see少妇裸体pics,欧美日产欧美日产免费一区,亚洲综合av一区二区三区不卡,一区二区中文字幕无码成人片,一区二区三区四区高清无码

API請求使用指南

概述

本文檔詳細說(shuō)明如何使用項目中的 post 方法進(jìn)行API請求，包括基本用法、參數配置、錯誤處理等。

?? Post方法分析

方法簽名

post<T = any>(config: AxiosRequestConfig, options?: RequestOptions): Promise<T>

參數說(shuō)明

config: Axios請求配置對象
options: 可選的請求選項
T: 泛型，指定返回數據的類(lèi)型

?? 基本使用方法

1. 導入請求實(shí)例

// 方式一：導入默認實(shí)例
import request from '@/utils/request';

// 方式二：導入具體實(shí)例（如果有多個(gè)實(shí)例）
import { httpRequest } from '@/utils/request';

2. 基本POST請求

// 最簡(jiǎn)單的用法
const response = await request.post({
  url: '/api/login',
  data: {
    username: 'admin',
    password: '123456'
  }
});

// 指定返回類(lèi)型
interface LoginResponse {
  code: number;
  message: string;
  data: {
    token: string;
    userInfo: any;
  };
}

const response = await request.post<LoginResponse>({
  url: '/api/login',
  data: {
    username: 'admin',
    password: '123456'
  }
});

3. 帶請求頭的POST請求

const response = await request.post({
  url: '/api/user/update',
  data: {
    name: '張三',
    email: 'zhangsan@example.com'
  },
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer your-token'
  }
});

4. 表單數據提交

// FormData 提交
const formData = new FormData();
formData.append('file', file);
formData.append('name', 'test');

const response = await request.post({
  url: '/api/upload',
  data: formData,
  headers: {
    'Content-Type': 'multipart/form-data'
  }
});

// URL編碼表單提交
const response = await request.post({
  url: '/api/form-submit',
  data: 'name=張三&email=test@example.com',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
});

??? 結合您的路由配置使用

1. 創(chuàng )建API服務(wù)文件

// src/api/auth.ts
import request from '@/utils/request';

// 登錄接口
export const login = (data: { username: string; password: string }) => {
  return request.post({
    url: '/auth/login',
    data
  });
};

// 獲取用戶(hù)信息
export const getUserInfo = () => {
  return request.post({
    url: '/auth/GetUserInfo'
  });
};

// 獲取菜單列表
export const getMenuList = () => {
  return request.post({
    url: '/auth/menu'
  });
};

2. 知識管理API

// src/api/knowledge.ts
import request from '@/utils/request';

// 知識分類(lèi)相關(guān)
export const knowledgeApi = {
  // 獲取一級分類(lèi)
  getClassOne: () => {
    return request.post({
      url: '/DesktopModules/KnowledgeWord/API/KnowledgeAdmin/Knowledge_Class_One'
    });
  },

  // 獲取二級分類(lèi)
  getClassTwo: (parentId: string) => {
    return request.post({
      url: '/DesktopModules/KnowledgeWord/API/KnowledgeAdmin/Knowledge_Class_Two',
      data: { parentId }
    });
  },

  // 分頁(yè)獲取知識列表
  getKnowledgePage: (params: {
    pageIndex: number;
    pageSize: number;
    keyword?: string;
  }) => {
    return request.post({
      url: '/DesktopModules/KnowledgeWord/API/KnowledgeAdmin/Knowledge_Info_Page',
      data: params
    });
  },

  // 添加或編輯知識
  addOrEditKnowledge: (data: any) => {
    return request.post({
      url: '/DesktopModules/KnowledgeWord/API/KnowledgeAdmin/Knowledge_Info_AddOrEdit',
      data
    });
  },

  // 刪除知識
  deleteKnowledge: (id: string) => {
    return request.post({
      url: '/DesktopModules/KnowledgeWord/API/KnowledgeAdmin/Knowledge_Info_Delete',
      data: { id }
    });
  }
};

3. 客戶(hù)管理API

// src/api/customer.ts
import request from '@/utils/request';

export const customerApi = {
  // 企業(yè)分類(lèi)列表
  getTaxEnterprisePage: (params: {
    pageIndex: number;
    pageSize: number;
  }) => {
    return request.post({
      url: '/taxInvoice/taxEnterprisePage',
      data: params
    });
  },

  // 添加或編輯企業(yè)
  addOrEditTaxEnterprise: (data: any) => {
    return request.post({
      url: '/taxInvoice/taxEnterpriseAddorEdit',
      data
    });
  },

  // 項目列表
  getProjectPage: (params: any) => {
    return request.post({
      url: '/taxInvoice/projectPage',
      data: params
    });
  }
};

?? 在Vue組件中使用

1. 在setup中使用

<template>
  <div>
    <t-button @click="handleLogin" :loading="loading">登錄</t-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { login } from '@/api/auth';
import { MessagePlugin } from 'tdesign-vue-next';

const loading = ref(false);

const handleLogin = async () => {
  loading.value = true;
  
  try {
    const response = await login({
      username: 'admin',
      password: '123456'
    });
    
    if (response.code === 200) {
      MessagePlugin.success('登錄成功');
      // 處理登錄成功邏輯
    } else {
      MessagePlugin.error(response.message || '登錄失敗');
    }
  } catch (error) {
    console.error('登錄錯誤:', error);
    MessagePlugin.error('網(wǎng)絡(luò )錯誤，請重試');
  } finally {
    loading.value = false;
  }
};
</script>

2. 在Pinia Store中使用

// src/store/modules/user.ts
import { defineStore } from 'pinia';
import { login, getUserInfo } from '@/api/auth';

export const useUserStore = defineStore('user', {
  state: () => ({
    token: '',
    userInfo: null
  }),

  actions: {
    async login(credentials: { username: string; password: string }) {
      try {
        const response = await login(credentials);
        
        if (response.code === 200) {
          this.token = response.data.token;
          return response;
        } else {
          throw new Error(response.message);
        }
      } catch (error) {
        throw error;
      }
    },

    async fetchUserInfo() {
      try {
        const response = await getUserInfo();
        if (response.code === 200) {
          this.userInfo = response.data;
        }
      } catch (error) {
        console.error('獲取用戶(hù)信息失敗:', error);
      }
    }
  }
});

?? 高級用法

1. 帶類(lèi)型定義的請求

// 定義接口類(lèi)型
interface ApiResponse<T = any> {
  code: number;
  message: string;
  data: T;
}

interface UserInfo {
  id: string;
  name: string;
  email: string;
  roles: string[];
}

// 使用類(lèi)型
const getUserInfo = (): Promise<ApiResponse<UserInfo>> => {
  return request.post<ApiResponse<UserInfo>>({
    url: '/auth/GetUserInfo'
  });
};

2. 請求攔截和錯誤處理

// 帶自定義選項的請求
const response = await request.post({
  url: '/api/sensitive-operation',
  data: { action: 'delete' }
}, {
  // 自定義選項（如果支持）
  showLoading: true,
  showError: true,
  timeout: 10000
});

3. 并發(fā)請求

// 同時(shí)發(fā)起多個(gè)請求
const [userInfo, menuList, permissions] = await Promise.all([
  request.post({ url: '/auth/GetUserInfo' }),
  request.post({ url: '/auth/menu' }),
  request.post({ url: '/auth/permissions' })
]);

?? 實(shí)際應用示例

完整的CRUD操作

// src/api/modules/knowledge.ts
import request from '@/utils/request';

export class KnowledgeService {
  // 獲取列表
  static async getList(params: {
    pageIndex: number;
    pageSize: number;
    keyword?: string;
  }) {
    return request.post({
      url: '/DesktopModules/KnowledgeWord/API/KnowledgeAdmin/Knowledge_Info_Page',
      data: params
    });
  }

  // 獲取詳情
  static async getById(id: string) {
    return request.post({
      url: '/DesktopModules/KnowledgeWord/API/KnowledgeAdmin/Knowledge_Info_ByID',
      data: { id }
    });
  }

  // 創(chuàng  )建或更新
  static async save(data: any) {
    return request.post({
      url: '/DesktopModules/KnowledgeWord/API/KnowledgeAdmin/Knowledge_Info_AddOrEdit',
      data
    });
  }

  // 刪除
  static async delete(id: string) {
    return request.post({
      url: '/DesktopModules/KnowledgeWord/API/KnowledgeAdmin/Knowledge_Info_Delete',
      data: { id }
    });
  }
}

在組件中使用

<template>
  <div>
    <t-table 
      :data="tableData" 
      :loading="loading"
      @page-change="handlePageChange"
    >
      <!-- 表格列定義 -->
    </t-table>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { KnowledgeService } from '@/api/modules/knowledge';
import { MessagePlugin } from 'tdesign-vue-next';

const tableData = ref([]);
const loading = ref(false);
const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 0
});

// 獲取列表數據
const fetchData = async () => {
  loading.value = true;
  
  try {
    const response = await KnowledgeService.getList({
      pageIndex: pagination.value.current,
      pageSize: pagination.value.pageSize
    });
    
    if (response.code === 200) {
      tableData.value = response.data.list;
      pagination.value.total = response.data.total;
    }
  } catch (error) {
    MessagePlugin.error('獲取數據失敗');
  } finally {
    loading.value = false;
  }
};

// 分頁(yè)變化
const handlePageChange = (pageInfo: any) => {
  pagination.value.current = pageInfo.current;
  pagination.value.pageSize = pageInfo.pageSize;
  fetchData();
};

onMounted(() => {
  fetchData();
});
</script>

?? 注意事項

錯誤處理: 始終使用 try-catch 包裝異步請求
類(lèi)型安全: 盡量使用 TypeScript 類(lèi)型定義
加載狀態(tài): 在請求期間顯示加載狀態(tài)
用戶(hù)反饋: 請求成功或失敗時(shí)給用戶(hù)適當的反饋
請求取消: 在組件卸載時(shí)取消未完成的請求

?? 總結

使用 request.post() 方法的基本步驟：

導入請求實(shí)例: import request from '@/utils/request'
調用post方法: request.post({ url, data })
處理響應: 使用 async/await 或 .then()
錯誤處理: 使用 try-catch 捕獲異常
類(lèi)型定義: 使用泛型指定返回類(lèi)型

這樣就可以輕松地使用您的API路由配置進(jìn)行數據請求了！

最后更新: 2025/10/3

文章目錄

亚洲see少妇裸体pics,欧美日产欧美日产免费一区,亚洲综合av一区二区三区不卡,一区二区中文字幕无码成人片,一区二区三区四区高清无码