小程序Promise详解

小蓝 • 2024-12-12 11:56 • 编程

一、Promise概述

Promise 是异步编程的一种解决方案，解决了回调地狱，还提供了丰富的 API 用于链式调用异步任务。在小程序中，Promise 可以用于异步请求、文件读写、动画效果等多个方面，更是开发中必不可少的一部分。

二、Promise状态

Promise 只有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败），状态的变更不可逆。

const promise = new Promise((resolve,reject) => {
  // ...
  resolve('success')
  // or
  // reject('error')
})

promise.then((res) => {
  console.log(res) // success
}).catch((err) => {
  console.log(err) // error
})

三、Promise使用场景

在小程序中，Promis可以应用于很多场景。例如异步请求。

const request = (url) => {
  return new Promise((resolve, reject) => {
    wx.request({
      url,
      success(res) {
        resolve(res.data)
      },
      fail(err) {
        reject(err)
      }
    })
  })
}

// 在使用时，可以直接链式调用
request('https://api.github.com/users')
  .then((res) => {
    console.log(res)
    return request('https://api.github.com/users/test')
  })
  .then((res) => {
    console.log(res)
  })
  .catch((err) => {
    console.log(err)
  })

还可以应用于文件读写、动画效果等多个方面。下面以文件读写为例来介绍Promise的应用。

四、Promise应用：文件读写

1、读取文件内容

const readFile = (filePath) => {
  return new Promise((resolve, reject) => {
    wx.readFile({
      filePath: filePath,
      encoding: 'utf8',
      success(res) {
        resolve(res.data)
      },
      fail(err) {
        reject(err)
      }
    })
  })
}

// 调用
readFile('/xx/xx/file.txt').then((data) => {
  console.log(data)
}).catch((err) => {
  console.log(err)
})

2、写入文件内容

const writeFile = (filePath, content) => {
  return new Promise((resolve, reject) => {
    wx.writeFile({
      filePath,
      data: content,
      success() {
        resolve()
      },
      fail(err) {
        reject(err)
      }
    })
  })
}

// 调用
writeFile('/xx/xx/file.txt', 'hello world').then(() => {
  console.log('写入成功')
}).catch((err) => {
  console.log(err)
})

五、Promise扩展

Promise提供了多个API，值得掌握。下面简单介绍几个：

1、Promise.all(iterable)：接收一个 Promise 实例的 iterable 对象，当所有 Promise 实例都成功时，返回的Promise实例状态才改变。

const p1 = Promise.resolve(1)
const p2 = Promise.resolve(2)
const p3 = Promise.resolve(3)

Promise.all([p1, p2, p3]).then((res) => {
  console.log(res) // [1, 2, 3]
}).catch((err) => {
  console.log(err)
})

2、Promise.race(iterable)：接收一个 Promise 实例的 iterable 对象，只要有一个 Promise 实例状态改变，返回的 Promise 实例的状态就改变。

const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('p1')
  }, 1000)
})

const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('p2')
  }, 500)
})

Promise.race([p1, p2]).then((res) => {
  console.log(res) // p2
}).catch((err) => {
  console.log(err)
})

六、总结

Promise是异步编程中非常重要的一个概念，掌握Promise的使用对小程序开发非常有帮助。在使用过程中，我们应注意Promise的状态变更不可逆以及错误处理方法的正确使用等细节问题。同时，多了解Promise的扩展方法，能够让我们在开发中更加得心应手。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/235617.html