1Promise承诺(期约)
什么是Promise:Promis是异步编程的一种解决方案,简单来说Promise就是一个容器保存着一个未来才会结束的事件(一般是异步操作)的结果。
1.1特点
1、对象的状态不受外界影响。
2、一旦状态改变,就不会再变,任何时候都可以得到这个结果。
1.2状态
Promise对象代表一个异步操作,有三种状态:
pending(进行中)、resolved(已成功)和rejected(已失败)。
只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。
1.3缺点
1、无法取消Promise,一旦新建它就会立即执行,无法中途取消。
2、如果不设置回调函数,Promise内部抛出的错误,不会反应到外部。
举个例子:
let promise1 = new Promise((res, rej) => {
rej('11');
}).catch(err => {
console.log('err1', err);//err1 11
})
let promise2 = new Promise((res, rej) => {
rej('11');
}).then(null, err => {
console.log('err2', err);//err2 11
})
let promise3 = new Promise((res, rej) => {
rej('11');
})//报错,Uncaught (in promise) 11
3、当处于pending状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。
1.4基本用法
let promise = new Promise(function(resolve,reject){
// resolve 成功后调用
// reject 失败后调用
})
promise.then(res => {
//传入成功状态参数
},err => {
//传入失败状态参数
})
1.5 then方法
then方法返回的是一个Promise对象。因此使用then方法后还能继续使用then方法。
let aa = Promise.resolve('11');
console.log(aa.then());//Promise {: "11"}
then方法根据不同的状态,看看需要走then的第一个参数还是第二个。
resolve()和reject()的参数会传递到对应的回调函数的data或err。
aa.then(data => {
console.log(data)
},
err => {
console.log(err)
}
)
1.6捕获错误
.catch方法是.then(null, rejection)的别名,用于指定发生错误时的回调函数。
再来展示一下:
let promise1 = new Promise((res, rej) => {
rej('11');
}).catch(err => {
console.log('err1', err);//err1 11
})
let promise2 = new Promise((res, rej) => {
rej('11');
}).then(null, err => {
console.log('err2', err);//err2 11
})
讲一下then(null,err => {});用null代替resolve状态走的then的第一个参数,那么第二个自然就是失败(reject)状态走的喽。
1.7 resolve与reject方法.
可以方便的创建一个已经是成功或失败状态的Promise对象。
Promise.resolve('成功');
//等价于
new Promise((resolve,reject) => {
resolve('成功')
})
Promise.resolve('失败');
//等价于
new Promise((resolve,reject) => {
reject('失败')
})
接收参数的四种情况。
1.Promise.resolve()
1、参数是一个Promise实例
let promise = new Promise((resolve, reject) => {
resolve('成功');
})
let test1 = Promise.resolve(promise);
console.log(test1);//Promise {: "成功"}
resolve()方法保留Promise实例的状态。
2、参数是一个是具有then方法的对象。
let thenable = {
then: function(resolve, reject) {
resolve(42);
}
};
let test2 = Promise.resolve(thenable);
console.log(test2); // Promise {}
test2.then(res => {
console.log(res);//42
})
Promise.resolve方法会将thenable转为 Promise 对象,然后就立即执行thenable对象的then方法。而后对象p1的状态就变为resolved,从而立即执行最后那个then方法指定的回调函数,输出 42。
3、参数不是对象。
const p = Promise.resolve('Hello');
p.then(function (s){
console.log(s)
});
// Hello
4、不带参数。
const p = Promise.resolve();//Promise {: undefined}
2.Promise.reject()
原封不动的返回reject状态。
特别的是,当参数为包含then方法的对象时。
let thenable = {
then: function(resolve, reject) {
resolve('出错');
}
};
let test2 = Promise.reject(thenable);
test2.then(null, err => {
console.log(err); //{then: ƒ}
})
这里返回的不是 “出错” 。而是整个then对象。
3.Promise.all()
all()方法的参数都是promise对象,切必须都是resolve状态。
let p1 = Promise.resolve('p1');
let p2 = Promise.resolve('p2');
let p3 = Promise.resolve('p3');
Promise.all([p1, p2, p3]).then(res => {
let [res1, res2, res3] = res;
console.log(res1, res2, res3);//p1,p2,p3
})
//当有一个参数是reject状态时
let p1 = Promise.resolve('p1');
let p2 = Promise.reject('p2');
let p3 = Promise.resolve('p3');
Promise.all([p1, p2, p3]).then(res => {
let [res1, res2, res3] = res;
console.log(res1, res2, res3); //Uncaught (in promise) p2
})
3.Promise.race()
Promise.race([p1,p2,p3])
这个和all用法一样,唯一不同之处就是race方法,只要最前面一个resolve就可以正常执行,如果第一个是rejecj状态就报错。
let p1 = Promise.resolve('p1');
let p2 = Promise.resolve('p2');
let p3 = Promise.reject('p3');
Promise.race([p1, p2, p3]).then(res => {
console.log(res) //p1
})
//如果第一个是reject的话
let p1 = Promise.reject('p1');
let p2 = Promise.resolve('p2');
let p3 = Promise.resolve('p3');
Promise.race([p1, p2, p3]).then(res => {
console.log(res) // Uncaught (in promise) p1
})