簡(jiǎn)介:

promise是什么，它可以說(shuō)是異步編程的一種解決方法，就拿傳統(tǒng)的ajax發(fā)請(qǐng)求來(lái)說(shuō)，單個(gè)還好，如果是一個(gè)請(qǐng)求回來(lái)的數(shù)據(jù)還要被其他請(qǐng)求調(diào)用，不斷地嵌套，可想而知，代碼看起來(lái)是很亂的，promise主要是為了解決這種情景而出現(xiàn)的。

一、使用

1.promise是一種異步解決方案

• 由于ajax異步方式請(qǐng)求數(shù)據(jù)時(shí)，我們不能知道數(shù)據(jù)具體回來(lái)的事件，所以過(guò)去只能將一個(gè)callback函數(shù)傳遞給ajax封裝的方法，當(dāng)ajax異步請(qǐng)求完成時(shí)，執(zhí)行callback函數(shù)。
• promise對(duì)象接受resolve和reject兩個(gè)參數(shù)，當(dāng)一個(gè)異步動(dòng)作發(fā)生時(shí)，promise對(duì)象會(huì)通過(guò)resolve完成對(duì)動(dòng)作成功進(jìn)行解析，reject會(huì)捕獲這個(gè)動(dòng)作的異常。一個(gè)promise對(duì)象，通過(guò)new Promise().then()執(zhí)行下一步驟操作。
• axios is a promise based HTTP client for the browser and node.js。也就是說(shuō)，使用axios發(fā)出請(qǐng)求，難免涉及promise。

Promise構(gòu)造函數(shù)的參數(shù)是一個(gè)函數(shù)，函數(shù)里面的代碼是異步的，即Promise里面的操作，和Promise()外面的操作時(shí)異步"同時(shí)"進(jìn)行的。Promise中的函數(shù)的第一個(gè)參數(shù)是回調(diào)函數(shù)，resolve用來(lái)觸發(fā)then里面的代碼，第二個(gè)參數(shù)是回調(diào)函數(shù)，reject用來(lái)觸發(fā)catch中的代碼，throw new Error();也可以觸發(fā)catch，

resolve和reject是兩個(gè)回調(diào)函數(shù)，調(diào)用resolve會(huì)觸發(fā)then，reject會(huì)觸發(fā)catch：

<script>
new Promise((resolve, reject) =>{
? ? setTimeout(() =>{
? ? ? ? //成功的時(shí)候調(diào)用resolve
? ? ? ? resolve('成功data')
? ? ? ? //失敗的時(shí)候調(diào)用reject
? ? ? ? reject('error message')
? ? }, 1000)
}).then((data) =>{
? ? //處理成功后的邏輯
? ? console.log(data);//這個(gè)data 是接收的resolve參數(shù)--
}).catch((err) =>{
? ? console.log(err);
})
</script>　　

• 在一個(gè)promise鏈中，只要任何一個(gè)promise被reject，promise鏈就被破壞了，reject之后的promise都不會(huì)再執(zhí)行，而是直接調(diào)用.catch方法。

p1().then(p2).then(p3)
? .then(function(data) {
? ? console.log('data: ' + data);
? })
? .catch(function(error) {
? ? console.log('error: ' + error);
? });
??
function p1() {
? return new Promise(function(resolve, reject) {
? ? console.log('p1 resolved');
? ? resolve(123);
? });
}
??
function p2() {
? return new Promise(function(resolve, reject) {
? ? console.log('p2 rejected');
? ? reject(456);
? });
}
??
function p3() {
? return new Promise(function(resolve, reject) {
? ? console.log('p3 resolved');
? ? resolve(789);
? });
}// 執(zhí)行結(jié)果p1 resolvedp2 rejectederror: 456

2.async await

Promise構(gòu)造函數(shù)的參數(shù)是一個(gè)函數(shù)，函數(shù)里面的代碼是異步的，即Promise里面的操作，和Promise()外面的操作時(shí)異步"同時(shí)"進(jìn)行的。此外，只要在函數(shù)前面加上async 關(guān)鍵字，也可以指明函數(shù)是異步的。

async關(guān)鍵字實(shí)際是通過(guò)Promise實(shí)現(xiàn)，如果async 函數(shù)中有返回一個(gè)值 ,當(dāng)調(diào)用該函數(shù)時(shí)，內(nèi)部會(huì)調(diào)用Promise.solve() 方法把它轉(zhuǎn)化成一個(gè)promise 對(duì)象作為返回，但如果timeout 函數(shù)內(nèi)部拋出錯(cuò)誤，那么就會(huì)調(diào)用Promise.reject() 返回一個(gè)promise 對(duì)象。若某函數(shù)調(diào)用一個(gè)異步函數(shù)（比如內(nèi)部含有primise），該函數(shù)應(yīng)用async修飾。

await表示“等待”，修飾返回promise 對(duì)象的表達(dá)式。注意await 關(guān)鍵字只能放到async 函數(shù)里面。

function doubleAfter2seconds(num) {
? ? return new Promise((resolve, reject) => {
? ? ? ? setTimeout(() => {
? ? ? ? ? ? resolve(2 * num)
? ? ? ? }, 2000);
? ? } )
}//寫(xiě)一個(gè)async 函數(shù)，從而可以使用await 關(guān)鍵字， await 后面放置的就是返回promise對(duì)象的一個(gè)表達(dá)式，所以它后面可以寫(xiě)上 doubleAfter2seconds 函數(shù)的調(diào)用
async function testResult() {
? ? let result = await doubleAfter2seconds(30);
? ? console.log(result);
}

await 等待后面的promise對(duì)象執(zhí)行完畢，然后拿到promise resolve 的值并進(jìn)行返回。顯然await可以修飾axios請(qǐng)求，等待得到結(jié)果再往下進(jìn)行，如：

async getUserList(){
? ? ? ? ? ? const {data: res} = await this.$http.get('users', {
? ? ? ? ? ? ? ? params: this.queryInfo
? ? ? ? ? ? })
? ? ? ? ? ? //console.log(res)
? ? ? ? ? ? if (res.meta.status !== 200) return this.$message.error('獲取用戶列表失敗! ')
? ? ? ? ? ? this.userlist = res.data.users
? ? ? ? ? ? this.total = res.data.total
? ? ? ? }

到此這篇關(guān)于vue中Promise的使用方法詳情的文章就介紹到這了,更多相關(guān)vue中Promise的用法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論