【js】what is Promise和手寫實現簡易版Promise

LMou 發布于2019-08-23 18:25 / 836人閱讀

摘要：有三種狀態，等待中，已完成，已失敗。對象狀態不受外界影響，只有異步操作的結果可以改變狀態，這就是的由來怎么用接受一個函數作為參數，這個參數函數的兩個參數分別是和，用來執行了兩種狀態的回調函數。當實例生成后，用方法來指定兩種狀態的回調函數。

什么是Promise

官方的解釋：Promise是一個用來傳遞異步操作消息的對象。
Promise有三種狀態，pending（等待中），resolved（已完成），rejected（已失敗）。對象狀態不受外界影響，只有異步操作的結果可以改變狀態，這就是“promise“的由來

怎么用Promise

Promise接受一個函數作為參數，這個參數函數的兩個參數分別是resolved和rejected，用來執行了兩種狀態的回調函數。
當Promise實例生成后，用then方法來指定兩種狀態的回調函數。舉一個簡單例子

//axios是一個基于Promise的http請求，可以直接調用then

this.axios.get(url).then((res)=>{
        //請求成功 resolved的回調
    },(err)=>{
        //請求失敗 rejected的回調
    }）
}）

將多個Promise封裝成一個

假如你需要等待多個Promise請求resoved后在執行，可以調用Promise.all()
這個api接受一個promise實例數組做參數。

手動實現Promise

//1.定義三種狀態
const PENDING = "pending"
const RESOLVED = "resolved"
const REJECTED = "rejected"
function MyPromisr(fn){
       //重命名this，防止接下來找不到正確的this
       const that = this
       that.state = PENDING //初始狀態為等待
       that.value = null //value用于保存resolved或rejoiced傳入的值
       that.resolvedCallbacks = [] //成功請求后的回調數組
       //定義完成的回調函數
       function resolved(value) {
            // 只有在等待狀態才可以改變狀態
            if (that.state === PENDING) {
                that.state = RESOLVED
                that.value = value
                that.resolvedCallbacks.map(cb => cb(that.value))
            }
        }
        //定義拒絕的回調函數
        function rejected(value) {
            // 只有在等待狀態才可以改變狀態
            if (that.state === PENDING) {
                that.state = REJECTED
                that.value = value
                that.rejectedCallbacks.map(cb => cb(that.value))
            }
        }
        // 定義了兩種狀態的回調函數后,執行mypromise傳參的函數
        try {
            fn(resolved,rejected)
        } catch (e) {
            rejected(e)
        }
}
// 定義then
MyPromise.prototype.then = function(onFulfilled,onRejected){
    const that = this
    onFulfilled = typeof onFulfilled === "function" ? onFulfilled :v => v
    onRejected = 
     typeof onRejected === "function"
        ? onRejected
        : r => {
            throw r
        }
    if (that.state === PENDING) {
        that.resolvedCallbacks.push(onFulfilled)
        that.rejectedCallbacks.push(onRejected)
    }
    if (that.state === RESOLVED) {
        onFulfilled(that.value)
    }
    // console.log(that.state,"has change")
    if (that.state === REJECTED) {
        onRejected(that.value)
    }
}

//調用
new MyPromise((resolved,rejected) => {
    setTimeout(()=>{
        resolved(1)
        rejected(2)
    },0)
}).then(value=>{
    console.log(value)
},value=>{
    console.log(value)
})

云服務器 GPU云服務器 jquery_promise實現 promise Promise使用 promise用法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105210.html

JavaScript之手寫Promise

摘要：如果狀態是等待態的話，就往回調函數中函數，比如如下代碼就會進入等待態的邏輯以上就是簡單版實現實現一個符合規范的接下來大部分代碼都是根據規范去實現的。為更好的理解，推薦閱讀Promise/A+ 規范實現一個簡易版 Promise 在完成符合 Promise/A+ 規范的代碼之前，我們可以先來實現一個簡易版 Promise，因為在面試中，如果你能實現出一個簡易版的 Promise ...

stefan 2019-08-23 15:25 評論0 收藏0
22道JavaScript高頻手寫面試題

JavaScript筆試部分點擊關注本公眾號獲取文檔最新更新,并可以領取配套于本指南的《前端面試手冊》以及最標準的簡歷模板. 實現防抖函數（debounce）防抖函數原理：在事件被觸發n秒后再執行回調，如果在這n秒內又被觸發，則重新計時。那么與節流函數的區別直接看這個動畫實現即可。 showImg(https://segmentfault.com/img/remote/146000002...

Alan 2019-08-26 10:44 評論0 收藏0
3行代碼實現一個簡易版promise

前言作為一個后端過來的同學,剛入門前端的時候,被js種種「反人類」的概念折騰的死去活來的.其中一個印象比較深刻的,就是promise,感覺實在太難理解了...所有就有了寫個簡單的promise的想法.希望能幫助到一些跟我一樣,感覺promise很難理解的新同學. promise的教程網上多如牛毛,其中寫的比較通俗易懂的莫過于阮一峰的es6,反正我是他的書才懂的.所以今天,我們也不會來復述一遍如何...

ralap 2019-08-22 17:33 評論0 收藏0
「中高級前端面試」JavaScript手寫代碼無敵秘籍

摘要：第一種直接調用避免在不必要的情況下使用，是一個危險的函數，他執行的代碼擁有著執行者的權利。來自于此外，實現需要考慮實例化后對原型鏈的影響。函數柯里化的主要作用和特點就是參數復用提前返回和延遲執行。手寫路徑導航實現一個new操作符實現一個JSON.stringify 實現一個JSON.parse 實現一個call或 apply 實現一個Function.bind 實現一個繼承實現一個J...

Zhuxy 2019-05-23 16:26 評論0 收藏0
What's New in JavaScript

摘要：在和中都保留了數組的強引用，所以在中簡單的清除變量內存并沒有得到釋放，因為還存在引用計數。而在中，它的鍵是弱引用，不計入引用計數中，所以當被清除之后，數組會因為引用計數為而被回收掉。其實我們主要注意的引用是不計引用計數的，就好理解了。 showImg(https://segmentfault.com/img/remote/1460000019147368?w=900&h=383); 前...

cgh1999520 2019-08-26 13:44 評論0 收藏0