uniapp 异步任务如何实现

在uniapp中如何实现异步任务？比如需要同时发起多个网络请求，或者执行一些耗时操作后再更新页面数据。有没有推荐的写法或最佳实践？用Promise还是async/await更好？另外在uniapp中对异步任务有哪些限制或需要注意的地方？

2 回复

在 UniApp 中，异步任务可以通过以下方式实现：

  1. Promise：使用 new Promise() 封装异步操作，结合 then() 和 catch() 处理结果和错误。
  2. async/await：在函数前加 async，用 await 等待异步操作完成，代码更简洁。
  3. 回调函数：部分 API 支持回调，如 uni.request 的 success 和 fail 回调。

示例（async/await）：

async function fetchData() {
  try {
    const res = await uni.request({ url: '...' });
    console.log(res.data);
  } catch (err) {
    console.error(err);
  }
}

在 UniApp 中，异步任务主要通过以下几种方式实现，适用于处理非阻塞操作（如网络请求、定时器、文件读写等）：

1. Promise

使用 Promise 封装异步操作，支持链式调用。

function fetchData() {
  return new Promise((resolve, reject) => {
    uni.request({
      url: 'https://api.example.com/data',
      success: (res) => resolve(res.data),
      fail: (err) => reject(err)
    });
  });
}

// 调用
fetchData()
  .then(data => console.log('数据获取成功:', data))
  .catch(error => console.error('失败:', error));

2. async/await

结合 async/await 语法，使异步代码更清晰（需在异步函数中使用）：

async function loadData() {
  try {
    const data = await fetchData(); // 等待 Promise 完成
    console.log('加载的数据:', data);
  } catch (error) {
    console.error('请求出错:', error);
  }
}
loadData();

3. UniApp 内置异步 API

UniApp 的 API（如 uni.request、uni.downloadFile）本身支持回调函数，可配合上述方法使用：

uni.request({
  url: 'https://api.example.com/info',
  success: res => console.log(res.data),
  fail: err => console.log(err)
});

4. 定时任务

使用 setTimeout 或 setInterval 实现延迟或重复异步操作：

setTimeout(() => {
  console.log('延迟执行');
}, 1000);

注意事项：

  • 页面生命周期：在 onLoad 等生命周期中可直接使用异步方法。
  • Vue 响应式：异步更新数据时，需确保在 Vue 实例内使用 this 赋值以触发视图更新。
  • 错误处理：务必用 try/catch 或 .catch() 捕获异常，避免程序崩溃。

示例：组合使用

export default {
  methods: {
    async initPage() {
      try {
        const userInfo = await this.getUserInfo();
        const list = await this.getList();
        this.user = userInfo;
        this.dataList = list;
      } catch (e) {
        uni.showToast({ title: '加载失败', icon: 'none' });
      }
    },
    getUserInfo() {
      return new Promise((resolve, reject) => {
        uni.request({
          url: '/api/user',
          success: res => resolve(res.data),
          fail: reject
        });
      });
    }
  },
  onLoad() {
    this.initPage();
  }
};

以上方法可灵活应对 UniApp 中的异步场景，推荐优先使用 async/await 提升代码可读性。

回到顶部