如何理解JavaScript中的Promise，很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。
promise 是一個(gè) ES6 的語(yǔ)法
Promise表示承諾的意思，它在語(yǔ)法上解決了傳統(tǒng)的多層回調(diào)嵌套問(wèn)題
· 什么是回調(diào)函數(shù)？
· 就是把函數(shù) A 當(dāng)作參數(shù)傳遞到 函數(shù) B 中
· 在函數(shù) B 中以行參的方式進(jìn)行調(diào)用
function a(cb) {
cb()}function b() {
console.log('我是函數(shù) b')}a(b)
· 為什么需要回調(diào)函數(shù)
· 當(dāng)我們執(zhí)行一個(gè)異步的行為的時(shí)候，我們需要在一個(gè)異步行為執(zhí)行完畢之后做一些事情
· 那么，我們是沒(méi)有辦法提前預(yù)知這個(gè)異步行為是什么時(shí)候完成的
· 我們就只能以回調(diào)函數(shù)的形式來(lái)進(jìn)行
setTimeout(function(){
console.log("回調(diào)函數(shù)執(zhí)行了")}, 2000)
· 當(dāng)一個(gè)回調(diào)函數(shù)嵌套一個(gè)回調(diào)函數(shù)的時(shí)候
· 就會(huì)出現(xiàn)一個(gè)嵌套結(jié)構(gòu)
· 當(dāng)嵌套的多了就會(huì)出現(xiàn)回調(diào)地獄的情況
· 比如我們發(fā)送三個(gè) ajax 請(qǐng)求
· 第一個(gè)正常發(fā)送
· 第二個(gè)請(qǐng)求需要第一個(gè)請(qǐng)求的結(jié)果中的某一個(gè)值作為參數(shù)
· 第三個(gè)請(qǐng)求需要第二個(gè)請(qǐng)求的結(jié)果中的某一個(gè)值作為參數(shù)
ajax({
url: '我是第一個(gè)請(qǐng)求',
success (res) {
// 現(xiàn)在發(fā)送第二個(gè)請(qǐng)求 ajax({
url: '我是第二個(gè)請(qǐng)求'，
data: { a: res.a, b: res.b },
success (res2) {
// 進(jìn)行第三個(gè)請(qǐng)求 ajax({
url: '我是第三個(gè)請(qǐng)求',
data: { a: res2.a, b: res2.b },
success (res3) {
console.log(res3)
}
})
}
})
}})
· 回調(diào)地獄，其實(shí)就是回調(diào)函數(shù)嵌套過(guò)多導(dǎo)致的
· 當(dāng)代碼成為這個(gè)結(jié)構(gòu)以后，已經(jīng)沒(méi)有維護(hù)的可能了
· 所以我們要把代碼寫(xiě)的更加的藝術(shù)一些
· 為了解決回調(diào)地獄
· 我們就要使用 promise 語(yǔ)法
· 語(yǔ)法：
new Promise(function (resolve, reject) {
// resolve 表示成功的回調(diào) // reject 表示失敗的回調(diào)}).then(function (res) {
// 成功的函數(shù)}).catch(function (err) {
// 失敗的函數(shù)})
· promise 就是一個(gè)語(yǔ)法
· 我們的每一個(gè)異步事件，在執(zhí)行的時(shí)候
· 都會(huì)有三個(gè)狀態(tài)，執(zhí)行中 / 成功 / 失敗
· 因?yàn)樗顺晒Φ幕卣{(diào)函數(shù)
· 所以我們就可以使用 promise 來(lái)解決多個(gè) ajax 發(fā)送的問(wèn)題
new Promise(function (resolve, reject) {
ajax({
url: '第一個(gè)請(qǐng)求',
success (res) {
resolve(res)
}
})}).then(function (res) {
// 準(zhǔn)備發(fā)送第二個(gè)請(qǐng)求 return new Promise(function (resolve, reject) {
ajax({
url: '第二個(gè)請(qǐng)求',
data: { a: res.a, b: res.b },
success (res) {
resolve(res)
}
})
})}).then(function (res) {
ajax({
url: '第三個(gè)請(qǐng)求',
data: { a: res.a, b: res.b },
success (res) {
console.log(res)
}
})})
· 這個(gè)時(shí)候，我們的代碼已經(jīng)改觀(guān)了很多了
· 基本已經(jīng)可以維護(hù)了
· 但是對(duì)于一個(gè)程序員來(lái)說(shuō)，這個(gè)樣子是不夠的
· 我們還需要更加的簡(jiǎn)化代碼
· 所以我們就需要用到一個(gè) es7 的語(yǔ)法了
· 叫做 async/await
· async/await 是一個(gè) es7 的語(yǔ)法
· 這個(gè)語(yǔ)法是 回調(diào)地獄的終極解決方案
· 語(yǔ)法：
async function fn() {
const res = await promise對(duì)象}
· 這個(gè)是一個(gè)特殊的函數(shù)方式
· 可以 await 一個(gè) promise 對(duì)象
· 可以把異步代碼寫(xiě)的看起來(lái)像同步代碼
· 只要是一個(gè) promiser 對(duì)象，那么我們就可以使用 async/await 來(lái)書(shū)寫(xiě)
async function fn() {
const res = new Promise(function (resolve, reject) {
ajax({
url: '第一個(gè)地址',
success (res) {
resolve(res)
}
})
})
// res 就可以得到請(qǐng)求的結(jié)果 const res2 = new Promise(function (resolve, reject) {
ajax({
url: '第二個(gè)地址',
data: { a: res.a, b: res.b },
success (res) {
resolve(res)
}
})
})
const res3 = new Promise(function (resolve, reject) {
ajax({
url: '第三個(gè)地址',
data: { a: res2.a, b: res2.b },
success (res) {
resolve(res)
}
})
})
// res3 就是我們要的結(jié)果 console.log(res3)}
· 這樣的異步代碼寫(xiě)的就看起來(lái)像一個(gè)同步代碼了
看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)-成都網(wǎng)站建設(shè)公司行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)的支持。
重慶分公司
重慶分公司
