ES6标准-Promise对象

目录

Promise对象的含义

Promise对象的特点

Promise对象的缺点

Promise对象的基本用法

Promise对象的简单例子

Promise新建后就会立即执行

Promise对象回调函数的参数

Promise参数不会中断运行

Promise对象的then方法

Promise对象的catch()方法

Promise状态为resolved再抛出错误是无效的

Promise使用catch()的链式写法

Promise的catch()中也有错误

Promise会吃掉错误

Promise的finally()方法

Promise对象的含义

Promise是异步编程的一种解决方案，比传统解决方案(回调函数和事件)---更合理和强大

Promise简单说就是一个容器，里面保存着某个未来才会结束的事件的结果

Promise对象的特点

• Promise对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending(进行中)、fulfilled(已成功)、rejected(已失败)，只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态
• 一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：“从pending变为fulfilled”和“从pending变为rejected”。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为“resolved(已定型)”

Promise对象的缺点

• Promise对象一旦创建，它就会立即执行，无法中途取消
• 如果不为Promise对象设置回调函数，Promise对象内部抛出的错误，不会传递到外部
• 当处于pending状态时，无法得知目前进展到哪个阶段(刚刚开始还是即将完成)

Promise对象的基本用法

ES6规定，Promise对象是一个构造函数，用来生成Promise实例

下面代码是一个Promise示例：

const promise = new Promise((resolve,reject) => {
    //...some code
    if(/* 异步操作成功 */){
        resolve(value);
    }
    else {
        reject(error)
    }
});

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject

它们是两个函数

• resolve函数：将Promise对象的状态从“未完成”变为“成功”，(即从pending变为resolved)，在异步操作成功时调用，并将异步操作的结果，作为参数传递出去
• reject函数：将Promise对象的状态从“未完成”变为“失败”(即从pending变为rejected)，在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去

Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数

promise.then((value) => {
    //success
},(error) => {
    //error
})

then方法可以接收两个回调函数作为参数，第一个回调函数是Promise对象的状态变为resolved时调用，第二个回调函数是Promise对象的状态变为rejected时调用

第二个函数是可选的，并不一定要提供，两个函数都接收Promise对象传出的值作为参数

Promise对象的简单例子

function timeout(ms){
    return new Promise((resolve,reject) => {
        setTimeout(resolve,ms,'done');
    })
}
timeout(100).then((value) => {
    console.log("value值是:",value);
})

效果：

Promise新建后就会立即执行

let promise = new Promise((resolve,reject) => {
    console.log("Promise正在进行");
    resolve();
});

promise.then(() => {
    console.log("promise 成功执行完毕")
})

console.log('间隔符')

上面代码中：

promise对象首先被创建，这个时候Promise已经开始执行

随后，我们调用promise.thn()回调函数，这是一个异步操作，它在等待Promise执行完毕

最后，我们打印出一条“间隔符”的消息，用来演示异步操作的滞后性

效果：

Promise对象回调函数的参数

在Promise对象中，如果调用resolve函数和reject函数，那么它们的参数会被传递给回调函数

reject函数的参数通常是Error对象的实例，表示跑出的错误

resolve函数的参数除了正常的值以外，还可能是另一个Promise实例，如下面代码所示：

const p1 = new Promise((resolve, reject) => {
    //...
})
const p2 = new Promise((resolve, reject) => {
    //...
    resoleve(p1);
})

p2的resolve方法将p1作为参数，即一个异步操作的结果是返回另一个异步操作

注意：“这时p1的状态决定了p2的状态，如果p1是pending，那么p2的回调函数就会等待p1的状态改变，如果p1是resolved或者rejected，那么p2的回调函数会立即执行”

再来看一个例子：

const p1 = new Promise((resolve,reject) => {
    setTimeout(() => {
        reject(new Error('error'))
    },3000);
})
const p2 = new Promise((resolve,reject) => {
    setTimeout(() => {
        resolve(p1)
    },1000)
})

p2.then((res) => {
    console.log(res)
}).catch((err) => {
    console.log(err)
})

效果：

• 上面代码中，p2的状态依赖于p1的状态，因为p2返回p1，所以p2自身的状态无效了
• 又因为p2是一个显式抛出错误的语句，所以then()回调无效，被catch()回调捕获

Promise参数不会中断运行

new Promise((resolve,reject) => {
    resolve(1);
    console.log(2);
}).then((res) => {
    console.log(res);
})

效果：

上面代码中，调用resolve()函数以后，后面的console.log()依然会执行，并且会首先打印出来

作者是因此resolve()函数会在Promise语句执行完最后一条语句后再执行

一般来说，调用resolve或reject以后，Promise的使命就完成了，后续操作应该放到then方法里面，而不应该直接卸载resolve或reject后面，所以最好在它们前面加上return语句

new Promise((resolve,reject) => {
    return resolve(1);
    console.log("我不会被打印");
})

Promise对象的then方法

Promise实例具有then方法，也就是说，then方法是定义在原型对象Promise.prototype上的

它的作用是为了Promise实例添加状态改变时的回调函数

