Axios typescript封装记录

方案1

import { APISchema } from './types'
import { createRequestClient } from './request'

interface TestAPISchema extends APISchema {
	getUser: {
		request: {
			id: number
		}
		response: {
			avatar: string
			id: number
			name: string
		}
	}
	login: {
		request: {
			account: string
			password: string
		}
		response: {
			token: string
		}
	}
	createUser: {
		request: {
			avatar: string
			name: string
		}
		response: {
			avatar: string
			id: number
			name: string
		}
	}
}

const api = createRequestClient<TestAPISchema>({
	baseUrl: '',
	apis: {
		getUser: 'GET api/user/:id',
		createUser: 'POST api/user',
		login: 'POST api/login',
	},
	baseConfig: {
		transformResponse(data, headers) {
			const _transformData = JSON.parse(data)
			if (_transformData.success) {
				return _transformData.data
			}
			return Promise.reject(_transformData)
		},
	},
})

export default api

类型文件：types.ts

Request：Request.ts

测试文件：test.ts

方案2

//@/server
import Request from './Request'
import { TIMEOUT } from './constant'
const request = new Request({
	baseURL: import.meta.env.VITE_API_HOST,
	timeout: TIMEOUT,
	interceptors: {
		requestInterceptors: (config) => {
			console.log('实例请求拦截器')
			return config
		},
		responseInterceptors: (res) => {
			console.log('实例响应拦截器')
			return res
		},
	},
})

export default request

import request from '@/server'
import type { RequestConfig } from '@/server/interface'

import { getToken } from '@/utils/cookie'

interface DMSResponse<T = any> {
	success: boolean
	errorMessage: string
	data: T
}

const dmsRequest = <T = any>(url: string, config: Omit<RequestConfig, 'url'>) => {
	return request.request<T>({
		url,
		...config,
		interceptors: {
			responseInterceptors: <R>(res: any) => {
				return (res as DMSResponse<R>).data
			},
			requestInterceptors(config) {
				const headers = config.headers || {}
				const token = getToken()
				if (token) {
					headers.authorization = `Bearer ${token}`
				}
				return {
					...config,
					headers,
				}
			},
		},
	})
}

export default dmsRequest

类型文件：types.ts

Request：Request.ts