promise初體驗,小白也能看懂

語言: CN / TW / HK

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,所以下面的程式碼塊也不會執行。

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