【axios】TypeScript实战，联合源码，从0到1教你封装一个axios - 基础封装 - ToB企服应用市场:ToB评测及商务社交产业平台

# .env.production 和这个一样
# the APP baseURL
VITE_APP_BASE_URL = 'your_base_url'
# the token key
VITE_APP_TOKEN_KEY = 'your_token_key'
# the upload url
VITE_UPLOAD_URL = 'your_upload_url'
# app title
VITE_APP_TITLE = 'liushi_template'

复制代码

/// <reference types="vite/client" />
export interface ImportMetaEnv {
readonly VITE_APP_TITLE: string
readonly VITE_APP_BASE_URL: string
readonly VITE_APP_TOKEN_KEY?: string
readonly VITE_UPLOAD_URL?: string
}
interface ImportMeta {
readonly env: ImportMetaEnv
}

复制代码

import axios,
{ AxiosInstance,
InternalAxiosRequestConfig,
AxiosRequestConfig,
AxiosError,
AxiosResponse,
} from 'axios';

复制代码

class HttpRequest {
service: AxiosInstance
constructor(){
// 设置一些默认配置项
this.service = axios.create({
baseURL: import.meta.env.VITE_APP_BASE_URL,
timeout: 5 * 1000
});
}
}
const httpRequest = new HttpRequest()
export default httpRequest;

复制代码

class HttpRequest {
// ...
constructor() {
// ...
this.service.interceptors.request.use(
// ...
);
}
}

复制代码

class HttpRequest {
// ...
constructor() {
// ...
this.service.interceptors.request.use(
(config: InternalAxiosRequestConfig) => {
/**
* set your config
*/
if (import.meta.env.VITE_APP_TOKEN_KEY && getToken()) {
// carry token
config.headers[import.meta.env.VITE_APP_TOKEN_KEY] = getToken()
}
return config
},
(error: AxiosError) => {
console.log('requestError: ', error)
return Promise.reject(error);
},
{
synchronous: false,
runWhen: ((config: InternalAxiosRequestConfig) => {
// do something
// if return true, axios will execution interceptor method
return true
})
}
);
}
}

复制代码

export interface ResponseModel<T = any> {
success: boolean;
message: string | null;
code: number | string;
data: T;
}

复制代码

// set code cofig
export enum CodeConfig {
success = 200,
notFound = 404,
noPermission = 403
}

复制代码

import { CodeConfig } from './codeConfig.ts'
import { ResponseModel } from './types/index.ts'
class HttpRequest {
// ...
constructor() {
// ...
this.service.interceptors.response.use(
(response: AxiosResponse<ResponseModel>): AxiosResponse['data'] => {
const { data } = response
const { code } = data
if (code) {
if (code != HttpCodeConfig.success) {
switch (code) {
case HttpCodeConfig.notFound:
// the method to handle this code
break;
case HttpCodeConfig.noPermission:
// the method to handle this code
break;
default:
break;
}
return Promise.reject(data.message)
} else {
return data
}
} else {
return Promise.reject('Error! code missing!')
}
},
(error: AxiosError) => {
return Promise.reject(error);
}
);
}
}

复制代码

import { ResponseModel } from './types/index.ts'
class HttpRequest {
// ...
constructor(){/**/}
request<T = any>(config: AxiosRequestConfig): Promise<ResponseModel<T>> {
/**
* TODO: execute other methods according to config
*/
return new Promise((resolve, reject) => {
try {
this.service.request<ResponseModel<T>>(config)
.then((res: AxiosResponse['data']) => {
resolve(res as ResponseModel<T>);
})
.catch((err) => {
reject(err)
})
} catch (err) {
return Promise.reject(err)
}
})
}
}

复制代码

import { ResponseModel } from './types/index.ts'
class HttpRequest {
// ...
get<T = any>(config: AxiosRequestConfig): Promise<ResponseModel<T>> {
return this.request({ method: 'GET', ...config })
}
post<T = any>(config: AxiosRequestConfig): Promise<ResponseModel<T>> {
return this.request({ method: 'POST', ...config })
}
put<T = any>(config: AxiosRequestConfig): Promise<ResponseModel<T>> {
return this.request({ method: 'PUT', ...config })
}
delete<T = any>(config: AxiosRequestConfig): Promise<ResponseModel<T>> {
return this.request({ method: 'DELETE', ...config })
}
}

复制代码

export interface UploadFileItemModel {
name: string,
value: string | Blob
}
export type UploadRequestConfig = Omit<AxiosRequestConfig, 'url' | 'data'>

复制代码