then方法的第一个参数是resolved状态的回调函数，第二个参数是rejected状态的回调函数

then方法返回的是一个新的Promise实例(不是原先那个Promise实例)，因此可以采用链式写法，即then方法后面再调用另一个then方法

new Promise((resolve,reject) => {
    //some code
}).then((res) => {
    console.log(res)
}).then((res1) => {
    console.log(res1)
});

• 上面代码使用then方法，依次指定了两个回调函数
• 第一个回调函数完成以后，会将返回结果作为参数，传入第二个回调函数

采用链式的then，可以指定一组按照次序调用的回调函数。

这时，前一个回调函数，有可能返回的还是一个Promise对象，这时后一个回调函数，就会等待Promise对象的状态发生变化，才会被调用

new Promise((resolve,reject) => {
    resolve(1)
}).then((res) => {
    console.log(res)
    return res
}).then((res1) => {
    console.log(res1)
});

效果：

注意：“每次调用then()方法时，都会返回一个不一样的Promise对象，新Promise对象的状态取决于then()方法执行结果”

Promise对象的catch()方法

Promise.prototype.catch()方法是.then(null,rejection)或.then(undefined,rejection)的别名，用于指定发生错误时的回调函数

new Promise((resolve,reject) => {
    //some code
}).then((res) => {
    console.log(res);
}).catch((err) => {
    console.log(err);   //捕获New promise和.then()中的错误
});

上面代码中，如果Promise状态为resolved会执行then()方法，如果是rejected或者.then()抛出错误，都会被catch()方法捕获

const promise = new Promise((resolve,reject) => {
    throw new Error('test');
});

promise.catch((err) => {
    console.log(err);
});

效果：

Promise状态为resolved再抛出错误是无效的

const promise = new Promise((resolve,reject) => {
    resolve('success');
    throw new Error('error');
})

promise.then(result => {
    console.log(result);
});

promise.catch(error => {    
    console.log(error);
});

效果：

可以看到，promise对象在变为resolved状态后，再抛出错误，也不会被catch()捕获

注意：“Promise的状态一旦改变，就永久保持该状态，不会再变了”

Promise使用catch()的链式写法

const test = () => {
    return new Promise((resolve,reject) => {
        //下面一行会报错，x是未定义的变量
        resolve(x + 2);
    })
}

test().catch((err) => {
    console.log("promise 错误:",err);
}).then((res) => {
    console.log("我是catch()返回Promise对象的then");
})

效果：

• 上面代码运行完catch()方法指定的回调函数，会接着运行后面那个then()方法指定的回调函数，如果没有报错，则会跳过catch()方法

const test = () => {
    return new Promise((resolve,reject) => {
        resolve("没有错误");
    })
}

test().catch((err) => {
    console.log("promise 错误:",err);
}).then((res) => {
    console.log("我是catch()返回Promise对象的then");
})

效果：

因为上面代码没有报错，跳过了catch()方法，直接执行后面的then()方法

此时要是then()方法里面报错，就与前面的catch()无关了

Promise的catch()中也有错误

const test = () => {
    return new Promise((resolve,reject) => {
        //下面一行会报错，x是未定义的变量
        resolve(x + 2);
    })
}

test().catch((err) => {
    console.log("我是test()的错误",err);
    resolve(y + 2);
}).catch((err) => {
    console.log("我是catch()的错误",err);
})    

效果：

可以看到，在catch()中出现错误，需要后面再添加一个catch()用来捕获第一个catch()出现的错误，如果不再添加一个catch()，那么第一个catch()的错误将不会被捕获

注意：“在catch()和then()中的错误，会传递到代码外部！！！！”

const test = () => {
    return new Promise((resolve,reject) => {
        //下面一行会报错，x是未定义的变量
        resolve(x + 2);
    })
}

test().catch((err) => {
    console.log("我是test()的错误",err);
    y + 2;
})
console.log("我是全局的console.log");

效果：

Promise会吃掉错误

如果没有使用catch()方法指定错误处理函数，Promise对象抛出的错误不会传递到外部代码，即不会有任何反应

const test = () => {
    return new Promise((resolve,reject) => {
        //下面一行会报错，x是未定义的变量
        resolve(x + 2);
    })
}

console.log("我正常打印,没有反应");

效果：

可以看到，此时没有任何错误信息

这表明Promise内部的错误不会影响到Promise外部的代码

Promise的finally()方法

finally()方法用于指定不管Promise对象最后状态如何，都会执行的操作

promise.then(()=>{...}).catch(()=>{...}).finally(()=>{...})

上面代码中，不管promise最后的状态如何，在执行外then或catch指定的回调函数以后，都会执行finally方法指定的回调函数

• finally方法的回调函数不接受任何参数，这意味着没有办法知道，前面的Promise状态到底是resolved还是rejected

finally本质上是then()方法的特例：

promise
.finally(() => {
  // 语句
});
// 等同于
promise
.then(
  result => {
    // 语句
    return result;
  },
  error => {
    // 语句
    throw error;
  }
);

上面代码中，如果不使用finally方法，同样的语句需要为成功和失败两种情况各写一次

有了finally方法，则只需要写一次