一、Promise介绍
Promise是一种解决异步编程的方案,在ES6(ECMAScript 6)中被正式引入。Promise对象表示一个异步操作的最终完成(或失败)及其结果值。它提供了一种更好的异步编程解决方案,避免了回调地狱(Callback Hell)。
二、Promise基本用法
Promise有三种状态:Pending(进行中)、Fulfilled(已成功)和Rejected(已失败)。初始状态是Pending。状态只能从Pending转变为Fulfilled或Rejected。
const promise = new Promise((resolve, reject) => { //异步操作 if(异步操作成功){ resolve(data) }else{ reject(err) } })
Promise实例存在一个then方法,用于指定异步操作成功或失败后的回调函数,返回一个新的Promise实例。
promise.then((data) => { console.log(data) }).catch((err) => { console.log(err) })
三、小程序中的Promise
小程序提供了wx.Promise用于实现Promise。具体使用方式和原生JavaScript Promise一样。
const promise = new wx.Promise((resolve, reject) => { //异步操作 if(异步操作成功){ resolve(data) }else{ reject(err) } }) promise.then((data) => { console.log(data) }).catch((err) => { console.log(err) })
四、Promise.all
Promise.all方法将多个Promise实例包装成一个新的Promise实例,等到所有的异步操作都完成,才会触发then方法。
const promise1 = new wx.Promise((resolve, reject) => { resolve('promise1'); }) const promise2 = new wx.Promise((resolve, reject) => { resolve('promise2'); }) wx.Promise.all([promise1, promise2]).then((result) => { console.log(result); }).catch((err) => { console.log(err); })
五、Promise.race
Promise.race方法同样将多个Promise实例包装成一个新的Promise实例,但是只要有一个实例率先改变状态,新的Promise实例就立即改变状态。
const promise1 = new wx.Promise((resolve, reject) => { setTimeout(resolve, 1000, 'promise1'); }) const promise2 = new wx.Promise((resolve, reject) => { setTimeout(resolve, 500, 'promise2'); }) wx.Promise.race([promise1, promise2]).then((result) => { console.log(result); }).catch((err) => { console.log(err); })
六、async/await
async/await是基于Promise实现的一种异步编程的新方法。async表示函数返回一个Promise对象,await表示等待Promise返回结果。
async function demo() { try { const result = await new wx.Promise((resolve, reject) => { setTimeout(resolve, 1000, 'hello world'); }); console.log(result); } catch (err) { console.log(err); } } demo();
七、小结
通过对微信小程序Promise的详细讲解,我们可以看到Promise作为解决异步编程的方案,在小程序中的应用也是非常广泛的。熟练掌握Promise并结合async/await的使用可以使我们编写的小程序更加高效,代码可维护性也更高。