欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

对Promise的个人理解

程序员文章站 2022-07-02 23:20:45
...

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);
    })

输出结果是
对Promise的个人理解
当把resolve('成功')改成reject('失败') 时,输出的结果是
对Promise的个人理解
所以我们可以看出,前一个promise实例的状态会影响后面实例的状态

Promise.prototype上的一些方法

  1. Promise.prototype.then
  2. Promise.prototypev.catch
  3. Promise.prototype.finally
//三种方法返回的都是Promise实例,后面可以继续跟then方法
Promise(resolve,reject=>{
}).then() //一般用来执行resolved的回调函数
.catch() //捕获错误或异常信息
.finally()//不管Promise实例的状态如何都会执行

Promise上的方法

  1. Promise.all
  2. Promise.race
  3. Promise.allSettled
  4. Promise.any
  5. Promise.resolve
  6. 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)
    })
相关标签: js js