1.什么是Promise

簡單來說Promise是異步編程的一種解決方案

Promise是ES6中的特性。

什么是異步操作？

網(wǎng)絡請求中，對端服務器處理需要時間，信息傳遞過程需要時間，不像我們本地調用算術函數(shù)一樣，這里的網(wǎng)絡請求不是同步的有時延， 不能立即得到結果。

== 如何處理異步事件？==

對于網(wǎng)絡請求這種，一般會使用回調函數(shù)，在服務器端傳給我數(shù)據(jù)成功后，調用回調函數(shù)。例如Ajax調用。

$.ajax({sucess:function(){ ...}})

如果碰到嵌套網(wǎng)絡請求，例如第一次網(wǎng)絡請求成功后回調函數(shù)再次發(fā)送網(wǎng)絡請求，這種代碼就會讓人含難受。

$.ajax({sucess:function(){ $.ajax({ ... })}})

如果還需要再次的網(wǎng)絡請求，那么又要嵌套一層，這樣的代碼層次不分明很難讀，也容易出問題。

2.Promise的基本使用

什么時候使用Promise

解決異步請求冗余這樣的問題，promise就是這樣封裝移步請求的。

Promise對象

new Promise((resolve, reject) => {})

Promise對象的參數(shù)是一個函數(shù)(resolve，reject) => {}，這個函數(shù)又有兩個參數(shù)分別是resolve和reject。這兩個參數(shù)本身也是函數(shù)，后面還有回調函數(shù)then(func)的參數(shù)也是一個函數(shù)。

模擬定時器的異步事件

用定時器模擬網(wǎng)絡請求，定時一秒為網(wǎng)絡請求事件，用console.log()表示需要執(zhí)行的代碼。

//1.使用setTimeout模擬嵌套的第三次網(wǎng)絡請求setTimeout(() => {//第一次請求console.log("hello wk")//第一次處理代碼setTimeout(() => {//第二次請求console.log("hello meng")//第二次處理代碼setTimeout(() => {//第三次請求console.log("hello vue")//第三次處理代碼 },1000) },1000)???},1000)

一層套一層，看起來是不是很繞。
使用promise來處理異步操作

//參數(shù) -> 函數(shù)// resolve和reject本身也是函數(shù)//then()的參數(shù)也是一個函數(shù)new Promise((reslove,reject) => { setTimeout(() => { //第一次網(wǎng)絡請求 resolve() },1000) }).then(() => { console.log("hello wk") //第一次處理代碼 return new promise((resolve, reject) => { setTimeout(() => { //第二次網(wǎng)絡請求 resolve() },1000).then(() => { console.log("hello vuejs")//第二次處理代碼 return new Promise((resolve, reject) => { setTimeout(() => {//第三次網(wǎng)絡請求 resolve() }, 1000) }).then(() => { console.log("hello java")//第三次處理代碼 }) }) })})

是不是覺得代碼還要更復雜了？仔細看看第一個如果使用了多個就找不到對應的關系了。相反第二個流程就很清楚了，調用resolve()就能跳轉發(fā)到then()方法就能執(zhí)行處理代碼，then()回調的返回值又是一個promise對象。層次很明顯，只要是then()必然是執(zhí)行處理代碼，如果還有嵌套必然就是返回了一個promise對象，這樣調用就像Java中的StringBuffer的append()方法一樣，鏈式調用。

new Promise((resolve, reject) => { setTimeout(() => { resolve('success') }, 1000).then(success => { console.log(success) })})

setTimeout()模擬的是網(wǎng)絡請求，而then()執(zhí)行的是網(wǎng)絡請求后的代碼，這就將網(wǎng)絡請求和請求得到的響應后的操作分離了，每個地方干自己的事情。在resolve中傳參了，那么在then()方法中的參數(shù)就有這個參數(shù)，例如data。

網(wǎng)絡請求中也會有失敗情況?例如網(wǎng)絡堵塞。

如何處理失敗情況，此時就要用到reject()

new Promise((resolve, reject) => { setTimeout(() => { reject('error message') }, 1000).catch(error => { console.log(error) })})

此時reject(error)，catch()方法捕獲到reject()中的error。合起來

