uniapp promise如何使用或实现

在uniapp中如何使用Promise？有没有具体的实现示例？比如我想用Promise封装一个网络请求，但不太清楚该怎么写，能否给个完整的代码示范？另外，在uniapp中使用Promise和普通web开发中有哪些区别需要注意的？

2 回复

在uniapp中，Promise用于处理异步操作。基本用法：

// 创建Promise
let promise = new Promise((resolve, reject) => {
  // 异步操作
  uni.request({
    url: 'xxx',
    success: resolve,
    fail: reject
  })
})

// 使用
promise.then(res => {
  console.log('成功', res)
}).catch(err => {
  console.log('失败', err)
})

也可用async/await简化：

async function fetchData() {
  try {
    let res = await promise
    console.log(res)
  } catch(err) {
    console.log(err)
  }
}

在 UniApp 中，Promise 的使用和实现与标准 JavaScript 一致，主要用于处理异步操作（如网络请求、文件读写等）。以下是具体说明：

1. 基本使用

  • 创建 Promise：使用 new Promise() 构造函数，传入执行器函数（resolve 和 reject 参数）。

  • 示例代码：

    function asyncTask() {
  return new Promise((resolve, reject) => {
    // 模拟异步操作，如 uni.request
    setTimeout(() => {
      const success = true; // 假设操作成功
      if (success) {
        resolve("操作成功");
      } else {
        reject("操作失败");
      }
    }, 1000);
  });
}

  • 调用 Promise：通过 .then() 处理成功结果，.catch() 捕获错误。

    asyncTask()
  .then(result => {
    console.log(result); // 输出："操作成功"
  })
  .catch(error => {
    console.error(error); // 处理错误
  });

2. 在 UniApp 中的实际应用

  • 封装 uni.request（网络请求）：

    function request(url, data = {}) {
  return new Promise((resolve, reject) => {
    uni.request({
      url,
      data,
      success: (res) => resolve(res.data),
      fail: (err) => reject(err)
    });
  });
}

// 使用示例
request("https://api.example.com/data")
  .then(data => console.log(data))
  .catch(err => console.error("请求失败:", err));

  • 结合 async/await（推荐）：

    async function fetchData() {
  try {
    const data = await request("https://api.example.com/data");
    console.log("获取数据:", data);
  } catch (error) {
    console.error("错误:", error);
  }
}

3. 注意事项

  • 错误处理：务必用 .catch() 或 try/catch（配合 async/await）捕获异常，避免未处理错误。
  • 兼容性：UniApp 支持 ES6 语法，无需额外配置即可使用 Promise。

通过以上方法，可以简化异步操作，避免回调地狱，提升代码可读性和可维护性。

回到顶部