Promise及其应用

promise与异步编程的关系

• promise是异步编程的一种解决方案，是一个容器，保存着结果（一次只有一个结果）
• 从语法上看，promise是一个对象，从它可以获取异步操作的消息

promise的作用与用法

1. 介绍：
   • Promise对象代表一个异步操作，其状态不受外界影响，有pending（进行中）、fulfilled（已成功）、rejected（已失败）三种状态。
   • 状态一旦改变就不会再变化。
   • 缺点：
   （1）一旦新建就立即执行、不能取消；
   （2）如果不设置回调函数，promise内部抛出的错误不会反应到外部；
   （3）处于pending时，无法知道具体进程状态是刚开始还是即将结束

2. 作用
   解决异步回调的问题

3. 用法
   （1）promise对象是一个构造函数，用来生成promise实例：

let p = new Promise((resolve, reject) => {
        resolve("world");
      });

• 函数的两个参数为resolve和reject。它们由js引擎提供。
• 异步操作成功时，调用resolve函数，此时promise对象状态由pending变为fulfilled；
• 异步操作失败时，调用reject函数，此时promise对象状态由pending变为rejected；

（2）promise实例生成后，用then方法分别指定fulfilled（成功状态）和rejected（失败状态）的回调函数：

let p = new Promise((resolve, reject) => {
        resolve("world");
      }).then(function(value)=>{}//成功时调用
      		,function(error){//失败时调用
     	 });

promise的实例方法

• promise有then()、catch()、finally()三种实例方法

then()方法

• then()方法是为Promise对象添加状态改变时的回调函数，是异步执行
• 可以接收两个回调函数，分别对应 Promise 对象的 resolve和 rejecte函数
• 它的返回值是一个新的promise对象，与调用then方法的并不是同一个对象。
• 当.then()前的方法执行完后才会执行then()内部的程序（具体看后面例子）

catch()方法

• catch()用来捕获它前面为被处理或捕获的错误
• catch()的本质是then()方法的特例，即：then(null,err => {});
• 为了更好的语义化，一般then()方法专门处理成功态，catch方法专门处理失败态。

finally()方法

• 从当Promise的状态发生变化时，finally就会执行，无论是成功态还是失败态。
• finally无法接受参数；

promise的应用举例

求以下代码的输出顺序：

console.log( "a") ;
setTimeout(() => console.log( "b" ));
let p = new Promise(( resolve, reject) =>{
	resolve();
	console.log( "c") ;
	}).then(( ) =>{
		console.log( "d" );
	});
console.log( "e" );

答案：a->c->e->d->b
解析：
new promise: 构造一个promise函数，执行resolve，reject，会初始化resolve，reject，将resolve装到宏任务里，会返回一个promise对象
resolve（）: 将当前promise状态设置为fulfilled，为这个状态时，会执行then(),但不是马上执行，只是会把then()里面的函数（onfulfilled/onrejected）装到微任务里
rejected（）: 将当前promise状态设置为rejected
Promise的执行器函数
then（）: 只是把里面的内容放进微任务里，会返回一个新的promise对象，p接受到的是then给它的promise对象

执行顺序如下：
• 先执行脚本输出a,
• 再打开定时器，定时器会延迟，因此接着执行脚本，输出c，
• 然后马上执行then()，then()会将里面的内容放进微任务队列里
• 再接着执行脚本输出e，
• 然后开始执行微任务队列，输出d，
• 检查微任务全部执行完后，最后执行宏任务输出b

简单拓展：async/await详细用法

async

async是一个加在函数前的修饰符，被async定义的函数会默认返回一个Promise对象的resolve的值。因此对async函数可以直接.then()，返回值就是then方法传入的函数。

1. 用法：
   • 作为一个关键字放在普通函数前面，成为异步函数

let asyncFun = async function(){
    return 1;
}
asyncFun().then(val=>{
    console.log(val); // 1,1
})

• async函数一般配合await关键字使用

async getFaceResult () {
                let location = await this.getLocation(this.phoneNum);
            }

2. 优点：
   • async是基于Promise的，是进一步的一种优化，可以解决.then(）代码冗余、调用频繁等问题

await

• await 用于等待一个异步方法执行完成。
• await 修饰的如果是Promise对象,可以获取Promise中返回的内容（resolve或reject的参数），且取到值后语句才会往下执行；

async function fun(){
    let b = await new Promise((resolve,reject)=>{
        setTimeout(function(){
            resolve('啦啦啦')
        },3000)
    })
    let c = await function(){
        return '哈哈哈'
    }()
    console.log(a,b,c)
}
fun(); // 3秒后输出：  "啦啦啦" "哈哈哈"

• 反之，会将这个非promise的东西当做await表达式的结果。