一、Promise 是什么?
1.理解
- Promise是一门新的技术(ES6规范)
- Promise是JS中进行异步编程的新解决方案。(旧方案是使用回调函数)
- Promise是一个构造函数
- Promise对象用来封装一个异步操作并可以获取其成功/失败的结果值
常用的异步编程有 fs文件操作、数据库操作、AJAX、定时器等
2.好处
支持链式调用,可以解决回调地狱问题
1.回调地狱
回调函数嵌套调用,外部回调函数异步执行的结果是嵌套的回调执行的条件
setTimeout(()=>{
console.log("等三秒后");
setTimeout(() => {
console.log("再等三秒");
setTimeout(() => {
console.log("又三秒后");
}, 3000);
}, 3000);
},3000)
2.链式调用
fetch("https://...")
.then((response)=>response.json())
.then((json)=>console.log(json));
二、Promise的使用
1.构造Promise
new Promise( function (resolve, reject) { // ...... } );
Promise 构造函数只有一个参数,是一个函数,这个函数在构造之后会直接被异步运行,所以我们称之为起始函数。起始函数包含两个参数 resolve 和 reject。
- resolve 和 reject 都是函数
- 调用 resolve 代表一切正常
- 调用reject 代表出现异常
2.Promise的三个状态
总结:最初创建对象的状态是pending,当调用了 resolve方法时就会进入 fulfilled 状态,当调用reject方法 ,就会进入 rejected 状态。当状态一旦发送改变,就不会重新改变,例如已经从pending到 fulfilled 了就不会重新改变到rejected。
示例代码:
let num = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(1);
reject(2);
}, 2000);
});
console.log(num);
3.Promise工作流程
4.Promise方法
3.1 .then()
用于得到成功value的成功回调和用于得到失败reason的失败回调,返回一个新的promise对象
.then(onResolved,onRejected) =>{}
- onResolved 函数:成功的回调函数 (value)=>{}
- onRejected 函数:失败的回调函数 (reason)=>{}
new Promise((resolve,reject)=>{
resolve(123)
})
.then( (res)=>{ console.log(res+'成功') },(err)=>{ console.log(err+'失败') })
3.2 .catch()
当接收处理的 rejected状态时,.catch()用于解决会报出Uncaught (in promise) 的问题
.catch(onRejected) =>{}
new Promise((resolve, reject) => {
reject(123);
}) .then((res) => console.log(res + "成功"))
.catch((res) => console.log(res + "失败"));
3.3 .finally()
new Promise((resolve,reject)=>{
resolve('123')
}).then(res=>console.log(res+'成功就会执行'))
.catch(err=>{console.log(err+'失败就会执行')})
.finally(()=>{console.log('不管成功还是失败都会执行');})