Promise
三种状态:pending、fulfilled、rejected
只能pending——>fulfilled或者pending——>rejected,且不可逆。
let promise=new Promise(function(resolve,reject){
// resolve函数是当promise状态由pending转为fulfilled时执行
// reject函数是promise状态由pending转为rejected时执行
// 只有当resolve或reject函数执行之后,此时promise的状态才发生变化,才能执行promise.then或promise.catch方法,且将resolve/reject的参数传递给then或catch方法
//既然如此,直接在构造函数Promise传递的参数 resolve函数中处理异步操作返回的数据就可以,为什么还要把数据在传递给then方法呢?
//hhh 个人理解这是为了解决回调地狱问题,我们可以在then中返回一个Promise实例,这样就会出现then的链式写法。
resolve('成功');
})
promise.then(data=>{
console.log(data);
return new Promise((resolve,reject)=>{
console.log('我是第二个promise实例')
// resolve('2222')
reject('333')
})
}).then(function(data){
console.log('222111')
console.log(data)
},function(error){
console.log(error);
})
输出结果是
当把resolve('成功')
改成reject('失败')
时,输出的结果是
所以我们可以看出,前一个promise实例的状态会影响后面实例的状态
Promise.prototype上的一些方法
Promise.prototype.then
Promise.prototypev.catch
Promise.prototype.finally
//三种方法返回的都是Promise实例,后面可以继续跟then方法
Promise(resolve,reject=>{
}).then() //一般用来执行resolved的回调函数
.catch() //捕获错误或异常信息
.finally()//不管Promise实例的状态如何都会执行
Promise上的方法
Promise.all
Promise.race
Promise.allSettled
Promise.any
Promise.resolve
Promise.reject
//构造函数上的方法
let p=Promise.all([p1,p2,p3]);
p.then()
//1.只有p1、p2、p3的状态都变成fulfilled,p的状态才会变成fulfilled,此时p1、p2、p3的返回值组成一个数组,传递给p的回调函数。
//2.只要p1、p2、p3之中有一个被rejected,p的状态就变成rejected,此时第一个被reject的实例的返回值,会传递给p的回调函数。
let r=Promise.race([p1,p2,p3]);
//只要p1、p2、p3之中有一个实例率先改变状态,p的状态就跟着改变。那个率先改变的 Promise 实例的返回值,就传递给p的回调函数
let s=Promise([p1,p2,p3]);
s.then() //一定是resolve
//Promise.allSettled()方法接受一组 Promise 实例作为参数,包装成一个新的 Promise 实例。只有等到所有这些参数实例都返回结果,不管是fulfilled还是rejected,包装实例才会结束。
//该方法返回的新的 Promise 实例,一旦结束,状态总是fulfilled,不会变成rejected
//我们不关心异步操作的结果,只关心这些操作有没有结束。这时,Promise.allSettled()方法就很有用。
let a=Promise.any([p1,p2,p3])
//该方法接受一组 Promise 实例作为参数,包装成一个新的 Promise 实例返回。
//只要参数实例有一个变成fulfilled状态,包装实例就会变成fulfilled状态;
//如果所有参数实例都变成rejected状态,包装实例就会变成rejected状态。
//Promise.resolve(param):将对象转为 Promise 对象
1.如果参数是一个promise实例,则原样返回
2.如果是一个thenable对象(具有then方法的对象),则会将这个对象转为promise对象并立即执行thenable对象中then方法,此时promise对象的状态就会发生变化
3.参数有,但啥也不是。 如果参数是一个原始值,或者是一个不具有then()方法的对象,则Promise.resolve()方法返回一个新的 Promise 对象,状态为resolved。
4.没有参数。Promise.resolve()方法允许调用时不带参数,直接返回一个resolved状态的 Promise 对象。
Promise.reject(param):返回一个promise实例,且该实例的状态为rejected。param会原封不动的作为参数传递给catch的reject回调函数。
用promise实现简单的封装ajax
function Ajax(url){
let promise =new Promise((resolve,reject)=>{
let xhr=new XMLHttpRequest();
xhr.open('GET',url);
xhr.responseType='json';
xhr.setRequestHeader('Accept','application/json');
xhr.onreadystatechange=function(){
if(xhr.readyState===4 &&xhr.status===200){
resolve(xhr.response)
}else{
reject(new Error(this.statusText))
}
}
xhr.send();
})
return promise
}
Ajax('https://baidu.com').then(function(json){
console.log(json)
}).catch(function(error){
console.log(error)
})