Vue.js學習第十四天——Promise的使用及瞭解Vuex
一、 Promise的使用
【背景】：Promise是ES6中的新特性，是異步編程的一種解決方案，一種很常見的應用場景就是網絡請求，如果當我們的網絡請求非常複雜時，就會出現回調地獄，就是如下代碼的一種情況：
<script>
$.ajax('url1',function(data1){
$.ajax(data1['url2'],function(data2){
$.ajax(data2['url3'],function(data3){
$.ajax(data3['url4'],function(data4){
console.log(data4);
})
})
})
})
</script>
在第一次網絡請求到的數據是第二次網絡請求的參數，一直這麼下去，被稱爲回調地獄，說白了就是不能無限套娃，否則代碼難以維護，我們希望以一種更加優雅的方式來進行異步操作，所以就出現了promise
【使用】：
- 基本使用
<script>
new Promise((resolve,reject) => {
setTimeout(() => {
resolve()
}, 1000);
}).then(()=>{
console.log('Promise示例');
})
</script>
- 嵌套使用
<script>
new Promise((resolve,reject) => {
setTimeout(() => {
resolve()
}, 1000);
}).then(()=>{
console.log('1');
return new Promise((resolve,reject) => {
setTimeout(() => {
resolve()
}, 1000);
})
}).then(()=>{
console.log('2');
return new Promise((resolve,reject) => {
setTimeout(() => {
resolve()
}, 1000);
})
}).then(()=>{
console.log('3');
})
</script>
在promise函數中需要我們填寫兩個參數，這兩個參數對應也是函數，當我們執行resolve時，會自動調用then函數，如果調用reject時，會調用catch函數處理失敗的情況，如下(控制檯打印‘出錯啦’)：
<script>
new Promise((resolve,reject)=>{
setTimeout(() => {
reject('出錯啦！')
}, 1000);
}).then(()=>{
console.log('成功')
}).catch((data)=>{
console.log(data)
})
</script>
【三種狀態】
- pending：等待狀態，比如正在進行的網絡請求，或者定時器沒有到時間
- fulfill：滿足狀態，當我們主動回調了resolve時，就處於該狀態，並且會回調.then()
- reject：拒絕狀態，當我們主動毀掉了reject時，就處於該狀態，並且會回調.catch()
注意：promise中的.then可以有另一種寫法，如下：
<script>
new Promise((resolve,reject)=>{
setTimeout(() => {
// resolve('這是resolve函數');
reject('這是reject函數');
}, 1000);
}).then(data=>{
console.log(data)
},err=>{
console.log(err);
})
</script>
【案例】下面有一個需求：
// wrapped into 包裹 將異步操作包裹在promise裏面
// 網絡請求 aaa->自己處理第一次
// 處理：aaa1 -> 自己處理第二次
// 處理：aaa12 -> 自己處理第三次
//大致意思就是將網絡請求回來的數據自己處理完成後做相應的轉換然後傳給下一次，
//要求將轉換操作和處理操作相分離
<script>
new Promise((resolve,reject)=>{
setTimeout(() => {
resolve('aaa');
}, 1000);
}).then((res)=>{
console.log(res,'第一次處理');
return new Promise((resolve,reject)=>{
resolve(res+'1');
})
}).then(res=>{
console.log(res,'第二次處理');
return new Promise((resolve,reject)=>{
resolve(res+'2');
})
}).then(res=>{
console.log(res,'第三次處理');
})
</script>
第一次拆分
<!-- new Promise(resolve => resolve(結果))簡寫 -->
<script>
new Promise((resolve,reject)=>{
setTimeout(() => {
resolve('aaa');
}, 1000);
}).then((res)=>{
console.log(res,'第一次處理');
return Promise.resolve(res+'1');
}).then(res=>{
console.log(res,'第二次處理');
return Promise.resolve(res+'2');
}).then(res=>{
console.log(res,'第三次處理');
})
</script>
第二次簡寫
<!-- 省略掉Promise.resolve -->
<script>
new Promise((resolve,reject)=>{
setTimeout(() => {
resolve('aaa');
}, 1000);
}).then((res)=>{
console.log(res,'第一次處理');
return res+'1';
}).then(res=>{
console.log(res,'第二次處理');
return res+'2';
}).then(res=>{
console.log(res,'第三次處理');
})
</script>
如果中間出現了reject同理，第三種改爲throw 'error message'就不用寫Promise.reject('error message')
【all方法的使用】
對多個異步的處理，比如現在有兩個網絡請求，只有兩個請求的數據都拿到了才能顯示頁面，所以出現了這個all方法，只有兩個請求都完成才能完成此需求，all方法會判斷兩個異步操作是否完成，拿到的是一個數組
<script>
Promise.all([
new Promise((resolve,reject) => {
setTimeout(() => {
resolve('result1')
}, 1000);
}),
new Promise((resolve,reject) => {
setTimeout(() => {
resolve({
name: 'beanBag',
age:22
})
}, 2000);
})
]).then(result =>{
console.log(result);
})
</script>
二、瞭解Vuex
【官方解釋】Vuex是一個專門爲Vuex.js應用程序開發的狀態管理模式，它採用集中式存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化，說的簡單一點，就是把大家都要互相用的東西放到一個文件中，這個文件統一來管理這些東西，並且可以很方便的爲大家調用並且是響應式的
【應用場景】用戶的登陸狀態、用戶名稱、頭像等等，商品的收藏，購物車的物品等
【使用】同vue-router一樣，vuex是vue提供的一種插件，所以使用的步驟和vue-router類似，代碼就明天再貼吧
三、項目中的小知識點
項目中如果遇見路徑太複雜的話，我們可以將路徑起一個別名，比如圖片的路徑每次都是…/…/找起來非常麻煩，所以我們可以給他起一個別名
- 修改webpack.base.conf.js中的resolve
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'@': resolve('src'),
'assets': resolve('src/assets'),
}
},
2.將你希望替代的別名寫入，比如可以用assets代替src/assets這個路徑
3.使用，當我們起了別名後，在引用的時候如果實在html代碼中和屬性中填寫路徑，要注意使用~符號，(在script標籤中不用加)，否則是不生效的
<img src="~assets/img/tabbar/home.svg" slot="item-icon">