vue3+axios+ts+vite 封装统一请求api

项目结构

主要两个文件 api.ts(接口封装文件) requist.ts(请求头封装文件)

requist.ts文件中（请求头api处理以及是否有回调）

import axios from 'axios'
import { load } from '../utils/load' //封装的全局请求接口相应时的lodaing
const user = JSON.parse(localStorage.getItem('userData'))//用户信息
const loginStepMethod = JSON.parse(localStorage.getItem('loginStep'))//是否登录
const service = axios.create({
	// baseURL: 'https://xxxxx.7mmx.com', // url = base url + request url
	baseURL: 'https://overseas-dev.7mmx.com',
	// withCredentials: true, // send cookies when cross-domain requests
	timeout: 20000, // 设置超时时间为20秒
})
service.interceptors.request.use(
	(config) => {
		load.show()
		config.headers['Authorization'] = user.token.token
		return config
	},
	(error) => {
		toast.warning(error.message ?? 'No response')
		// 对请求错误做些什么
		return Promise.reject(error)
	}
)

service.interceptors.response.use(
	(response) => {
		return response
	},
	(error) => {
		return Promise.reject(error)
	}
)

// 添加响应拦截器
service.interceptors.response.use(
	function (response) {
		if (response.data.code == 401) {
			loginStepMethod.setIsshowLogin(true)
		}
		// 2xx 范围内的状态码都会触发该函数。
		// 对响应数据进行格式化
		if (response.data) {
			load.hide()
			return response.data
		}
		return response
	},
	function (error) {
		const status = error.response?.status
		let { msg, message } = error.response?.data ?? {}
		if (!msg && message) {
			msg = message
		}
		if (!msg) {
			switch (status) {
				case 400:
					msg = 'Parameter error'
					break
				case 500:
					msg = 'Server Error'
					break
				case 404:
					msg = 'Router not found'
					break
				default:
					msg = error.message ?? 'No response'
					break
			}
		}
		toast.warning(msg)
		// 超出 2xx 范围的状态码都会触发该函数。
		// 对响应错误做点什么
		return Promise.reject(error)
	}
)

export default service
;

api.ts文件

去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.

import requist from './requist'

interface ReqLogin {
	name: string
	paw: string
}
interface ReqStatus {
	id: string
	navStatus: string
}

type Res<T> = Promise<ItypeAPI<T>>
interface ItypeAPI<T> {
	data: T //请求的数据，用泛型
	msg: string | null // 返回状态码的信息，如请求成功等
	code: number //返回后端自定义的200，404，500这种状态码
}

//

// get 请求 不带参数
export const getSoulBalance = (): Res<null> =>
	requist.get('xxxxx/xxxxx/balance')


// get 请求 带参数 且路径需要拼接ID
export const getLogisticsOrderDetail = (deliveryId: number): any =>
	requist.get(`/xxxxxr/xxxxxx/getLogisticsOrderDetail/${deliveryId}`, {
	})



export const generateConfirmOrder = (params: {
	count: number
	couponId: number
	isCoupon: boolean
	isGem: boolean
}): any =>
	requist.get(
		`//XXXXX/v3/XXXXXXX/${params.couponId}`,
		{ params }
	)


// post请求
export const getPickUpInventory = (data: ReqLogin): Res<string> =>
    requist.post("/xxxxxx/xxxxxx/getPickUpInventory", data);