Promise 上手

Promise是抽象異步處理對象以及對其進行各種操作的組件。promise的功能是可以將復雜的異步處理輕松地進行模式化。

1.Promise基礎結構

Promise是一個對象，而非函數，對象的好處就是可以狀態不受外界影響，并保存一些回調狀態信息。

new Promise(function)

Promise的構造函數要求傳入一個回調函數，當Promise被創建的時候，Promise會執行傳入的回調函數，中途取消。傳入的回調函數有兩個參數resolve, reject，分別對應異步成功和異步失敗。

new Promise(function(resolve, reject) {setTimeout(()=>{console.log('異步操作');},1000) })

當回調中的異步操作執行成功后，調用resolve進行相應的處理，resolve是用于執行回調函數，可以通過resolve將異步操作（一般是異步請求）得到的數據傳遞到resolve里面。resolve可以理解成Ajax中的success回調。

new Promise(function(resolve, reject) {setTimeout(()=>{console.log('異步操作');resolve('通過參數進行信息的傳遞')},1000) })

resolve()回調放在了then里面，reject()可以放在then中也可以放在catch中，后面會介紹。

var promise = new Promise(function(resolve, reject) {//異步請求，假設請求回來的數據為dataif(data != null){//調用resolveresolve(data)}else{//調用rejectreject('請求失敗')} })//通過then來設置resolve要執行的回調函數 promise.then(data => {console.log(data); //在控制臺中打印剛剛resolve傳遞過來的data }) //通過catch來設置reject要執行的回調函數 promise.catch(data => {console.log(data); //在控制臺中打印剛剛resolve傳遞過來的data })

為什么用promise？

當一些為了請求需要多層嵌套的時候，如果使用的是Ajax，那么就會出現回調地獄的情況，回調地獄可以簡單地認為過多的異步請求的嵌套，導致一堆回調函數的嵌套，從而導致代碼結構復雜，層次不鮮明，不易于管理。而promise是一個對象，他提供了鏈式編程，可以不受外界影響通過對象來管理回調函數，層次鮮明，易于維護。

2.promise基礎用法

promise用的是鏈式編程，下面就寫了promise的基本用法。

• 第一種：異步成功調用resolve(),調用resolve()后將會異步執行then()中的回調函數，失敗則調用reject(),調用reject()執行 的是catch()里面的回調函數。
• 第二種：將異步成功和失敗都寫在then(onFulfilled, onRejected)里面，onFulfilled代表成功回調，onRejected失敗回調。

var promise = new Promise(function(resolve, reject) {// 異步處理// 處理結束后、異步處理成功調用resolve 或 失敗調用rejectresolve() }).then(()=>{//調用resolve()后,要執行的回調操作 }).catch(()=>{//調用reject()后,要執行的回調操作 });//----------------------------------------------- //或者這樣使用 var promise = new Promise(function(resolve, reject) {// 異步處理// 處理結束后、異步處理成功調用resolve 或 失敗調用rejectresolve() }); //promise.then(onFulfilled, onRejected) promise.then((data)=>{//調用resolve()后,要執行的回調操作,onFulfilled被調用 },(err)=>{//調用reject()后,要執行的回調操作,onRejected被調用 })

3.使用示例

用.then(onFulfilled).catch(onRejected)方式

new Promise((resolve,reject) =>{setTimeout(()=>{console.log('干了一些處理');resolve('異步執行成功的回調')},1000) }).then((data)=>{console.log(data); //異步成功的回調 }).catch((err)=>{console.log(err); //異步失敗的回調 });

用.then(onFulfilled, onRejected)方式

new Promise((resolve,reject) =>{setTimeout(()=>{resolve('異步執行成功的回調')},1000) }).then((data)=>{console.log(data); //異步成功的回調 },(err)=>{console.log(err); //異步失敗的回調 });

模仿網絡請求

new Promise(function (resolve, reject) {var req = new XMLHttpRequest();req.open('GET', URL, true);req.onload = function () {if (req.status === 200) {resolve(req.responseText);} else {reject(new Error(req.statusText));}};req.onerror = function () {reject(new Error(req.statusText));};req.send(); }).then(function onFulfilled(value){console.log(value); }).catch(function onRejected(error){console.error(error); });

4.promise的狀態(了解)

promise有三種狀態：

• pending：等待狀態
• fulfill：滿足狀態，調用resolve()，回調.then()中的函數
• reject：拒絕狀態, 調用reject(),回調catch()中的函數

4.promise的鏈式調用

使用promise的鏈式調用可以層次是十分明的，相比于多層嵌套的Ajax易于閱讀和管理。一個promise對象對應了一個異步操作。流程如下：

第一個new出來的Promise執行傳入構造函數的回調函數

當遇到第一個resolve()時，執行第一個then中的回調函數

第一個then中的回調函數new了第二個Promise，并返回

第二個Promise也執行傳入構造函數的回調函數

遇到第二個resolve(),執行第二個then中的回調函數

第二個then中的回調函數new出了第三個Promise對象

。。。。。。以此類推

new Promise((resolve,reject) =>{setTimeout(()=>{resolve('第一層')},1000) }).then( data =>{console.log(data); //-->第一層嵌套return new Promise((resolve,reject) =>{resolve('第二層')}) }).then( data =>{console.log(data); //-->第二層嵌套return new Promise((resolve,reject) =>{resolve('第三層')}) })then( data =>{console.log(data); //-->第三層嵌套 });

簡寫

/* new Promise((resolve,reject) =>{resolve(data)})如果下一層的也是只是調用resolve()，那么這種方式的調用可以簡寫成Promise.resolve(data) */ Promise.resolve(data)

5.Promise.all

Promise.all可以發起多個異步，并當這些異步都resolve或reject進行相應的回調。

Promise.all接收一個 promise對象的數組作為參數，當這個數組里的所有promise對象全部變為resolve或reject狀態的時候，它才會去調用 .then 方法。

Promise.all([new promise((resolve,reject)=>{//發起ajax請求$.ajax({url:'url1',success:function(data){//請求成功回調resolve(data)resolve(data)}})}),new promise((resolve,reject)=>{//發起ajax請求$.ajax({url:'url2',success:function(data){//請求成功回調resolve(data)resolve(data)}})}) ]).then(results =>{//這里會等待上面的ajax都調用了resolve(data)才會執行這里//results是一個數組，里面包含了多個異步返回結果。//results[0],results[1]分別對應第一個promise和第二個promise返回的結果console.log(results); })

總結

以上是生活随笔為你收集整理的Promise 上手的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。