介紹下promise的特性,優缺點，內部如何實作的，動手實作一個promise (一)-有解無憂

1.Promise 基本特性

1. Promise有三種狀態：pending(進行中),fulfilled(resolve)(已成功),reject(已失敗).
2. Promise物件接受一個回呼函式作為引數，該回呼函式接受兩個引數，分別是成功時的回呼resolve和失敗時的回呼reject；另外resolve的引數除了正常值以外還可能時一個promise物件的實體；reject的引數通常時一個error物件的實體；
3 then方法放回一個新的Promise實體，并接收兩個引數onResolve(fulfilled狀態的回呼);onRejected(reject狀態的回呼,該引數可選)
4.catch方法回傳一個新的promise實體
5. finally方法不管Promise狀態如何都會執行，該方法的回呼函式不接受任何引數，
6. Promise，all()方法將多個Promise實體，包裝成一個新的Promise實體，該方法接受一個由promise物件組成的陣列作為引數(Promise.all方法的引數可以不是陣列，但必須具有Iterator介面，且回傳的每個成員都是promise實體)，注意引數中只要有一個實體觸發catch，都會觸發，Promise.all方法回傳的新catch方法，如果引數中的某個實體本身呼叫了catch方法，將不會觸發Promise.all放回的新實體的catch方法，
7. Promise.race()方法的引數與Promise.all方法一樣，引數中的實體只要有一個率先改變狀態就會將該實體的狀態傳給Promise.race方法，并將回傳值作為Promise，race()方法產生的Promise實體的放回值，
8.Promise.resolve()將現有物件轉為Promise物件，如果該方法的引數為一個Promise物件，Promise.resolve將不做任何處理;如果將引數thenable物件(即具有then方法)，Promise.resolve()將該物件轉換為Promise物件并立即執行then方法，如果引數是一個原始值，或者是一個不具有then方法的物件，則Promise.resolve方法回傳一個新的Promise物件，狀態為fulfilled，其引數將會將會作為then方法中onresolved回呼函式的引數，如果Promise，resolve方法不帶引數，會直接放回一個fulfilled的狀態的Promise物件，需要注意的是，立即resolve()的promise物件，是在本輪“事件回圈”，（event loop）的結束時執行，而不是在下一輪“事件回圈中”的開始時，
9. Promise.reject()同樣放回一個新的promise物件，狀態為rejected，無論傳入任何引數都將作為reject()的引數，

2）Promise優點

1.統一異步api
Promise的一個重要有優點是它將逐漸被用作瀏覽器的異步API,統一現在各種各樣的API,以及不兼容的模式和手法，
2.Promise 與事件對比
和事件相比較，Promise更適合處理一次性的結果，在結果計算出來之前或之后注冊回呼函式都是可以的，都可以拿到正確的值，Promise的這個優點和自然，但是，不能使用Promise處理多次觸發事件，鏈式處理Promise的有一有點，但是事件卻不能這樣鏈式處理
3.Promise 與回呼對比，
解決了回呼地獄的問題，將異步操作以同步操作的流程表達出來
4.Promise帶來的額外好處時包含了更好的錯誤處理方式（包含已成處理），并且寫起來很輕松（以為可以寵用一些同步的工具比如Array.prototype.map()）.

3）Promise 缺點

1.無法取消Promise，一旦新建他就會立即執行，無法中途取消
2.如果不設定回呼函式，Promise內部拋出的錯誤，不會放映到外部，
3.當處于Pending狀態時，無法得知穆青進展到哪一個階段（剛剛開始還是即將完成）
4.Promise真正執行回呼的時候，定義Promise那部分實際上已經走完了，所以Promise的報錯堆疊上下午不太友好

4.簡單代碼實作Promise有7個主要的屬性state(狀態)，value(成功放回值),reason(錯誤資訊)，resolve方法，reject方法，then方法，

 //1.實際Promise
        //new Promise((resolve,reject)=>{ resolve("zhangpanpan")}))
        //實作簡易版Promise
        class MyPromise {
            constructor(exccutor) {
                this.state = "pending"; //當前執行的狀態
                this.value;  //正確或錯誤情況下的放回值
                //resolvue 保存正確情況下的回傳值
                let resolvue = value =https://www.cnblogs.com/James-net/archive/2020/11/12/> {
                    if (this.state === "pending") {
                        this.state = "fulfilled";
                        this.value =https://www.cnblogs.com/James-net/archive/2020/11/12/ value;
                    }
                }
                //reject 情況執行 的函式
                let reject = value =https://www.cnblogs.com/James-net/archive/2020/11/12/> {
                    if (this.state === "pending") {
                        this.state = "rejected";
                        this.value =https://www.cnblogs.com/James-net/archive/2020/11/12/ value;
                    }
                }
                try {
                    exccutor(resolvue, reject)
                } catch (error) {
                    reject(error)
                }
            }
            then(onfulfilled, onJected) {
                if (this.state === "rejected") {
                    onJected(this.value)
                }
                if(this.state === "fulfilled"){
                    onfulfilled(this.value)
                }
            }
        }
        let mypromise=new MyPromise((res,rej)=>{
            res("ddd")
        });
        mypromise.then(e=>{
            console.log(e);
        })

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/212121.html

標籤：其他

上一篇：layui 串列操作按鈕過多自動隱藏后，按鈕監聽事件失效問題

下一篇：pc端兼容IE9及以上版本 IE瀏覽器兼容