在Uniapp开发中，接口事件捕获是指监听和处理应用程序与服务器API交互过程中发生的各种事件。这些事件包括请求发起、响应接收、错误处理等关键节点，通过合理的事件捕获机制，开发者可以更好地控制应用的数据流和用户交互体验。
二、基本的事件捕获方法
1. 使用uni.request的基础事件处理
javascript
uni.request({
url: 'https://example.com/api/data',
method: 'GET',
success: (res) => {
console.log('请求成功', res.data);
// 成功回调处理
},
fail: (err) => {
console.error('请求失败', err);
// 失败回调处理
},
complete: () => {
console.log('请求完成');
//无论成功失败都会执行
}
});
2. Promise风格的异步处理
javascript
async function fetchData() {
try {
const res = await uni.request({
url: 'https://example.com/api/data'
});
console.log('数据获取成功', res[1].data);
// ES6解构写法
const [err, successRes] = await uni.request({
url: 'https://example.com/api/data'
});
if(err) {
throw err;
}
return successRes.data;
} catch (error) {
console.error('发生错误:', error);
uni.showToast({ title: '加载失败', icon: 'none' });
}
}
三、全局拦截器配置（高级用法）
1. request拦截器
javascript
// main.js中配置全局拦截器
uni.addInterceptor('request', {
invoke(args) {
console.log('即将发起请求:', args.url);
//可添加全局参数如token
if(!args.header) args.header = {};
args.header['Authorization'] = 'Bearer xxx';
//可修改URL等参数
if(args.url.indexOf('/api/') === -1){
args.url = '/api/v2' + args.url;
}
return args;
},
fail(err){
console.error('请求调用失败:', err);
return err;
}
});
2.response拦截器
javascript
uni.addInterceptor('request', {
returnValue(res){
if(res.statusCode !==200){
uni.showModal({
title:'提示',
content:`服务异常(${res.statusCode})`
});
return Promise.reject(res);
}
if(res.data.code !==0){
return Promise.reject(res.data);
}
return res.data.data;//只返回核心业务数据
},
});
四、常见场景解决方案
场景一：统一错误处理
javascript
//封装统一的错误处理方法 function handleError(error){
let msg='';
if(typeof error ==='string'){
msg=error;
}else if(error.errMsg){
msg=error.errMsg;
}else{
msg='系统异常';
}
uni.showToast({title:msg,icon:'none'});
if(error.code===401){
setTimeout(()=>{
uni.navigateTo({url:'/pages/login/login'}); },1500)
}
}
//在fail回调中使用 .fail(handleError)
场景二：加载状态管理
javascript
let requestCount=0;
function showLoading(){
requestCount++;
if(requestCount===1){
uni.showLoading({title:'加载中...'});
}
}
function hideLoading(){
requestCount--;
if(requestCount<=0){
uni.hideLoading();
}
}
//在拦截器中调用：
invoke(){showLoading();},
complete(){hideLoading();}
场景三：重试机制
jsx
async function requestWithRetry(options,retryTimes=3){
for(let i=0;i
const res=await uni.request(options);
return res;
}catch(e){
if(i===retryTimes-1) throw e;
await new Promise(r=>setTimeout(r,1000));
}
}
}
五、最佳实践建议
1.分层封装:基础层只做通信，业务层单独处理逻辑；
2.类型安全:对重要接口定义TypeScript类型；
3.敏感信息:不要在拦截器中硬编码密钥等敏感信息；
4.性能监控:可在complete中记录耗时用于性能分析；
5.取消机制:对耗时操作提供abort能力。
文章点评