axios typescript post请求

参考代码

代码如下

import axios, {isCancel, AxiosError,AxiosResponse,AxiosRequestConfig} from 'axios'

const testreq= async () =>{
  {
    let req :UserReq = {name:"dsg"}
    let { status,data } = await axios.post('https://httpbin.org/post?id=1&name=haha',req);
    console.log("\nstatus:",status,"\ndata:\n",data)
  }

  {
    let {status,data } = await axios.post('https://httpbin.org/post?id=2&name=hb',"name=dsg");
    console.log("\nstatus:",status,"\ndata:\n",data)
  }
}

返回内容

{
  "args": {
    "id": "1", 
    "name": "haha"
  }, 
  "data": "{\"name\":\"hanbindsg\"}", 
  "files": {}, 
  "form": {}, 
  "headers": {
    "Accept": "application/json, text/plain, */*", 
    "Accept-Encoding": "gzip, deflate, br", 
    "Accept-Language": "zh-CN,zh;q=0.9,en;q=0.8", 
    "Cache-Control": "no-cache", 
    "Content-Length": "20", 
    "Content-Type": "application/json", 
    "Host": "httpbin.org", 
    "Origin": "http://localhost:5173", 
    "Pragma": "no-cache", 
    "Referer": "http://localhost:5173/", 
    "Sec-Ch-Ua": "\"Google Chrome\";v=\"111\", \"Not(A:Brand\";v=\"8\", \"Chromium\";v=\"111\"", 
    "Sec-Ch-Ua-Mobile": "?0", 
    "Sec-Ch-Ua-Platform": "\"Windows\"", 
    "Sec-Fetch-Dest": "empty", 
    "Sec-Fetch-Mode": "cors", 
    "Sec-Fetch-Site": "cross-site", 
    "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36", 
    "X-Amzn-Trace-Id": "Root=1-64208cf1-5babc2ef79a744006cf6e6b7"
  }, 
  "json": {
    "name": "hanbindsg"
  }, 
  "origin": "1.10.203.37", 
  "url": "https://httpbin.org/post?id=1&name=haha"
}

{
  "args": {
    "id": "2", 
    "name": "hb"
  }, 
  "data": "", 
  "files": {}, 
  "form": {
    "name": "hanbin"
  }, 
  "headers": {
    "Accept": "application/json, text/plain, */*", 
    "Accept-Encoding": "gzip, deflate, br", 
    "Accept-Language": "zh-CN,zh;q=0.9,en;q=0.8", 
    "Cache-Control": "no-cache", 
    "Content-Length": "11", 
    "Content-Type": "application/x-www-form-urlencoded", 
    "Host": "httpbin.org", 
    "Origin": "http://localhost:5173", 
    "Pragma": "no-cache", 
    "Referer": "http://localhost:5173/", 
    "Sec-Ch-Ua": "\"Google Chrome\";v=\"111\", \"Not(A:Brand\";v=\"8\", \"Chromium\";v=\"111\"", 
    "Sec-Ch-Ua-Mobile": "?0", 
    "Sec-Ch-Ua-Platform": "\"Windows\"", 
    "Sec-Fetch-Dest": "empty", 
    "Sec-Fetch-Mode": "cors", 
    "Sec-Fetch-Site": "cross-site", 
    "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36", 
    "X-Amzn-Trace-Id": "Root=1-64208cf2-0a60db950a9ad547566d60c0"
  }, 
  "json": null, 
  "origin": "1.10.203.37", 
  "url": "https://httpbin.org/post?id=2&name=hb"
}

ts泛型

参考字节跳动代码

https://github.com/arco-design/arco-design-pro-vue/blob/main/arco-design-pro-vite/src/store/modules/user/types.ts

https://github.com/arco-design/arco-design-pro-vue/blob/main/arco-design-pro-vite/src/api/user.ts

import axios from 'axios';
import type { RouteRecordNormalized } from 'vue-router';
import { UserState } from '@/store/modules/user/types';

export interface LoginData {
  username: string;
  password: string;
}

export type RoleType = '' | '*' | 'admin' | 'user';
export interface UserState {
  name?: string;
  avatar?: string;
  job?: string;
  organization?: string;
  location?: string;
  email?: string;
  introduction?: string;
  personalWebsite?: string;
  jobName?: string;
  organizationName?: string;
  locationName?: string;
  phone?: string;
  registrationDate?: string;
  accountId?: string;
  certification?: number;
  role: RoleType;
}

export interface LoginRes {
  token: string;
}
export function login(data: LoginData) {
  return axios.post<LoginRes>('/api/user/login', data);
}

export function logout() {
  return axios.post<LoginRes>('/api/user/logout');
}

export function getUserInfo() {
  return axios.post<UserState>('/api/user/info');
}

export function getMenuList() {
  return axios.post<RouteRecordNormalized[]>('/api/user/menu');
}