JS学习笔记 - Promise

一、概念

Promise对象

ECMAScript 6 中提供了Promise对象，用来传递异步操作的消息，它代表了一个异步操作的最终完成或者失败。

状态

Promise对象代表一个异步操作，具有以下三种状态：

状态	含义
pending	初始状态
fulfilled	操作成功完成
rejected	操作失败

状态不变性

一旦Promise对象的状态改变，就不会再改变。

只要Promise对象的状态从Pending变为Resolved或Rejected，状态就不会再改变了。

二、使用

使用Promise对象

Promise的构造函数接收一个函数作为参数，该函数具有两个参数:resolve,reject，分别表示异步操作执行成功(resolved)或失败(rejected)后的回调函数。

var example = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve("Resolved")
    },2000)
})
console.log("Promise对象创建后的操作")
example.then(value=>{
    console.log(value)
})
/* 输出内容
Promise对象创建后的操作
Resolved
*/

由示例代码可见，Promise对象执行的是异步操作，并不会阻塞程序继续运行。

链式操作- Promise.prototype.then()

Promise.prototype.then() 方法返回一个新的Promise对象，因此可以进行链式操作。

后一个回调函数会以前一个回调函数的返回值作为参数。

var example = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve(1)
    },2000)
})
example.then(value=>{
    console.log(value)
    return value
}).then(value=>{
    value *= 2
    console.log(value)
    return value
}).then(value=>{
    value *= 2
    console.log()
})
/* 输出内容
1
2
4
*/

Reject处理

Promise.prototype.then() 方法可以传入两个回调函数作为参数，第一个回调函数为成功(Resolved)时调用的函数，第二个回调函数为失败(Rejected)时调用的函数。

//num将在两次运行中分别定义为10和3
var example = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        if(num > 5)
            resolve(num)
        else
            reject(num)
    })
})
example.then(value=>{
    console.log("Resolved ",num)
},reason=>{
    console.log("Rejected ",num)
})
/*
输出内容1：Resolved 10
输出内容2：Rejected 3
*/

语法糖 - Promise.prototype.catch()

Promise.prototype.catch() 方法是一个语法糖，用于指定发生错误时(rejected)的回调函数。

var example = new Promise((resolve,reject)=>{
    reject("Rejected")
})
example.then(value=>{
    console.log(value)
}, error=>{
    console.log(value)
})
/* 输出内容
Rejected
*/
example.then(value=>{
    console.log(value)
}).catch(error=>{
    console.log(error)
})
/* 输出内容
Rejected
*/

由示例可见，两种方法都可用于指定Promise的状态变为Rejected时的回调函数。

Promise.prototype.finally()

Promise.prototype.finally() 方法返回一个Promise，它为Promise指定了状态产生任意变化后执行的回调函数。

var example = new Promise((resolve,reject)=>{
    reject("Rejected")
})
example.catch(error=>{
    console.log(error)
}).finally(()=>{
    console.log("完成")
})
/* 输出内容
Rejected
完成
*/

无论Promise的状态变为fulfilled还是rejected，都会执行该方法定义的回调函数

Promise.all()

Promise.all() 方法用于将多个Promise实例包装成一个新的Promise实例。

Promise.all()方法的参数必须具有Iterator接口，且返回的每个成员都是Promise实例

Promise.all() 方法返回一个Promise实例，此实例返回的数组中的每个成员都是一个Promise实例

该方法包装的数组中的所有Promise实例的状态都变味fulfilled时，Promise.all返回一个结果数组

当Promise数组中的任意一个实例状态变为rejected时，Promise.all立刻返回最先变为rejected状态的Promise的值

var promise1 = new Promise((resolve,reject)=>{
    resolve("1成功")
})
var promise2 = new Promise((resolve,reject)=>{
    reject("2失败")
})
var promise3 = new Promise((resolve,reject)=>{
    resolve("3成功")
})
Promise.all([promise1,promise2,promise3]).then(value=>{
    console.log(value)
}).catch(err=>{
    console.log(err)
})

/* 输出内容
2失败
*/

Promise.race()

Promise.race() 方法与Promise.all() 方法类似，都是将多个Promise实例包装成一个新的Promise

该方法包装的Promise数组中，只要有一个Promise的状态变为fulfilled或rejected，这个Promise的状态就立刻变为率先改变状态的Promise的状态

var promise1 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
		resolve("1成功")
    },1000)
})
var promise2 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
		resolve("2成功")
    },800)
})
var promise3 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
		reject("3失败")
    },1200)
})
Promise.race([promise1,promise2,promise3]).then(value=>{
    console.log(value)
})

/* 输出内容
2成功
*/

Promise.any()

该方法与Promise.all 和Promise.race() 有相似之处，都接收一个Promise数组座位参数

但在某些方面，它和上述二者又不相同。Promise.any() 返回的是第一个状态变为fulfilled的Promise的值，如果一个都没有成功，则返回一个AggregateError类型的实例

var promise1 = new Promise((resolve,reject)=>{
    resolve("1成功")
})
var promise2 = new Promise((resolve,reject)=>{
    resolve("2成功")
})
var promise3 = new Promise((resolve,reject)=>{
    resolve("3成功")
})
Promise.any([promise1,promise2,promise3]).then(value=>{
    console.log(value)
})

/* 输出内容
1成功
*/

var promise1 = new Promise((resolve,reject)=>{
    reject("1失败")
})
var promise2 = new Promise((resolve,reject)=>{
    reject("2失败")
})
var promise3 = new Promise((resolve,reject)=>{
    reject("3失败")
})
Promise.any([promise1,promise2,promise3]).catch(err=>{
    console.log(err)
})

/* 输出内容
AggregateError: No Promise in Promise.any was resolved
*/

Promise.allSettled()

Promise.allSettled 方法接收一个Promise数组，当数组中的所有Promise的状态都变为fulfilled或rejected时，这个Promise返回一个对象数组，每个对象表示对应的Promise的结果

var promise1 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
		resolve("1成功")
    },1000)
})
var promise2 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
		resolve("2成功")
    },800)
})
var promise3 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
		reject("3失败")
    },1200)
})
Promise.allSettled([promise1,promise2,promise3]).then(value=>{
    console.log(value)
})

/* 输出内容
0: {status: "fulfilled", value: "1成功"}
1: {status: "fulfilled", value: "2成功"}
2: {status: "rejected", reason: "3失败"}
*/