ES2015正式發布(也就是ES6,ES6是它的乳名),其中Promise被列為正式規范,作為ES6中最重要的特性之一,我們有必要掌握并理解透徹,本文將由淺到深,講解Promise的基本概念與使用方法,
一、先睹為快
復雜的概念先不講,我們先簡單粗暴地把Promise用一下,有個直觀感受,那么第一個問題來了,Promise是什么玩意呢?是一個類?物件?陣列?函式?別猜了,直接列印出來看看吧,console.dir(Promise),就這么簡單粗暴,
這么一看就明白了,Promise是一個建構式,自己身上有all、reject、resolve這幾個眼熟的方法,原型上有then、catch等同樣很眼熟的方法,這么說用Promise new出來的物件肯定就有then、catch方法嘍,沒錯,那就new一個玩玩吧,
Promise的建構式接收一個引數,是函式,并且傳入兩個引數:resolve,reject,分別表示異步操作執行成功后的回呼函式和異步操作執行失敗后的回呼函式,其實這里用“成功”和“失敗”來描述并不準確,按照標準來講,resolve是將Promise的狀態置為fullfiled,reject是將Promise的狀態置為rejected,不過在我們開始階段可以先這么理解,后面再細究概念,
在上面的代碼中,我們執行了一個異步操作,也就是setTimeout,2秒后,輸出“執行完成”,并且呼叫resolve方法,
運行代碼,會在2秒后輸出“執行完成”,注意!我只是new了一個物件,并沒有呼叫它,我們傳進去的函式就已經執行了,這是需要注意的一個細節,所以我們用Promise的時候一般是包在一個函式中,在需要的時候去運行這個函式,如:
這時候你應該有兩個疑問:1.包裝這么一個函式有毛線用?2.resolve('隨便什么資料');這是干毛的?
我們繼續來講,在我們包裝好的函式最后,會return出Promise物件,也就是說,執行這個函式我們得到了一個Promise物件,還記得Promise物件上有then、catch方法吧?這就是強大之處了,看下面的代碼:

效果也是一樣的,還費勁用Promise干嘛,那么問題來了,有多層回呼該怎么辦?如果callback也是一個異步操作,而且執行完后也需要有相應的回呼函式,該怎么辦呢?總不能再定義一個callback2,然后給callback傳進去吧,而Promise的優勢在于,可以在then方法中繼續寫Promise物件并回傳,然后繼續呼叫then來進行回呼操作,
二、鏈式操作的用法
所以,從表面上看,Promise只是能夠簡化層層回呼的寫法,而實質上,Promise的精髓是“狀態”,用維護狀態、傳遞狀態的方式來使得回呼函式能夠及時呼叫,它比傳遞callback函式要簡單、靈活的多,所以使用Promise的正確場景是這樣的:

轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/297488.html
標籤:其他
