解决方案

1. 基础Promise使用

/**
 * Promise基础
 */
function loadData(): Promise<Item[]> {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' }
      ];
      
      // ✅ 成功时调用resolve
      resolve(data);
      
      // ❌ 失败时调用reject
      // reject(new Error('加载失败'));
    }, 1000);
  });
}

// ✅ 使用Promise
loadData()
  .then(data => {
    console.info('加载成功:', data.length);
  })
  .catch(err => {
    console.error('加载失败:', err);
  })
  .finally(() => {
    console.info('加载完成');
  });

2. async/await语法

/**
 * async/await简化异步代码
 */
@Component
struct DataPage {
  @State items: Item[] = [];
  @State isLoading: boolean = false;
  
  async aboutToAppear(): Promise<void> {
    await this.loadData();
  }
  
  async loadData(): Promise<void> {
    this.isLoading = true;
    
    try {
      // ✅ await等待Promise完成
      const items = await ItemDao.findAll();
      this.items = items;
      
    } catch (err) {
      console.error('加载失败:', err);
      promptAction.showToast({ message: '加载失败' });
      
    } finally {
      this.isLoading = false;
    }
  }
  
  build() {
    if (this.isLoading) {
      LoadingProgress();
    } else {
      List() {
        ForEach(this.items, (item: Item) => {
          ListItem() {
            Text(item.name);
          }
        })
      }
    }
  }
}

3. 并发执行

/**
 * Promise.all: 并发执行,全部完成
 */
async function loadAllData(): Promise<void> {
  try {
    // ✅ 并发执行3个请求
    const [items, categories, tags] = await Promise.all([
      ItemDao.findAll(),
      CategoryDao.findAll(),
      TagDao.findAll()
    ]);
    
    console.info('全部加载完成');
    console.info('物品数量:', items.length);
    console.info('分类数量:', categories.length);
    console.info('标签数量:', tags.length);
    
  } catch (err) {
    // ❌ 任何一个失败都会进入catch
    console.error('加载失败:', err);
  }
}

/**
 * Promise.allSettled: 等待全部完成(无论成功失败)
 */
async function loadDataSafely(): Promise<void> {
  const results = await Promise.allSettled([
    ItemDao.findAll(),
    CategoryDao.findAll(),
    TagDao.findAll()
  ]);
  
  results.forEach((result, index) => {
    if (result.status === 'fulfilled') {
      console.info(`第${index + 1}个请求成功:`, result.value.length);
    } else {
      console.error(`第${index + 1}个请求失败:`, result.reason);
    }
  });
}

4. 竞速执行

/**
 * Promise.race: 返回最快完成的
 */
async function loadWithTimeout(): Promise<Item[]> {
  // ✅ 设置5秒超时
  const timeout = new Promise<Item[]>((_, reject) => {
    setTimeout(() => {
      reject(new Error('请求超时'));
    }, 5000);
  });
  
  // ✅ 竞速:谁先完成返回谁
  return await Promise.race([
    ItemDao.findAll(),  // 实际请求
    timeout             // 超时控制
  ]);
}

5. 顺序执行

/**
 * 顺序执行多个异步操作
 */
async function sequentialOperations(): Promise<void> {
  // ✅ 顺序执行
  const item = await ItemDao.findById(1);
  const category = await CategoryDao.findById(item.categoryId);
  const tags = await TagDao.findByItemId(item.id);
  
  console.info('物品:', item.name);
  console.info('分类:', category.name);
  console.info('标签:', tags.length);
}

/**
 * 批量顺序执行
 */
async function batchSequential(ids: number[]): Promise<Item[]> {
  const items: Item[] = [];
  
  // ✅ for...of 顺序执行
  for (const id of ids) {
    const item = await ItemDao.findById(id);
    items.push(item);
    
    // 每次查询间隔100ms
    await new Promise(resolve => setTimeout(resolve, 100));
  }
  
  return items;
}

6. 错误处理最佳实践

/**
 * 完整的错误处理
 */
@Component
struct SafeDataPage {
  @State items: Item[] = [];
  @State error: string = '';
  @State isLoading: boolean = false;
  