import { UploadFileItemModel } from './types/index.ts'
class HttpRequest {
// ...
upload<T = string>(fileItem: UploadFileItemModel, config?: UploadRequestConfig): Promise<ResponseModel<T>> | null {
if (!import.meta.env.VITE_UPLOAD_URL) return null
let fd = new FormData()
fd.append(fileItem.name, fileItem.value)
let configCopy: UploadRequestConfig
if (!config) {
configCopy = {
headers: {
'Content-Type': 'multipart/form-data'
}
}
} else {
config.headers!['Content-Type'] = 'multipart/form-data'
configCopy = config
}
return this.request({ url: import.meta.env.VITE_UPLOAD_URL, data: fd, ...configCopy })
}

复制代码

import { AxiosRequestConfig } from 'axios'export interface ResponseModel<T = any> {
success: boolean;
message: string | null;
code: number | string;
data: T;
}
export interface UploadFileItemModel { name: string, value: string | Blob}/** * customize your uploadRequestConfig */export type UploadRequestConfig = Omit<AxiosRequestConfig, 'url' | 'data'>

复制代码

// set code cofig
export enum CodeConfig {
success = 200,
notFound = 404,
noPermission = 403
}

复制代码

import axios,
{ AxiosInstance,
InternalAxiosRequestConfig,
AxiosRequestConfig,
AxiosError,
AxiosResponse,
} from 'axios';
import { CodeConfig } from './CodeConfig';import { ResponseModel, UploadFileItemModel, UploadRequestConfig } from './types/index'import { getToken } from '../token/index'class HttpRequest { service: AxiosInstance constructor() { this.service = axios.create({ baseURL: import.meta.env.VITE_APP_BASE_URL, timeout: 5 * 1000 }); this.service.interceptors.request.use( (config: InternalAxiosRequestConfig) => { /** * set your config */ if (import.meta.env.VITE_APP_TOKEN_KEY && getToken()) { config.headers[import.meta.env.VITE_APP_TOKEN_KEY] = getToken() } return config }, (error: AxiosError) => { console.log('requestError: ', error) return Promise.reject(error); }, { synchronous: false runWhen: ((config: InternalAxiosRequestConfig) => { // do something // if return true, axios will execution interceptor method return true }) } ); this.service.interceptors.response.use( (response: AxiosResponse<ResponseModel>): AxiosResponse['data'] => { const { data } = response const { code } = data if (code) { if (code != HttpCodeConfig.success) { switch (code) { case HttpCodeConfig.notFound: // the method to handle this code break; case HttpCodeConfig.noPermission: // the method to handle this code break; default: break; } return Promise.reject(data.message) } else { return data } } else { return Promise.reject('Error! code missing!') } }, (error: any) => { return Promise.reject(error); } ); } request<T = any>(config: AxiosRequestConfig): Promise<ResponseModel<T>> { /** * TODO: execute other methods according to config */ return new Promise((resolve, reject) => { try { this.service.request<ResponseModel<T>>(config) .then((res: AxiosResponse['data']) => { resolve(res as ResponseModel<T>); }) .catch((err) => { reject(err) }) } catch (err) { return Promise.reject(err) } }) } get<T = any>(config: AxiosRequestConfig): Promise<ResponseModel<T>> { return this.request({ method: 'GET', ...config }) } post<T = any>(config: AxiosRequestConfig): Promise<ResponseModel<T>> { return this.request({ method: 'POST', ...config }) } put<T = any>(config: AxiosRequestConfig): Promise<ResponseModel<T>> { return this.request({ method: 'PUT', ...config }) } delete<T = any>(config: AxiosRequestConfig): Promise<ResponseModel<T>> { return this.request({ method: 'DELETE', ...config }) } upload<T = string>(fileItem: UploadFileItemModel, config?: UploadRequestConfig): Promise<ResponseModel<T>> | null { if (!import.meta.env.VITE_UPLOAD_URL) return null let fd = new FormData() fd.append(fileItem.name, fileItem.value) let configCopy: UploadRequestConfig if (!config) { configCopy = { headers: { 'Content-Type': 'multipart/form-data' } } } else { config.headers!['Content-Type'] = 'multipart/form-data' configCopy = config } return this.request({ url: import.meta.env.VITE_UPLOAD_URL, data: fd, ...configCopy }) }}const httpRequest = new HttpRequest()export default httpRequest;

复制代码

VITE_APP_BASE_URL = 'https://api.vvhan.com/api'

复制代码

export interface ResponseModel<T> {
data: T
subtitle: string
success: boolean
title: string
update_time: string
}

复制代码

export interface exampleModel {
index: number
title: string
desc: string
url: string
mobilUrl: string
}

复制代码

import request from '@/utils/axios/axios'
import { exampleModel } from '../types/hello'
enum API {
example = '/hotlist?type=history'
}
export const exampleAPI = () => {
return request.get<exampleModel[]>({ url: API.example })
}

复制代码

<script setup lang="ts">
import HelloWorld from "../../components/HelloWorld.vue";
import { exampleAPI } from "@/api/hello";
exampleAPI().then((res) => {
console.log('getData: ', res)
const title = res.title
const { data } = res
console.log('list: ', data)
});
</script>
<template>
<div>
<HelloWorld msg="Vite + Vue + Tailwindcss + TypeScript" />
</div>
</template>

复制代码