new Promise((resolve, reject) => { setTimeout(() => { // 成功的時候調用resolve() // resolve('hello world') // 失敗的時候調用reject() reject('error message') }, 1000).then(success => { console.log(success) }).catch(error => { console.log(error) })})

拿ajax來舉例子：

new Promise((resolve, reject) => { $.ajax({ success:function(){ // 成功的時候調用resolve() // resolve('hello world') // 失敗的時候調用reject() reject('error message') } }).then(success => { console.log(success) }).catch(error => { console.log(error) })})

3.Promise的三種狀態(tài)

• pending:等待狀態(tài)，比如正在進行的網(wǎng)絡請求還未響應，或者定時器還沒有到時間

• fulfill:滿足狀態(tài)，當我們主動回調了resolve函數(shù)，就處于滿足狀態(tài)，并會回調then()

• reject:拒絕狀態(tài)，當我們主動回調reject函數(shù)，就處于該狀態(tài)，并且會回調catch()

4.Promies的鏈式調用

• 網(wǎng)絡請求響應結果為 hello ,打印hello

• 處理：hello world ,打印hello world

• 處理：hello world，vuejs ,打印hello world，vuejs

new Promise((resolve, reject) => { setTimeout(() => { resolve('hello') }, 1000) }).then(res => { console.log(res)//打印hello return new Promise(resolve => { resolve(res + ' world') }).then(res => { console.log(res)//打印hello world return new Promise(resolve => { resolve(res + ',vuejs') }).then(res => { console.log(res)//打印hello world,vuejs }) }) })

鏈式調用就是then()方法的返回值返回一個Promise對象繼續(xù)調用then()，此外還有簡寫Promise.resolve()。

new Promise((resolve, reject) => { setTimeout(() => { resolve('hello') }, 1000) }).then(res => { console.log(res)//打印hello return Promise.resolve(res + ' world') }).then(res => { console.log(res)//打印hello world return Promise.resolve(res + ',vuejs') }).then(res => { console.log(res)//打印hello world,vuejs })

還可以直接省略掉Promise.resolve()

new Promise((resolve, reject) => { setTimeout(() => { resolve('hello') }, 1000) }).then(res => { console.log(res)//打印hello return res + ' world' }).then(res => { console.log(res)//打印hello world return res + ',vuejs' }).then(res => { console.log(res)//打印hello world,vuejs })

如果中途發(fā)生異常，可以通過catch()捕獲異常

new Promise((resolve, reject) => { setTimeout(() => { resolve('hello') }, 1000) }).then(res => { console.log(res)//打印hello return res + ' world' }).then(res => { console.log(res) // return Promise.reject('error message')//發(fā)生異常 throw 'error message' //拋出異常 }).then(res => { console.log(res)//打印hello world,vuejs }).catch(error => { console.log(error) })

也可以通過throw拋出異常，類似java

throw?'error?message'?//拋出異常

5.Promies的all使用

有這樣一個情況，一個業(yè)務需要請求2個地方(A和B)的數(shù)據(jù)，只有A和B的數(shù)據(jù)都拿到才能走下一步。ajax實現(xiàn)

$.ajax({ ...//結果A resultA = true callback()})$.ajax({ ...//結果B resultB = true callback()})//回調函數(shù)function callback(){ if(resultA&&resultB){ ... }}

由于不知道網(wǎng)絡請求A和網(wǎng)絡請求B哪個先返回結果，所以需要定義一個函數(shù)只有2個請求都返回數(shù)據(jù)才回調成功。

Promise實現(xiàn)

Promise.all([ new Promise((resolve, resjct) => { $.ajax({ url: 'url1', success: function (data) { resolve(data) } }) }), new Promise((resolve, resjct) => { $.ajax({ url: 'url2', success: function (data) { resolve(data) } }) }).then(results => { console.log(results) })????])

上面是偽代碼，只是包裝了ajax，ajaxA和ajaxB的結果都放在resolve()中，Promise將其放在results中了，使用setTimeout模擬。

Promise.all([ new Promise((resolve, reject) => { setTimeout(() => {// 請求A resolve('結果A') }, 1000) }), new Promise((resolve, reject) => { setTimeout(() => {// 請求B resolve('結果B') }, 1000) }) ]).then(results => { console.log(results)????})

文末點擊

戳下面的原文閱讀，更有料！?您點的每個贊，我都認真當成了喜歡

總結

以上是生活随笔為你收集整理的支付宝异步回调返回success_深入解决异步编程Promise对象的学习的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。