京东NutUI组件库网络请求最佳实践：拦截器封装与API管理
项目地址: https://gitcode.com/gh_mirrors/nu/nutui 还在为Vue项目中的网络请求管理而头疼？在移动端开发中，优雅的网络请求处理是提升用户体验的关键。本文将为你揭秘如何在NutUI项目中实现专业的网络请求封装。
读完本文，你将掌握：
- ✅ NutUI拦截器核心原理与应用
- ✅ 基于Axios的企业级请求封装方案
- ✅ 多环境API配置与错误统一处理
- ✅ 请求取消与防抖最佳实践
- ✅ 与NutUI组件深度集成的技巧
NutUI拦截器机制解析
NutUI内置了强大的拦截器系统，位于 src/packages/utils/Interceptor.ts，这是一个通用的异步拦截处理工具：
export const funInterceptor = (
interceptor: Interceptor | undefined,
{
args = [],
done,
canceled
}: {
args?: unknown[]
done: (val?: any) => void
canceled?: () => void
}
) => {
// 支持Promise和同步两种拦截方式
if (interceptor) {
const returnVal = interceptor(...args)
// ... 处理逻辑
}
}
基于Axios的企业级封装方案
1. 基础请求实例配置
创建 src/utils/request.ts：
import axios from 'axios'
import { showToast } from '@nutui/nutui'
const request = axios.create({
baseURL: process.env.VUE_APP_API_BASE,
timeout: 10000,
headers: {
'Content-Type': 'application/json'
}
})
2. 请求拦截器 - 自动添加Token
request.interceptors.request.use(
(config) => {
const token = localStorage.getItem('token')
if (token) {
config.headers.Authorization = `Bearer ${token}`
}
return config
},
(error) => Promise.reject(error)
)
3. 响应拦截器 - 统一错误处理
request.interceptors.response.use(
(response) => {
const { code, data, message } = response.data
if (code === 200) {
return data
} else {
showToast.fail(message || '请求失败')
return Promise.reject(new Error(message))
}
},
(error) => {
showToast.fail('网络异常，请检查网络连接')
return Promise.reject(error)
}
)
多环境API管理
创建 src/config/api.ts：
export const API_CONFIG = {
development: {
baseURL: 'https://dev-api.example.com'
},
test: {
baseURL: 'https://test-api.example.com'
},
production: {
baseURL: 'https://api.example.com'
}
}
export const API_ENDPOINTS = {
USER: {
LOGIN: '/auth/login',
PROFILE: '/user/profile',
UPDATE: '/user/update'
},
PRODUCT: {
LIST: '/products',
DETAIL: '/product/:id'
}
}
与NutUI组件深度集成
Loading状态集成
import { showLoading, hideLoading } from '@nutui/nutui'
export const withLoading = async (promise: Promise<any>) => {
showLoading({ content: '加载中...' })
try {
const result = await promise
return result
} finally {
hideLoading()
}
}
// 使用示例
const fetchUserData = () => withLoading(request.get(API_ENDPOINTS.USER.PROFILE))
下拉刷新集成
在NutUI的PullRefresh组件中集成：
<template>
<nut-pull-refresh @refresh="onRefresh">
<user-list :data="userData" />
</nut-pull-refresh>
</template>
<script setup>
const onRefresh = async () => {
await fetchUserData()
}
</script>
高级特性：请求取消与防抖
请求取消机制
const CancelToken = axios.CancelToken
const source = CancelToken.source()
export const cancellableRequest = (config) => {
return request({
...config,
cancelToken: source.token
})
}
// 取消所有请求
export const cancelAllRequests = () => {
source.cancel('操作取消')
}
搜索防抖实现
import { debounce } from 'lodash-es'
export const debouncedSearch = debounce(async (keyword) => {
const result = await request.get('/search', { params: { keyword } })
return result
}, 300)
完整示例：用户模块封装
创建 src/services/userService.ts：
import { request } from '../utils/request'
import { API_ENDPOINTS } from '../config/api'
import { showNotify } from '@nutui/nutui'
export const userService = {
// 登录
login: async (credentials) => {
try {
const data = await request.post(API_ENDPOINTS.USER.LOGIN, credentials)
localStorage.setItem('token', data.token)
showNotify.success('登录成功')
return data
} catch (error) {
showNotify.fail('登录失败')
throw error
}
},
// 获取用户信息
getProfile: async () => {
return await request.get(API_ENDPOINTS.USER.PROFILE)
},
// 更新用户信息
updateProfile: async (profileData) => {
const data = await request.put(API_ENDPOINTS.USER.UPDATE, profileData)
showNotify.success('更新成功')
return data
}
}
性能优化建议
- 请求缓存: 对频繁请求的数据添加缓存机制
- 图片懒加载: 使用NutUI的LazyLoad组件优化图片加载
- 代码分割: 按需加载API模块，减少初始包体积
- 错误重试: 实现自动重试机制提升用户体验
总结
通过本文的封装方案，你可以在NutUI项目中构建出健壮、易维护的网络请求层。关键要点：
- 🎯 利用NutUI拦截器实现统一处理
- 🚀 基于Axios打造企业级请求库
- 🔧 完善的错误处理和Loading状态管理
- 📦 模块化的API服务组织方式
- ⚡ 性能优化和高级特性支持
这种封装不仅提升了开发效率，更重要的是为用户提供了流畅稳定的使用体验。现在就开始在你的NutUI项目中实践这些最佳实践吧！
如果本文对你有帮助，请点赞、收藏、关注三连支持！下期我们将深入探讨NutUI组件库的国际化实战方案。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
