視頻資源來(lái)自：b站coderwhy王紅元老師——最全最新Vue右核、Vuejs教程僵腺，從入門到精通
文章僅為個(gè)人觀看視頻后的學(xué)習(xí)心得筆記茬高，用于個(gè)人查看和記錄保存个盆。文中定有疏漏錯(cuò)誤之處矾芙，懇請(qǐng)指正舍沙。
Promise是異步編程的一種解決方案。
回調(diào)地獄
Promise的基本使用
定時(shí)器的異步事件
參數(shù) -> 函數(shù)（resolve,reject）
resolve,reject本身又是函數(shù)
鏈?zhǔn)骄幊?/p>
new Promise((resolve,reject) =>{
setTimeout(() =>{
resolve()
},1000)
}).then(() =>{
console.log('Hello world')
return new Promise((resolve ,reject) =>{
setTimeout(() =>{
resolve()
},1000)
})
}).then(() =>{
console.log('Hello vuejs')
return new Promise((resolve ,reject) =>{
setTimeout(() =>{
resolve()
},1000)
})
})
什么情況會(huì)用到Promise?
一般情況下剔宪，使用Promise對(duì)這個(gè)異步操作進(jìn)行封裝
new -> 構(gòu)造函數(shù)（1.保存了一些狀態(tài)信息 2.執(zhí)行傳入的函數(shù)）
在執(zhí)行傳入的回調(diào)函數(shù)時(shí)拂铡，會(huì)傳入兩個(gè)參數(shù)，resolve歼跟，reject和媳，本身又是函數(shù)
請(qǐng)求與處理分離，變得優(yōu)雅哈街。留瞳。
new Promise((resolve,reject) =>{
setTimeout(() =>{
//成功的時(shí)候調(diào)用resolve
//resolve()
//失敗的時(shí)候調(diào)用reject
reject('error message')
},1000)
}).then(data => {
console.log(data);
console.log(data);
}).catch(err =>{
console.log(err)
})
控制臺(tái)輸出 error message
then前面的函數(shù)必須返回一個(gè)Promise對(duì)象
return Promise.resolve(taskName)
Promise三種狀態(tài)
<font color=#909534>sync ->synchronization -> 同步</font>
<font color=#909534>async ->asynchronization -> 異步</font>
<font color=#909534>operation -> 操作</font>
wrapped into
網(wǎng)絡(luò)請(qǐng)求：aaa -> 自己處理（10行）
處理：aaa 111 -> 自己處理（10行）
處理：aaa 222 -> 自己處理
new Promise((resolve ,reject) =>{
setTimeout(()=>{
resolve('aaa')
},1000)
}).then(res =>{
//1.自己處理10行代碼
console.log(res,'第一層的10行處理代碼');
//2.對(duì)結(jié)果進(jìn)行第一次處理
return new Promise((resolve) =>{
resolve(res + '111')
})
}).then(res =>{
console.log(res,'第二層的10行處理代碼');
return new Promise(resolve => {
resolve(res + '222')
})
}).then(res =>{
console.log(res,'第三層的10行處理代碼');
})
new Promise((resolve ,reject) =>{
setTimeout(()=>{
resolve('aaa')
},1000)
}).then(res =>{
//1.自己處理10行代碼
console.log(res,'第一層的10行處理代碼');
//2.對(duì)結(jié)果進(jìn)行第一次處理
return Promise.resolve(res + '111')
}).then(res =>{
console.log(res,'第二層的10行處理代碼');
return Promise.resolve(res + '222')
}).then(res =>{
console.log(res,'第三層的10行處理代碼');
})
3.省略掉Promise.resolve
new Promise((resolve ,reject) =>{
setTimeout(()=>{
resolve('aaa')
},1000)
}).then(res =>{
//1.自己處理10行代碼
console.log(res,'第一層的10行處理代碼');
//2.對(duì)結(jié)果進(jìn)行第一次處理
return Promise.resolve(res + '111')
}).then(res =>{
console.log(res,'第二層的10行處理代碼');
return Promise.resolve(res + '222')
}).then(res =>{
console.log(res,'第三層的10行處理代碼');
})
結(jié)果：<img src="https://xiao910888.oss-cn-hangzhou.aliyuncs.com/img/image-20210711224516288.png" alt="image-20210711224516288" style="zoom: 67%;" />
多個(gè) 共用一個(gè)catch。抓住錯(cuò)誤
1.reject骚秦，catch
new Promise((resolve ,reject) =>{
setTimeout(()=>{
resolve('aaa')
},1000)
}).then(res =>{
//1.自己處理10行代碼
console.log(res,'第一層的10行處理代碼');
//2.對(duì)結(jié)果進(jìn)行第一次處理
return new Promise((resolve,reject) =>{
// resolve(res + '111')
reject('err')
})
}).then(res =>{
console.log(res,'第二層的10行處理代碼');
return new Promise(resolve => {
resolve(res + '222')
})
}).then(res =>{
console.log(res,'第三層的10行處理代碼');
}).catch(err =>{
console.log(err);
})
2.throw她倘，catch
new Promise((resolve ,reject) =>{
setTimeout(()=>{
resolve('aaa')
},1000)
}).then(res =>{
//1.自己處理10行代碼
console.log(res,'第一層的10行處理代碼');
//2.對(duì)結(jié)果進(jìn)行第一次處理
// return Promise.resolve(res + '111')
throw 'error message'
}).then(res =>{
console.log(res,'第二層的10行處理代碼');
return Promise.resolve(res + '222')
}).then(res =>{
console.log(res,'第三層的10行處理代碼');
}).catch(err =>{
console.log(err);
})
1.ajax異步訪問(wèn)：
兩個(gè)請(qǐng)求同時(shí)到達(dá)時(shí)才能處理
//請(qǐng)求一：
let isResult1 =false
let isResult2 =false
$ajax({
url: '',
success: function () {
console.log('結(jié)果一');
isResult1 = true
handleResult()
}
})
//請(qǐng)求二：
$ajax({
url: '',
success: function () {
console.log('結(jié)果二');
isResult2 = true
handleResult()
}
})
function handleResult() {
if(isResult1 &&isResult2){
}
}
<font color=#909534>iterator：可迭代的（數(shù)組）</font>
2.Promise的異步訪問(wèn)
<script>
Promise.all([
new Promise((resolve,reject) =>{
setTimeout(() =>{
resolve('result1')
},2000)
}),
new Promise((resolve,reject) =>{
setTimeout(() =>{
resolve('result1')
},1000)
})
]).then(result =>{
//results是個(gè)數(shù)組，results[0]代表第一個(gè)請(qǐng)求
console.log(results);
})
總目錄：
邂逅Vuejs
Vue基礎(chǔ)語(yǔ)法
組件化開發(fā)
前端模塊化
webpack詳解
Vue CLI詳解
vue-router
Promise的使用
Vuex詳解
網(wǎng)絡(luò)模塊封裝
項(xiàng)目實(shí)戰(zhàn)
