当前位置：首页 > news >正文

【HarmonyOS】TaskPool非阻塞UI

news 2025/6/27 4:10:59

TaskPool方法不会阻塞UI，如果做上传图片的功能加载Loading记得使用TaskPool，Promise、Async/Await都会阻塞UI

【引言】

发现Promise可能会阻塞UI，尝试使用async或await，但发现它们仍然会导致阻塞。后来看到chaoxiaoshu回复的TaskPool方法，发现使用该方法后UI不再阻塞。因此，我特意编写了一个加载弹窗进行测试，结果同样显示，只有TaskPool方法不会阻塞UI。

【代码示例】

import { taskpool } from '@kit.ArkTS';@Component
export 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
@Component
struct Page28 {@State time3: string = ""@State isShowLoading: boolean = falsebuild() {Stack() {Column({ space: 20 }) {Button("【方案一】测试Promise").type(ButtonType.Capsule).onClick(() => {this.isShowLoading = truethis.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 = truethis.time3 = 'loading...'console.log("start call promise")this.testPromise()console.log("end call promise")})Button("【方案三】测试taskpool").type(ButtonType.Capsule).onClick(() => {this.isShowLoading = truethis.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() - timethis.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 = 0for (let i = 0; i < count; i++) {+num}time = Date.now().valueOf() - timeresolve(time)})
}@Concurrent
function concurrentFunc(count: number): void {let time = Date.now().valueOf()let num = 0for (let i = 0; i < count; i++) {+num}time = Date.now().valueOf() - timetaskpool.Task.sendData(time);
}

【方案一：Promise】

优点：

易于理解：Promise的语法简单，易于理解和使用。

链式调用：可以通过.then进行链式调用，处理多个异步操作。

缺点：

阻塞UI：在执行耗时任务时，Promise会阻塞UI线程，导致Loading弹窗不能及时显示。

【方案二：Async/Await】

优点：

同步写法：Async/Await 使异步代码看起来像同步代码，更加直观。

错误处理：可以使用try/catch块处理错误，使代码更加清晰。

缺点：

阻塞UI：与Promise类似，Async/Await在执行耗时任务时仍会阻塞UI线程，导致Loading弹窗不能及时显示。