promise初體驗，小白也能看懂

當然是選擇猿諒她了發表於2022-01-14
Promise

promise出現的目的一為處理JavaScript裡的非同步，再就是避免回撥地獄。 promise有三種狀態：pending/reslove/reject 。

pending就是未決，resolve可以理解為成功，reject可以理解為拒絕。 promise的最終狀態會凝固，成功了以後即便再執行reject ('failed')狀態也不會改變。

Promise是一個建構函式，自己身上有all、reject、resolve這幾個的方法，原型上有then、catch等同樣的方法。這麼說用Promise new出來的物件肯定就有then、catch方法。

我們建立一個例項就可以使用這些方法了。

let Mypromise = new Promise(function(resolve,reject){
                setTimeout(function(){
                    let a = 22;
                    let b = 20;
                        if(a>b){
                            // 如果走了resolve，則觸發.then，把a+b的值傳入.then
                            resolve(a+b);
                        }else{
                            // 如果走了reject，則觸發.catch，輸出err 'b>a'
                            reject('b>a');
                        }
                },2000);
            });
            // 當b>a的時候，Mypromise.then這串程式碼不會被觸發
            Mypromise.then(function(value){
                console.log('2s後');
                console.log(value,'value');
                // 如果 then 中返回的是一個 Promise 物件，那麼下一個 then 將相當於對這個返回的 Promise 進行操作
                // 記得如果還想繼續給下一個.then傳引數，就必須要return
                return new Promise(function(resolve,reject){
                    setTimeout(function(){
                        let c = 41;
                        if(c<value){
                            // 如果走了resolve，則觸發.then，把value-c的值傳入.then
                            resolve(value-c);
                        }else{
                            // 如果走了reject，則觸發.catch，輸出err 'c>value'
                            reject('c>value');
                        }
                    },1000)
                })
            }).then(function(data){
                console.log('1s後');
                console.log(data,'data');
            })
            .catch(function(err){
                console.log(err)
            })

 

可以看到這串程式碼是當a>b的時候走的resolve，否則走reject，首先我們要知道，當觸發resolve的時候就會去執行.then()，觸發reject的時候就會執行.catch(),

a=22，b=20，所以a>b，走resolve，resolve傳遞了a+b的值給了.then，

也就是把42傳遞給了.then，這個時候執行了.then()，首先輸出了value，也就是resolve傳遞下來的值，(注意這裡的value可以隨便取名)，

然後.then()中有一個新的promise，如果 then 中返回的是一個 Promise 物件，那麼下一個 then 將相當於對這個返回的 Promise 進行操作，

還有就是如果還想繼續給下一個.then傳引數，就必須要return，如果不return的話那麼結果將會變為42和undifinded，

promise 不能返回值只能返回promise，因為它是非同步的，要用就得 fn1().then(value => console.log(value)) 的方式拿到值，

所以到第二個promise的時候走了resolve，執行.then，第二個.then通過第一個.then，return把value-c的值傳到了.then中輸出了date，

 

 

 如果我們把b改為25會怎樣呢？

let Mypromise = new Promise(function(resolve,reject){
                setTimeout(function(){
                    let a = 22;
                    let b = 25;//變成了25
                        if(a>b){
                            // 如果走了resolve，則觸發.then，把a+b的值傳入.then
                            resolve(a+b);
                        }else{
                            // 如果走了reject，則觸發.catch，輸出err 'b>a'
                            reject('b>a');
                        }
                },2000);
            });
            // 當b>a的時候，Mypromise.then這串程式碼不會被觸發
            Mypromise.then(function(value){
                console.log('2s後');
                console.log(value,'value');
                // 如果 then 中返回的是一個 Promise 物件，那麼下一個 then 將相當於對這個返回的 Promise 進行操作
                // 記得如果還想繼續給下一個.then傳引數，就必須要return
                return new Promise(function(resolve,reject){
                    setTimeout(function(){
                        let c = 41;
                        if(c<value){
                            // 如果走了resolve，則觸發.then，把value-c的值傳入.then
                            resolve(value-c);
                        }else{
                            // 如果走了reject，則觸發.catch，輸出err 'c>value'
                            reject('c>value');
                        }
                    },1000)
                })
            }).then(function(data){
                console.log('1s後');
                console.log(data,'data');
            })
            .catch(function(err){
                console.log(err)
            })

 

把b改為25，b比a大所以走了reject，這時候就只輸出了一個'b>a'，

 

 因為他沒走resolve，所以自然不會觸發.then，所以下面的程式碼塊也不會執行。

 

純屬小白學習筆記，如果有不正確的，還望各位大佬指正！！！

 

 

相關文章