TaskPool 方法不会阻塞 UI，如果做上传图片的功能加载 Loading 记得使用 TaskPool，Promise、Async/Await 都会阻塞 UI
【引言】
发现 Promise 可能会阻塞 UI，尝试使用 async 或 await，但发现它们仍然会导致阻塞。后来看到 chaoxiaoshu 回复的 TaskPool 方法，发现使用该方法后 UI 不再阻塞。因此，我特意编写了一个加载弹窗进行测试，结果同样显示，只有 TaskPool 方法不会阻塞 UI。
【代码示例】
import { taskpool } from '@kit.ArkTS';
@Componentexport struct MyDialog_1 { @Prop dialogID: string @State title: string = '加载中...'
build() { Stack() { Column() { LoadingProgress() .color(Color.White).width(100).height(100) Text(this.title) .fontSize(18).fontColor(0xffffff).margin({ top: 8 }) .visibility(this.title ? Visibility.Visible : Visibility.None) } } .onClick(() => { getContext(this).eventHub.emit(this.dialogID, "关闭弹窗") }) .width(180) .height(180) .backgroundColor(0x88000000) .borderRadius(10) .shadow({ radius: 10, color: Color.Gray, offsetX: 3, offsetY: 3 }) }}
@Entry@Componentstruct Page28 { @State time3: string = "" @State isShowLoading: boolean = false
build() { Stack() { Column({ space: 20 }) { Button("【方案一】测试Promise") .type(ButtonType.Capsule) .onClick(() => { this.isShowLoading = true this.time3 = 'loading...' console.log("start call promise") testPromise(100000000).then((time) => { this.time3 = `耗时：${time}` console.log("promise then") this.isShowLoading = false }) console.log("end call promise") })
Button("【方案二】测试async await") .type(ButtonType.Capsule) .onClick(() => { this.isShowLoading = true this.time3 = 'loading...' console.log("start call promise") this.testPromise() console.log("end call promise") }) Button("【方案三】测试taskpool") .type(ButtonType.Capsule) .onClick(() => { this.isShowLoading = true this.time3 = 'loading...' let task: taskpool.Task = new taskpool.Task(concurrentFunc, 100000000); taskpool.execute(task); task.onReceiveData((time: number) => { this.time3 = `耗时：${time}`; console.log("====end") this.isShowLoading = false }) }) Text(this.time3) }.alignItems(HorizontalAlign.Start)
MyDialog_1().visibility(this.isShowLoading ? Visibility.Visible : Visibility.None) }.width('100%').height('100%')
}
//耗时操作 async testPromise() { let time = await testPromise(100000000) time = new Date().getTime() - time this.time3 = `耗时：${time}毫秒` console.log("promise then") this.isShowLoading = false }}
function testPromise(count: number): Promise<number> { return new Promise<number>((resolve) => { let time = Date.now().valueOf() let num = 0 for (let i = 0; i < count; i++) { +num } time = Date.now().valueOf() - time resolve(time) })}
@Concurrentfunction concurrentFunc(count: number): void { let time = Date.now().valueOf() let num = 0 for (let i = 0; i < count; i++) { +num } time = Date.now().valueOf() - time taskpool.Task.sendData(time);}
复制代码
【方案一：Promise】
优点：
易于理解：Promise 的语法简单，易于理解和使用。
链式调用：可以通过.then 进行链式调用，处理多个异步操作。
缺点：
阻塞 UI：在执行耗时任务时，Promise 会阻塞 UI 线程，导致 Loading 弹窗不能及时显示。
【方案二：Async/Await】
优点：
同步写法：Async/Await 使异步代码看起来像同步代码，更加直观。
错误处理：可以使用 try/catch 块处理错误，使代码更加清晰。
缺点：
阻塞 UI：与 Promise 类似，Async/Await 在执行耗时任务时仍会阻塞 UI 线程，导致 Loading 弹窗不能及时显示。
【方案三：TaskPool】
优点：
真正的异步：TaskPool 可以将耗时任务放到独立的线程中执行，不会阻塞 UI 线程，保证了 UI 的流畅性。
数据通信：通过 task.onReceiveData 可以方便地接收任务结果。
缺点：
复杂度增加：引入了多线程处理，增加了代码的复杂度和维护成本。
【使用注意事项】
任务复杂度：
如果任务较为简单且不会长时间阻塞 UI，可以考虑使用 Promise 或 Async/Await。
如果任务较为复杂且耗时较长，建议使用 TaskPool 以保证 UI 的流畅性（例如，上传图片时显示加载中）。
代码可读性：
Promise 和 Async/Await 的语法较为简单，适合初学者使用。
TaskPool 需要对多线程有一定了解，适合有经验的开发者。
性能考虑：
TaskPool 在处理大量或耗时任务时表现更优，可以显著提升应用性能。
Promise 和 Async/Await 在小任务场景下更简洁高效。
【总结】
选择合适的异步操作方案至关重要。Promise 和 Async/Await 适合处理简单的异步任务，而 TaskPool 则在处理复杂耗时任务时表现出色。根据实际需求，选择最适合的方案，能有效提升开发效率和用户体验。希望本文对您在异步操作的选择和使用上有所帮助。
评论