在Uniapp开发中，我们经常需要与后端API进行数据交互。良好的接口状态管理能够：
1. 统一处理加载、成功和错误状态
2. 避免重复请求
3. 简化组件中的逻辑代码
4. 提供一致的用户体验
二、基础实现方案
1. 使用Vuex进行集中式管理
javascript
// store/modules/api.js
const state = {
requests: {} // {apiName: {loading, error, data}}
}
const mutations = {
SET_API_LOADING(state, {apiName, loading}) {
if (!state.requests[apiName]) {
state.requests[apiName] = {}
}
state.requests[apiName].loading = loading
if (loading) {
state.requests[apiName].error = null
}
},
SET_API_DATA(state, {apiName, data}) {
if (!state.requests[apiName]) {
state.requests[apiName] = {}
}
state.requestsss[apiName].data = data
},
SET_API_ERROR(state, {apiName, error}) {
if (!state.requestsss[apiname]) }{
staterequestsssapiname == {}}
staterequestsssapiname.error == error}
}}
2封装请求函数示例：
javascript
// utils/request.js
import store from '@/store'
export async function fetchWithStatus(apiname fn) }{
try }{
store.commit'SETAPI_LOADING' apinametrue)
const result await fn()
store.commit'SETAPIDATA' apname result)
return result} catch (e)}{
storecommit'SETAPIERROR' apname e.message)
throw e} finally}{
storecommit'SETAPILOADING' apname false}}}}
三进阶优化方案
1自动生成action的工厂函数
javascript
// store/modules/api.js
function createApiAction(apiname apiFn)}{
return async function(context payload)}{
try}{
context.commit('SETAPILOADING'{ apnametrue})
const data await apiFn(payload)
contextcommit('SETAPIDATA'{ apnamedata})
return data} catch(e){
contextcommit('SETAPIERROR'{ apnamee.message})
throw e} finally}{
contextcommit('SETAPILOADING'{ apnamefalse})}}}
2在组件中使用mapState辅助
html
<script>
import mapState from 'vuex'
export default }{
computed:{
...mapState({
userLoading: states requests['user/get'].loading,
userError: states requests['user/get'].error,
userData: states requests['user/get'].data })},
methods:{
async getUser()}{
await this$store.dispatch('fetchUser')}}}
</script>
四最佳实践建议
1按功能模块划分API状态而不是全局混在一起
2为长时间请求添加超时处理机制
3考虑添加请求缓存策略避免重复请求
4重要操作使用乐观更新提升用户体验
5统一错误处理包括网络异常和服务端错误
6开发环境下保留完整的请求日志
通过以上方法您可以在Uniapp中建立健壮的接口状态管理系统使代码更清晰可维护性更强同时提供更好的用户体验
文章点评