  async loadData(): Promise<void> {
    this.isLoading = true;
    this.error = '';
    
    try {
      // ✅ 主要逻辑
      const items = await ItemDao.findAll();
      
      if (items.length === 0) {
        throw new Error('暂无数据');
      }
      
      this.items = items;
      
    } catch (err) {
      // ✅ 错误分类处理
      if (err instanceof Error) {
        this.error = err.message;
      } else {
        this.error = '未知错误';
      }
      
      console.error('加载失败:', err);
      
    } finally {
      // ✅ 无论成功失败都执行
      this.isLoading = false;
    }
  }
  
  build() {
    Column() {
      if (this.isLoading) {
        LoadingProgress();
      } else if (this.error) {
        Text(this.error).fontColor(Color.Red);
      } else {
        List() {
          ForEach(this.items, (item: Item) => {
            ListItem() {
              Text(item.name);
            }
          })
        }
      }
    }
  }
}

7. 实战案例

/**
 * 保存数据并更新UI
 */
@Component
struct ItemEditPage {
  @State isSaving: boolean = false;
  private item: Item = new Item();
  
  async onSave(): Promise<void> {
    if (this.isSaving) {
      return;  // 防止重复提交
    }
    
    this.isSaving = true;
    
    try {
      // ✅ 1. 验证数据
      this.validateData();
      
      // ✅ 2. 保存到数据库
      const itemId = await ItemDao.insert(this.item);
      
      // ✅ 3. 更新卡片
      await FormDataService.getInstance().updateAllForms();
      
      // ✅ 4. 提示成功
      promptAction.showToast({ message: '保存成功' });
      
      // ✅ 5. 返回上一页
      router.back();
      
    } catch (err) {
      // ❌ 错误处理
      let message = '保存失败';
      
      if (err instanceof Error) {
        if (err.message.includes('UNIQUE')) {
          message = '名称已存在';
        } else {
          message = err.message;
        }
      }
      
      promptAction.showToast({ message });
      
    } finally {
      this.isSaving = false;
    }
  }
  
  validateData(): void {
    if (!this.item.name) {
      throw new Error('请输入名称');
    }
    
    if (this.item.name.length > 100) {
      throw new Error('名称不能超过100字');
    }
  }
  
  build() {
    Column() {
      Button('保存')
        .enabled(!this.isSaving)
        .onClick(() => {
          this.onSave();
        })
    }
  }
}

关键要点

1. Promise状态

// Pending(进行中) → Fulfilled(成功) 或 Rejected(失败)

const promise = new Promise((resolve, reject) => {
  // 成功
  resolve(data);
  
  // 失败
  reject(error);
});

2. async/await规则

// ✅ async函数返回Promise
async function getData(): Promise<Item[]> {
  return await ItemDao.findAll();
}

// ✅ await只能在async函数中使用
async function loadData(): Promise<void> {
  const data = await getData();  // ✅
}

// ❌ 错误:非async函数中使用await
function loadData(): void {
  const data = await getData();  // ❌ 编译错误
}

3. 错误传播

async function a(): Promise<void> {
  throw new Error('错误A');
}

async function b(): Promise<void> {
  await a();  // ✅ 错误会向上传播
}

async function c(): Promise<void> {
  try {
    await b();  // ✅ 可以在这里捕获错误A
  } catch (err) {
    console.error('捕获到错误:', err);
  }
}

最佳实践

1. 总是处理错误

// ✅ 推荐:使用try-catch
async function loadData(): Promise<void> {
  try {
    const data = await getData();
  } catch (err) {
    console.error(err);
  }
}

// ❌ 不推荐:忽略错误
async function loadData(): Promise<void> {
  const data = await getData();  // 错误会导致Promise rejected
}

2. 避免回调地狱

// ❌ 回调地狱
loadData((data) => {
  processData(data, (result) => {
    saveData(result, () => {
      console.info('完成');
    });
  });
});

// ✅ 使用async/await
async function process(): Promise<void> {
  const data = await loadData();
  const result = await processData(data);
  await saveData(result);
  console.info('完成');
}

3. 合理使用并发

// ✅ 可以并发的操作
const [items, categories] = await Promise.all([
  loadItems(),
  loadCategories()
]);

// ❌ 必须顺序执行的操作
const user = await loadUser();
const profile = await loadProfile(user.id);  // 依赖user

性能对比

总结

异步编程要点:

✅ 使用async/await简化代码 ✅ Promise.all并发执行 ✅ try-catch处理错误 ✅ finally清理资源 ✅ 避免阻塞主线程

掌握异步编程,代码更简洁高效