ES6——Promise使用經驗

ES6中，promise是經常使用的對象。

通過promise實例，可以實現對非同步代碼的封裝，保證當非同步代碼執行完成後再執行後續處理代碼。

Promise的基本使用

resolve函數的結果可以通過then()方法接收，reject函數的結果可以被catch()方法接收

2. valid(){
3. return new Promise((resolve,reject)=>{
4. if(this.flag){
5. return resolve(true)
6. }
7. this.$refs.form.validate((valid) => {
8. if(valid){
9. resolve(valid)
10. }
11. else{
12. reject(valid);
13. }
14. })
15. })
16. }

因為element-ui中的表單自帶validate操作是非同步操作，所以我將校驗方法封裝在Promise實例中，當校驗過程結束後調用then方法就可以執行後續的操作。

當promise對象實例化的時候，就會執行promise內部的代碼。

注意，promise實例只能保證其內部的非同步操作執行完成後，再被then或者catch方法捕捉。

如下所示。

2. let valid = this.valid();
3. console.log("第一步")
4. valid.then((value)=>{
6. console.log("第三步")
8. console.log("校驗完成,校驗結果無誤")
10. }).catch((error)=>{
12. console.log("校驗校驗完成,校驗結果有誤")
14. })
15. console.log("第二步")

Promise.all()和Promise.race()

all和race方法，都是接收一個promise實例數組。

all方法是按照數組中的順序進行執行promise操作，race方法並不能確定。

區別在於，all方法是當所有的promise執行完成後才會進入then或者有一個rejcet後進入catch；而race方法是由第一個promise完成的狀態來決定。

race方法，個人用的比較少，不做多的分享。

all方法，雖然是按照數組中的promise實例的順序來執行，但是並不能保證哪個promise先執行完成，所有在必須有先後完成順序時，建議不要使用all方法

Promise.resolve()和Promise.reject()

這兩個相當於是實例化promise的一種簡約寫法

2. export const fetch = (url) => {
3. return Vue.axios({
4. method: "get",
5. url: url,
6. }).then(function(response) {
7. return Promise.resolve(response.data);
8. }).catch((error) => {
9. if(error.response.status===302){
10. router.push("/login")
11. return Promise.reject("登錄失效，請重新登錄");
12. }else{
13. return Promise.reject(error.statusText);
14. }
15. });
16. }

他可以將數據或者方法進行Promsie轉換，使他成為promise的一個實例，能被對應的.then和.catch捕獲

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！