這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)Promise的介紹及基本用法是什么，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

Promise是ES6引入的異步編程的新解決方案。語法止Promise是-一個構(gòu)造函數(shù)，

用來封裝異步操作并可以獲取其成功或失敗的結(jié)果。

Promise 構(gòu)造函數(shù): Promise (excutor) {}

Promise.prototype.then 方法

Promise.prototype.catch 方法

Promise的基本使用

實例化Promise

newPromise()

在實例化的時候接受一個參數(shù)， 這個參數(shù)是一個函數(shù)。

這個函數(shù)有兩個形參，resolve 和?reject

varpromise?=newPromise((resolve,reject)?=>{//?里面用于處理異步操作})

我們在這里使用定時器來模擬異步操作

promise有三種狀態(tài)，分別是：進行中、成功、失敗。

varpromise?=newPromise((resolve,reject)?=>{//?這是一個異步操作setTimeout(()=>{//?這里模擬獲取數(shù)據(jù)vardata?='獲取的數(shù)據(jù)'//?在得到數(shù)據(jù)之后我們可以調(diào)用resolve和reject方法來改變promise對象的狀態(tài)resolve(data)//?resolve可以將promise對象的狀態(tài)改為成功，reject()可以promise將對象狀態(tài)改為失敗},1000);})

promise的then方法

當(dāng)promise對象的狀態(tài)為成功或者失敗時可以調(diào)用then方法

then方法接受兩個參數(shù)，而且兩個參數(shù)都是函數(shù)類型的值

promise對象的狀態(tài)為成功時，會調(diào)用then方法的第一個參數(shù)

也是就說promise對象的狀態(tài)為失敗時，會調(diào)用then方法的第二個參數(shù)

第二個參數(shù)時可選的，如果不需要捕獲失敗可以省略

參數(shù)分別有一個形參，成功的函數(shù)叫value, 失敗的err

promise.then(value=>{//?當(dāng)異步函數(shù)里面調(diào)用了resolve(data)，也是就說promise對象的狀態(tài)為成功時，會調(diào)用then方法的第一個參數(shù)console.log(value);//?'hello?world'?value就是resolve()方法傳遞過來的數(shù)據(jù)},err=>{//?當(dāng)異步函數(shù)里面調(diào)用了reject(data)，也是就說promise對象的狀態(tài)為失敗時，會調(diào)用then方法的第二個參數(shù)console.log(err);//?err就是reject()方法傳遞過來的數(shù)據(jù)?})

調(diào)用then方法then方法的返回結(jié)果是Promise 對象，對象狀態(tài)由回調(diào)函數(shù)的執(zhí)行結(jié)果決定

如果回調(diào)函數(shù)中返回的結(jié)果是非promise類型的屬性，狀態(tài)為成功，返回值為對象的成功的值

letdata?=?promise.then((val)?=>{//?console.log(val.result);//?返回非Promise的情況//?return?val.result//?返回Promise的情況returnnewPromise((resolve,?reject)?=>{//?resolve('ok')reject('err')????})},err=>{console.log(err);})//?返回非Promise的情況?狀態(tài)為成功，返回值為對象的成功的值?//?返回結(jié)果是Promise?對象，對象狀態(tài)由回調(diào)函數(shù)的執(zhí)行結(jié)果決定//?拋出錯誤,狀態(tài)為失敗console.log(data);

所以then可以鏈?zhǔn)秸{(diào)用使用方法可參見下面promise應(yīng)用示例。

promise的catch方法

promise的catch方法是then(null, rejection)的別名，用于指定發(fā)生錯誤時的回調(diào)

Promise對象的狀態(tài)為resolve，就會調(diào)用then方法的指定回調(diào)函數(shù)

constpromise?=newPromise((resolve,?reject)?=>{????resolve('ok')})promise.then(val=>{console.log(val);//?ok}).catch(err=>{console.log(err);})

如果promise的狀態(tài)為rejected就會調(diào)用catch方法的回調(diào)函數(shù)來處理這個問題。

constpromise?=newPromise((resolve,?reject)?=>{????reject('err')})promise.then(val=>{console.log(val);}).catch(err=>{console.log(err);//?err})

如果then方法在運行中出現(xiàn)錯誤也會被catch方法捕獲

constpromise?=newPromise((resolve,?reject)?=>{????resolve('err')})promise.then(val=>{console.log('ok');//?okthrow'出錯了?。?//?then里面拋出的錯誤會繼續(xù)被catch捕獲}).catch(err=>{console.log(err);//?出錯了??！})

promise對象的錯誤具有冒泡的性質(zhì)，會一直向后傳遞，直到被捕獲為止。也就是說，錯誤總是會被下一個catch捕獲。

constpromise?=newPromise((resolve,?reject)?=>{????resolve('ok')})promise.then(val=>{returnnewPromise((resolve,?reject)?=>{????????reject('err')????})}).then(val=>{returnnewPromise((resolve,?reject)?=>{????????reject('err')????})}).catch(err=>{//?以上產(chǎn)生的錯誤都可以被catch捕獲到console.log(err);//?err})

一般來說，不要在then方法中定義rejected狀態(tài)回調(diào)函數(shù)（即then的第二個參數(shù)），而應(yīng)總是使用catch方法。

promise應(yīng)用?

promise讀取文件，多個文件連續(xù)調(diào)用

在這個例子中我們用到了Node.js的文件模塊

//?讀取文件信息constfs?=require('fs')

在下面代碼中我們使用了promise包裝了異步函數(shù)

我們先來看看正常的文件讀取操作

//?讀取文件信息constfs?=require('fs')//?如果讀取失敗err就是一個錯誤對象，讀取成功data就是數(shù)據(jù)fs.readFile('./01.txt',(err,?data)?=>{//?判斷是否出現(xiàn)錯誤，如果讀取錯誤就打印錯誤對象。if(err)?{console.log(err);return}console.log(data.toString());})

我們?nèi)绻朐谧x取成功之后繼續(xù)讀取文件，就需要在回調(diào)函數(shù)中繼續(xù)使用fs.readFile...去讀取文件，嵌套層次一多，這樣一來就會形成回調(diào)地獄。?

接下來我們使用Promise的方式來讀取文件

//?讀取文件信息constfs?=require('fs')constpromise?=newPromise((resolve,?reject)?=>{????fs.readFile('./01.txt',(err,?data)?=>{if(err)returnreject(err)????????resolve(data)????})})?promise.then(val=>{console.log(val.toString());//?返回一個Promise對象returnnewPromise((resolve,?reject)?=>{????????fs.readFile('./02.txt',(err,?data)?=>{if(err)returnreject(err)????????????resolve(data)????????})????})},err=>{console.log(err);})//?上一個then里面返回的是一個promise對象，我們可以繼續(xù).then.then(val=>{console.log(val.toString());returnnewPromise((resolve,?reject)?=>{????????fs.readFile('./03.txt',(err,?data)?=>{if(err)returnreject(err)????????????resolve(data)????????})????})},err=>{console.log(err);}).then(val=>{console.log(val.toString());},err=>{console.log(err);})

promise封裝ajax請求

封裝了ajax請求，使用then獲取結(jié)果，讓代碼看起來更加簡潔，解決了回調(diào)地獄的問題

constpromise?=newPromise((resolve,?reject)?=>{//?創(chuàng)建對象constxhr?=newXMLHttpRequest()//?初始化xhr.open("GET",'https://api.apiopen.top/getSongPoetry?page=1&count=20')//?發(fā)送xhr.send()//?綁定事件處理響應(yīng)結(jié)果xhr.onreadystatechange?=function(){//?判斷//?進入最后一個階段，所有的響應(yīng)體都回來了if(xhr.readyState?===4)?{//?判斷響應(yīng)碼if(xhr.status?>=200&&?xhr.status?<300)?{//?表示成功//?console.log(JSON.parse(xhr.response));resolve(JSON.parse(xhr.response))????????????}else{????????????????reject(xhr.status)????????????}????????}????}})//?指定回調(diào)promise.then((val)?=>{console.log(val);},err=>{console.log(err);})

上述就是小編為大家分享的Promise的介紹及基本用法是什么了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道。