再谈网络请求封装

之前封装 axios 看上去没有问题，但是改成 ts 就出现问题了。

之前的封装

import axios from 'axios';

import CryptoService from '@/utils/encryption';

import eventEmitter from '@/utils/eventEmitter';

const instance = axios.create({
	baseURL: 'http://localhost:3000/api',
	timeout: 5000,
});

instance.interceptors.request.use((config) => {
	const { url } = config;
	if (
		!(
			url.startsWith('/public') ||
			url.startsWith('/patient') ||
			url.startsWith('/doctor') ||
			url.startsWith('/admin')
		)
	) {
		return config;
	}
	const token = {};
	eventEmitter.emit('TOKEN:GET', token);
	if (!token.value) {
		eventEmitter.emit('API:UN_AUTH');
		return;
	}
	config.headers.Authorization = `Bearer ${token}`;
	return config;
});

const errorCodeHandler = {
	1: () => {
		eventEmitter.emit('API:UN_AUTH');
	},
	2: () => {
		eventEmitter.emit('API:NO_PERMISSION');
	},
	3: () => {
		eventEmitter.emit('API:NOT_REAL_NAME');
	},
};

const httpCodeHandler = {
	404: () => {
		eventEmitter.emit('API:NOT_FOUND');
	},
	500: () => {},
};

instance.interceptors.response.use(
	(resp) => {
		const { code } = resp.data;
		if (code !== 0) {
			errorCodeHandler[code]?.(resp.data);
			return Promise.reject(resp.data);
		}
		const { data } = resp.data;
		return data;
	},
	(error) => {
		const { status } = error;
		httpCodeHandler[status]?.();
		return Promise.reject(error);
	}
);

export default instance;

改成 ts 后：

import axios, { type AxiosRequestConfig } from 'axios'

import { ApiBus } from '@/utils/eventEmitter'
import { useUserStore } from '@/store/useStore'

const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:8080/api'

const instance = axios.create({
  baseURL: API_URL,
  timeout: 5000,
})
interface Response<T = any> {
  code: number
  message: string
  data: T
}

type ErrorHandler = (resp?: Response) => void

instance.interceptors.request.use((config) => {
  const { url } = config
  if (!url || url.startsWith('/public')) {
    // 登录接口
    return config
  }
  // 获取token操作
  const { token } = useUserStore()
  config.headers.Authorization = `Bearer ${token}`
  return config
})

const errorCodeHandler: Record<number, ErrorHandler> = {
  // - token无效或没有token 1 (前端需要重新登录)
  1: () => {
    ApiBus.emit('API:UN_AUTH')
  },
}

const httpCodeHandler: Record<number, ErrorHandler> = {
  404: () => {
    ApiBus.emit('API:NOT_FOUND')
  },
  500: () => {},
}

instance.interceptors.response.use(
  (resp) => {
    const { code, data, message } = resp.data as Response
    if (code < 100) {
      // 业务错误处理
      errorCodeHandler[code]?.(data)
      return Promise.reject(message)
    }
    return data
  },
  (error) => {
    const { status } = error
    httpCodeHandler[status]?.()
    return Promise.reject(error)
  },
)

export default instance

之后封装的请求，比如 login

import instance from '../useRequest';

export interface LoginRequest {
	email: string;
	password: string;
}

export interface LoginResponse {
	token: string;
	name: string;
	avatar: string;
	exp: number;
}

export const login = (req: LoginRequest) => {
	return instance.post<LoginResponse>('/public/login', req);
};

这样写是不能解构出数据的，ts 会报错。这里需要再加一层

const request = async <T>(config: AxiosRequestConfig): Promise<T> => {
	const { data } = await instance.request<T>(config);
	return data;
};

const RequestHandler = {
	get: <T>(url: string, params?: Record<string, any>) => {
		return request<T>({ url, method: 'get', params });
	},
	post: <T>(url: string, data?: Record<string, any>) => {
		return request<T>({ url, method: 'post', data });
	},
	put: <T>(url: string, data?: Record<string, any>) => {
		return request<T>({ url, method: 'put', data });
	},
	delete: <T>(url: string, data?: Record<string, any>) => {
		return request<T>({ url, method: 'delete', data });
	},
};

export default RequestHandler;

这样之后就有类型标注了。

完整代码

import axios, { type AxiosRequestConfig } from 'axios'

import { ApiBus } from '@/utils/eventEmitter'
import { useUserStore } from '@/store/useStore'

const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:8080/api'

const instance = axios.create({
  baseURL: API_URL,
  timeout: 5000,
})
interface Response<T = any> {
  code: number
  message: string
  data: T
}

type ErrorHandler = (resp?: Response) => void

instance.interceptors.request.use((config) => {
  const { url } = config
  if (!url || url.startsWith('/public')) {
    // 登录接口
    return config
  }
  // 获取token操作
  const { token } = useUserStore()
  config.headers.Authorization = `Bearer ${token}`
  return config
})

const errorCodeHandler: Record<number, ErrorHandler> = {
  // - token无效或没有token 1 (前端需要重新登录)
  1: () => {
    ApiBus.emit('API:UN_AUTH')
  },
}

const httpCodeHandler: Record<number, ErrorHandler> = {
  404: () => {
    ApiBus.emit('API:NOT_FOUND')
  },
  500: () => {},
}

instance.interceptors.response.use(
  (resp) => {
    const { code, data, message } = resp.data as Response
    if (code < 100) {
      // 业务错误处理
      errorCodeHandler[code]?.(data)
      return Promise.reject(message)
    }
    return data
  },
  (error) => {
    const { status } = error
    httpCodeHandler[status]?.()
    return Promise.reject(error)
  },
)

const request = async <T>(config: AxiosRequestConfig): Promise<T> => {
  const resp = await instance.request<T>(config)
  return resp as T
}

const RequestHandler = {
  get: <T>(url: string, params?: Record<string, any>) => {
    return request<T>({ url, method: 'get', params })
  },
  post: <T>(url: string, data?: Record<string, any>) => {
    return request<T>({ url, method: 'post', data })
  },
  put: <T>(url: string, data?: Record<string, any>) => {
    return request<T>({ url, method: 'put', data })
  },
  delete: <T>(url: string, data?: Record<string, any>) => {
    return request<T>({ url, method: 'delete', data })
  },
}

export default RequestHandler

再谈网络请求封装 ​

完整代码 ​

再谈网络请求封装

完整代码