uni-app 鸿蒙 next - uni.scanCode 扫码后再通过 uni.request 发起请求有较大几率失败
uni-app 鸿蒙 next - uni.scanCode 扫码后再通过 uni.request 发起请求有较大几率失败
产品分类
uni小程序SDK
手机系统
全部
页面类型
vue
SDK版本号
@dcloudio/uni-app-runtime(V2.3.18)
测试过的手机
华为 mate 70, 华为 pura 70 - 均为鸿蒙 next 5.0.1 系统
示例代码
onScanClick() {
uni.scanCode({
scanType: ['qrCode', 'barCode'],
success: (res) => {
// 不用管返回的值,都有几率复现
const code = res.result;
console.log('扫码成功');
this.doHttpRequest('hello');
}
})
},
doHttpRequest(code) {
console.log('开始请求...');
this.responseText = '';
uni.request({
url: "https://baidu.com",
method: 'POST',
data: `code=${code}`,
header: {
'content-type': 'application/x-www-form-urlencoded'
}
}).then((response) => {
// 请求成功
this.responseText = JSON.stringify(response.data);
}).catch(error => {
this.responseText = `请求失败, error: ${error.message}`;
}).finally(() => {
});
}
操作步骤
运行附件中的工程,点击 “打开 uni-app” -> 点击 “点我扫码后发起请求”,扫描任意二维码之后,在后续发起请求过程中,鸿蒙 uni sdk 有几率报错
预期结果
正常走完流程,扫码之后的请求能正常发起和响应
实际结果
扫码之后,立即调用 uni.request 会有几率 鸿蒙 uni-sdk 报错
bug描述
使用 uni 小程序 sdk 鸿蒙版 (2.3.18),在 vue 页面通过 uni.scanCode
扫码之后,通过 uni.request
发起请求,鸿蒙上的 uni-app-runtime sdk 会有几率报错:
[(-2:100000:active)] LocalStorage with ID 100000 not found!
[nweb_helper.cpp:664] web engine has been initialized
[(-2:100000:active)] LocalStorage with ID 100000 not found!
[default] [CallForNapi:3507] occur exception need return
[(native_api.cpp:1233)(napi_call_function)] pending exception when js function called, print exception info:
TypeError: Cannot read property userAgent of null
at anonymous (oh_modules/.ohpm/[@dcloudio](/user/dcloudio)+uni-app-runtime@2.3.18/oh_modules/[@dcloudio](/user/dcloudio)/uni-app-runtime/src/main/ets/uni-app-harmony/uni.api.ets:7546:27)
at anonymous (oh_modules/.ohpm/[@dcloudio](/user/dcloudio)+uni-app-runtime@2.3.18/oh_modules/[@dcloudio](/user/dcloudio)/uni-app-runtime/src/main/ets/uni-mp-sdk/sdk.js:3817:1)
at invokeApi (oh_modules/.ohpm/[@dcloudio](/user/dcloudio)+uni-app-runtime@2.3.18/oh_modules/[@dcloudio](/user/dcloudio)/uni-app-runtime/src/main/ets/uni-mp-sdk/sdk.js:3680:1)
at anonymous (oh_modules/.ohpm/[@dcloudio](/user/dcloudio)+uni-app-runtime@2.3.18/oh_modules/[@dcloudio](/user/dcloudio)/uni-app-runtime/src/main/ets/uni-mp-sdk/sdk.js:3694:1)
at anonymous (oh_modules/.ohpm/[@dcloudio](/user/dcloudio)+uni-app-runtime@2.3.18/oh_modules/[@dcloudio](/user/dcloudio)/uni-app-runtime/src/main/ets/uni-mp-sdk/sdk.js:372:1)
at anonymous (oh_modules/.ohpm/[@dcloudio](/user/dcloudio)+uni-app-runtime@2.3.18/oh_modules/[@dcloudio](/user/dcloudio)/uni-app-runtime/src/main/ets/uni-mp-sdk/sdk.js:3480:1)
at anonymous (oh_modules/.ohpm/[@dcloudio](/user/dcloudio)+uni-app-runtime@2.3.18/oh_modules/[@dcloudio](/user/dcloudio)/uni-app-runtime/src/main/ets/uni-mp-sdk/sdk.js:3575:1)
at invokeCallback (oh_modules/.ohpm/[@dcloudio](/user/dcloudio)+uni-app-runtime@2.3.18/oh_modules/[@dcloudio](/user/dcloudio)/uni-app-runtime/src/main/ets/uni-mp-sdk/sdk.js:3503:1)
at invokeSuccess (oh_modules/.ohpm/[@dcloudio](/user/dcloudio)+uni-app-runtime@2.3.18/oh_modules/[@dcloudio](/user/dcloudio)/uni-app-runtime/src/main/ets/uni-mp-sdk/sdk.js:3730:1)
at resolve (oh_modules/.ohpm/[@dcloudio](/user/dcloudio)+uni-app-runtime@2.3.18/oh_modules/[@dcloudio](/user/dcloudio)/uni-app-runtime/src/main/ets/uni-mp-sdk/sdk.js:3818:1)
at anonymous (oh_modules/.ohpm/[@dcloudio](/user/dcloudio)+uni-app-runtime@2.3.18/oh_modules/[@dcloudio](/user/dcloudio)/uni-app-runtime/src/main/ets/uni-app-harmony/uni.api.ets:8626:13)
附件内容描述:附件本身是 鸿蒙 DevEco Studio 工程,其中 Vue3Sample 是 uni-app 源码,uni-app 的产物已经以 wgt 的形式放在 DevEco Studio 工程中,在运行中被鸿蒙原生加载打开。
开发环境、版本号、项目创建方式
信息 | 详情 |
---|---|
产品分类 | uni小程序SDK |
手机系统 | 全部 |
页面类型 | vue |
SDK版本号 | @dcloudio/uni-app-runtime(V2.3.18) |
附件 | HelloWorld.zip |
更多关于uni-app 鸿蒙 next - uni.scanCode 扫码后再通过 uni.request 发起请求有较大几率失败的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
更多关于uni-app 鸿蒙 next - uni.scanCode 扫码后再通过 uni.request 发起请求有较大几率失败的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在处理 uni-app
鸿蒙平台上使用 uni.scanCode
扫码后再通过 uni.request
发起请求有较大几率失败的问题时,通常我们需要确保扫码操作与请求操作之间的时序和状态管理正确无误。以下是一个简化的代码示例,展示了如何合理地组织这两个操作,同时考虑错误处理和重试机制。
// 假设我们在一个 Vue 组件中处理扫码和请求
export default {
data() {
return {
scanResult: null, // 存储扫码结果
retryCount: 0, // 重试计数器
maxRetries: 3, // 最大重试次数
};
},
methods: {
// 扫码函数
scanQRCode() {
uni.scanCode({
success: (res) => {
this.scanResult = res.result;
this.sendRequest();
},
fail: (err) => {
console.error('扫码失败', err);
// 可添加扫码失败处理逻辑,如提示用户重试
},
});
},
// 发送请求函数
sendRequest() {
const url = 'https://your-api-endpoint.com/data';
const data = { code: this.scanResult };
uni.request({
url,
data,
method: 'POST',
success: (response) => {
console.log('请求成功', response.data);
// 处理请求成功逻辑
},
fail: (err) => {
console.error('请求失败', err);
this.handleRequestFailure(err);
},
});
},
// 请求失败处理函数
handleRequestFailure(err) {
this.retryCount++;
if (this.retryCount <= this.maxRetries) {
console.warn(`请求失败,正在重试第 ${this.retryCount} 次`);
setTimeout(() => {
this.sendRequest(); // 延迟一段时间后重试
}, 2000); // 延迟时间,可根据需要调整
} else {
console.error('请求失败超过最大重试次数');
// 可添加最终失败处理逻辑,如提示用户检查网络或稍后重试
}
},
},
};
在这个示例中,我们首先定义了一个 Vue 组件,其中包含了扫码和发送请求的逻辑。在 scanQRCode
方法中,我们使用 uni.scanCode
来启动扫码操作,并在成功获取扫码结果后调用 sendRequest
方法。在 sendRequest
方法中,我们使用 uni.request
来发送包含扫码结果的请求。
如果请求失败,handleRequestFailure
方法会被调用,该方法会记录重试次数,并在未达到最大重试次数时延迟一段时间后重新尝试发送请求。这种方式可以帮助我们处理网络波动或临时的服务不可用问题,提高应用的健壮性。
请根据实际情况调整 API 端点、请求方法、请求数据格式等细节。