promise

jay_tian 發(fā)布于2019-08-23 15:32 / 2058人閱讀

摘要：是一個(gè)對象，它的內(nèi)部其實(shí)有三種狀態(tài)。已拒絕的異步操作未成功結(jié)束。方法則是將對象的狀態(tài)改變?yōu)槭?，同時(shí)將錯(cuò)誤的信息傳遞到后續(xù)錯(cuò)誤處理的操作。在第二個(gè)中拿到數(shù)據(jù)并且捕獲。使用的寫法比一般的寫法更加清晰明確。

## 前言

今天來分享下promise的用法，es6偉大發(fā)明之一，當(dāng)初我學(xué)習(xí)的時(shí)候也是蠻頭大的，不知道為啥，整個(gè)腦子就是，我在哪，我要干啥的懵圈，后面認(rèn)真學(xué)習(xí)之后，覺得真是十分好用，下面就來一起學(xué)習(xí)下吧。

為什么會有promise

首先為什么會有promise的存在，其實(shí)很多人都知道的，其中最大的問題就是在處理多個(gè)有依賴關(guān)系的異步操作時(shí)，會出現(xiàn)回調(diào)地獄（ callback hell ），如下：

$.ajax({
      url:?"....",
      success:?function?(data)?{
            $.ajax({
                  url:?"....",
                  success:?function?(data)?{
              }
          });
      }
 });

promise提供了一個(gè)優(yōu)雅的方式，來解決這個(gè)問題，同時(shí)提供了很多的錯(cuò)誤捕獲機(jī)制。

如何使用promise

我們先不講promise的理論語法，這樣會一開始就降低學(xué)習(xí)的欲望，直接來看使用案例，然后去理解。

首先看基本使用

new Promise(function (resolve, reject) {
         // 假設(shè)此處是異步請求某個(gè)數(shù)據(jù)
               $.ajax({
                  url:?"......",
                   success:?function?(res)?{
                       if (res.code === 200) {
                            resolve(res.data);
                        } else {
                           reject("獲取data失敗");
                      }
                   }
               })
})
.then(function A(data) {
        // 成功，下一步
      console.log( data);
 }, function B(error) {
        // 失敗，做相應(yīng)處理
       console.log(error)
 });
console:
sucess
error

解析：

梳理流程：

首先我們在promise函數(shù)里，執(zhí)行我們的異步操作得到data

如果成功的話，通過resolve函數(shù)數(shù)據(jù)傳遞出來，如果失敗。通過reject把錯(cuò)誤信息傳遞出來

然后在.then里可以接受傳遞出來的數(shù)據(jù)，.then()里面接受兩個(gè)函數(shù)，第一個(gè)函數(shù)接收resolve傳遞出來的值，也就是正確情況下的處理，第二個(gè)函數(shù)接收reject傳遞的信息，也就是錯(cuò)誤的情況下的處理。

Promise是一個(gè)對象，它的內(nèi)部其實(shí)有三種狀態(tài)。

初始狀態(tài)（ pending ）。

已完成（ fulfilled ）： Promise 的異步操作已結(jié)束成功。

已拒絕（ rejected ）： Promise 的異步操作未成功結(jié)束。

resolve 方法可以使 Promise 對象的狀態(tài)改變成成功，同時(shí)傳遞一個(gè)參數(shù)用于后續(xù)成功后的操作。
reject 方法則是將 Promise 對象的狀態(tài)改變?yōu)槭?，同時(shí)將錯(cuò)誤的信息傳遞到后續(xù)錯(cuò)誤處理的操作。

then(onFulfilled, onRejected)

---(onFulfilled, onRejected)

鏈?zhǔn)絫hen

當(dāng)然，我們既然解決回調(diào)地獄，一個(gè)異步，看不出來啥優(yōu)勢，現(xiàn)在看多個(gè)異步請求, 為了代碼簡約，我們用setTimeout來代替ajax請求作為異步操作，如下：

new Promise((resolve, reject) => {
     setTimeout( () => {
          if （...）{
            resolve（[1, 2, 3]）
        } else {
            reject("error");
        }
   }, 2000);
})
 .then( data => {
        console.log(value);  // 打印出[1, 2, 3]
        return new Promise( (resolve, reject)=> {   // 新的異步請求，需要promise對象
            let data2 = 1 + data;
            setTimeout( () => {
              if (...) {
                   resolve(data2);
              } else {
                  reject("error2")
              }
              
            }, 2000);
       });
  }, error => {
      cosnole.log(error)
  })
.then( data2 => {
      console.log(data2 );
 }, error => {
      cosnole.log(error)
  });

解析：

-這個(gè)例子中，第一個(gè)異步操作得到數(shù)據(jù)[1, 2, 3]，傳遞到第一個(gè)then中，我們在第一個(gè)then中運(yùn)用拿到的數(shù)據(jù)，進(jìn)行第二次異步操作，并把結(jié)果傳遞出去。在第二個(gè)then中拿到數(shù)據(jù),并且捕獲error。
可以看到本來嵌套的兩個(gè)異步操作，現(xiàn)在清晰多了，而且鏈?zhǔn)浇訜o數(shù)個(gè)then

在這里有兩個(gè)地方需要注意

then里面的可捕獲錯(cuò)誤的函數(shù)，可以捕獲到上面的所有then的錯(cuò)誤，所以只在最后一個(gè)then里，寫錯(cuò)誤捕獲函數(shù)就可以。

每次異步操作時(shí)候需要返回一個(gè)新的promise，因?yàn)橹挥杏胮romise對象才會等異步操作執(zhí)行完，才去執(zhí)行下面的then，才能拿到異步執(zhí)行后的數(shù)據(jù)，所以第二個(gè)then里的異步請求，也需要聲明Promise對象。如果then里面返回常量，可以直接返回。如下：

new Promise((resolve, reject) => {
     setTimeout( () => {
          if （...）{
            resolve（[1, 2, 3]）
        } else {
            reject("error");
        }
   }, 2000);
})
 .then( value => {
        return "222";    // 如果是直接返回常量，可直接return
    })
 .then( value2 => {
     console.log(value2 ); // 打印出222
 })

下面忽略error情況，看兩個(gè)例子，大家可以自己思考下打印結(jié)果

new Promise(resolve => {
    setTimeout( () => {
        resolve("value1");
    }, 2000);
})
 .then( value1 => {
        console.log(value1);
        (function () {
            return new Promise(resolve => {
                setTimeout(() => {
                    console.log("Mr.Laurence");
                    resolve("Merry Xmas");
                }, 2000);
            });
        }());
        return false;
    })
 .then( value => {
     console.log(value + " world");
 });

value1
false world
Mr.Laurence

new Promise( resolve => {
    console.log("Step 1");
    setTimeout(() => {
        resolve(100);
    }, 1000);
})
.then( value => {
     return new Promise(resolve => {
         console.log("Step 1-1");
         setTimeout(() => {
            resolve(110);
         }, 1000);
    })
    .then( value => {
           console.log("Step 1-2");
           return value;
    })
   .then( value => {
         console.log("Step 1-3");
         return value;
    });
})
.then(value => {
      console.log(value);
      console.log("Step 2");
});

console:
Step 1
Step 1-1
Step 1-2
Step 1-3
110
Step 2

catch

catch 方法是 then(onFulfilled, onRejected) 方法當(dāng)中 onRejected 函數(shù)的一個(gè)簡單的寫法，也就是說可以寫成 then(fn).catch(fn)，相當(dāng)于 then(fn).then(null, fn)。使用 catch 的寫法比一般的寫法更加清晰明確。我們在捕獲錯(cuò)誤的時(shí)候，直接在最后寫catch函數(shù)即可。

 let promise = new Promise(function(resolve, reject) {
    throw new Error("Explosion!");
});
promise.catch(function(error) {
      console.log(error.message); // "Explosion!"
});

上面代碼等于與下面的代碼

 let promise = new Promise(function(resolve, reject) {
    throw new Error("Explosion!");
});
promise.catch(function(error) {
      console.log(error.message); // "Explosion!"
});

異步代碼錯(cuò)誤拋出要用reject

new Promise( resolve => {
    setTimeout( () => {
        throw new Error("bye");
    }, 2000);
})
.then( value => {
 })
.catch( error => {
      console.log( "catch", error);
 });
控制臺會直接報(bào)錯(cuò) Uncaught Error: bye

解析：因?yàn)楫惒角闆r下，catch已經(jīng)執(zhí)行完了，錯(cuò)誤才拋出，所以無法捕獲，所以要用reject，如下：

new Promise( (resolve, reject) => {
    setTimeout( () => {
        reject("bye");
    }, 2000);
})
.then( value => {
        console.log( value + " world");
 })
.catch( error => {
      console.log( "catch", error);
 });

catch bye
利用reject可以抓捕到promise里throw的錯(cuò)

catch 可以捕獲then里丟出來的錯(cuò)，且按順序只抓捕第一個(gè)沒有被捕獲的錯(cuò)誤

new Promise( resolve => {
    setTimeout( () => {
        resolve();
    }, 2000);
})
.then( value => {
    throw new Error("bye");
 })
.then( value => {
   throw new Error("bye2");
 })
.catch( error => {
  console.log( "catch", error);
 });

console: Error： bye

new Promise( resolve => {
    setTimeout( () => {
        resolve();
    }, 2000);
})
.then( value => {
    throw new Error("bye");
 })
.catch( error => {
  console.log( "catch", error);
 })
.then( value => {
   throw new Error("bye2");
 })
.catch( error => {
  console.log( "catch", error);
 });

console: Error： bye
console: Error： bye2
catch 抓捕到的是第一個(gè)沒有被捕獲的錯(cuò)誤

錯(cuò)誤被捕獲后，下面代碼可以繼續(xù)執(zhí)行

new Promise(resolve => {
    setTimeout(() => {
        resolve();
    }, 1000);
})
    .then( () => {
        throw new Error("test1 error");
    })
    .catch( err => {
        console.log("I catch：", err);   // 此處捕獲了 "test1 error"，當(dāng)錯(cuò)誤被捕獲后，下面代碼可以繼續(xù)執(zhí)行
    })
    .then( () => {
        console.log(" here");
    })
    .then( () => {
        console.log("and here");
         throw new Error("test2 error");
    })
    .catch( err => {
        console.log("No, I catch：", err);  // 此處捕獲了 "test2 error"
    });

I catch： Error: test2 error
here
and here
 I catch： Error: test2 error

錯(cuò)誤在捕獲之前的代碼不會執(zhí)行

new Promise(resolve => {
    setTimeout(() => {
        resolve();
    }, 1000);
})
    .then( () => {
        throw new Error("test1 error");
    })
    .catch( err => {
       console.log("I catch：", err);   // 此處捕獲了 "test1 error"，不影響下面的代碼執(zhí)行
       throw new Error("another error"); // 在catch里面丟出錯(cuò)誤，會直接跳到下一個(gè)能被捕獲的地方。
    })
    .then( () => {
        console.log("and here");
         throw new Error("test2 error");
    })
    .catch( err => {
        console.log("No, I catch：", err);  // 此處捕獲了 "test2 error"
    });

I catch： Error: test2 error
I catch： Error: another error

new Promise(resolve => {
    setTimeout(() => {
        resolve();
    }, 1000);
})
    .then( () => {
        console.log("start");
        throw new Error("test1 error");
    })
    .then( () => {
        console.log("arrive here");
    })
    .then( () => {
        console.log("... and here");
         throw new Error("test2 error");  
    })
    .catch( err => {
        console.log("No, I catch：", err);   // 捕獲到了第一個(gè)
    });

No, I catch： Error: test1 error
    at Promise.then (:8:1

Promise.all

Promise.all([1, 2, 3])
      .then( all => {
          console.log("1：", all);
      })
[1, 2, 3]

Promise.all([function () {console.log("ooxx");}, "xxoo", false])
      .then( all => {
         console.log( all);
      });
?[?, "xxoo", false]

let p1 = new Promise( resolve => {
            setTimeout(() => {
                resolve("I"m P1");
            }, 1500);
});
let p2 = new Promise( (resolve, reject) => {
            setTimeout(() => {
                resolve("I"m P2");
            }, 1000);
 });
let p3 = new Promise( (resolve, reject) => {
            setTimeout(() => {
                resolve("I"m P3");
            }, 3000);
 });

 Promise.all([p1, p2, p3]).then( all => {
       console.log("all", all);
}).catch( err => {
        console.log("Catch：", err);
});

all (3)?["I"m P1", "I"m P2", "I"m P3"]

案例：刪除所有數(shù)據(jù)后，做一些事情、、、、
db.allDocs({include_docs: true}).then(function (result) {
  return Promise.all(result.rows.map(function (row) {
    return db.remove(row.doc);
  }));
}).then(function (arrayOfResults) {
  // All docs have really been removed() now!
});

Promise.resolve

Promise.resolve()
    .then( () => {
        console.log("Step 1");
    })

其他

Promise.resolve("foo").then(Promise.resolve("bar")).then(function (result) {
  console.log(result);
});
VM95:2 foo
如果你向 then() 傳遞的并非是一個(gè)函數(shù)（比如 promise）
它實(shí)際上會將其解釋為 then(null)，這就會導(dǎo)致前一個(gè) promise 的結(jié)果會穿透下面

How do I gain access to resultA here?

function getExample() {
    return promiseA(…).then(function(resultA) {
        // Some processing
        return promiseB(…);
    }).then(function(resultB) {
        // More processing
        return // How do I gain access to resultA here?
    });
}

解決 Break the chain

function getExample() {
    var a = promiseA(…);
    var b = a.then(function(resultA) {
        // some processing
        return promiseB(…);
    });
    return Promise.all([a, b]).then(function([resultA, resultB]) {
        // more processing
        return // something using both resultA and resultB
    });
}

GPU云服務(wù)器云服務(wù)器 Promises promise promises異步 Promise使用

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/102205.html

發(fā)表評論

登陸后可評論

0條評論

jay_tian

男|高級講師

我要關(guān)注我要私信

TA的文章

云主機(jī)能夠做什么-云主機(jī)能做什么？

閱讀 1204·2021-09-22 15:24
anchor-link-with-fixed-header

閱讀 2300·2019-08-30 15:44
Spring Boot + Mybatis + Shiro 后臺權(quán)限管理系統(tǒng)

閱讀 2630·2019-08-30 10:55
拓端數(shù)據(jù)tecdat:DT模型打好用戶流失預(yù)防針——電信客戶流失淺析

閱讀 3371·2019-08-29 13:25
CSS教你玩轉(zhuǎn)背景background-position（1）

閱讀 1656·2019-08-29 13:09
React組件中的constructor和super

閱讀 1408·2019-08-26 14:05
React 項(xiàng)目結(jié)構(gòu)和組件命名規(guī)范

閱讀 1402·2019-08-26 13:58
前端學(xué)習(xí)筆記之this——懂不懂由你，反正我是懂了

閱讀 1995·2019-08-26 11:57

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

promise

首先看基本使用

梳理流程：

Promise是一個(gè)對象，它的內(nèi)部其實(shí)有三種狀態(tài)。

解析：

在這里有兩個(gè)地方需要注意

異步代碼錯(cuò)誤拋出要用reject

catch 可以捕獲then里丟出來的錯(cuò)，且按順序只抓捕第一個(gè)沒有被捕獲的錯(cuò)誤

錯(cuò)誤被捕獲后，下面代碼可以繼續(xù)執(zhí)行

錯(cuò)誤在捕獲之前的代碼不會執(zhí)行

相關(guān)文章

Promise的幾個(gè)擴(kuò)展API總結(jié)

Promise 中的三兄弟 .all(), .race(), .allSettled()

異步發(fā)展流程 —— 手寫一個(gè)符合 Promise/A+ 規(guī)范的 Promise

實(shí)現(xiàn)Promise

Promise 對象的理解

Promise的源碼實(shí)現(xiàn)（完美符合Promise/A+規(guī)范）

發(fā)表評論

0條評論

jay_tian

男|高級講師

TA的文章

云主機(jī)能夠做什么-云主機(jī)能做什么？

anchor-link-with-fixed-header

Spring Boot + Mybatis + Shiro 后臺權(quán)限管理系統(tǒng)

拓端數(shù)據(jù)tecdat:DT模型打好用戶流失預(yù)防針——電信客戶流失淺析

CSS教你玩轉(zhuǎn)背景background-position（1）

React組件中的constructor和super

React 項(xiàng)目結(jié)構(gòu)和組件命名規(guī)范

前端學(xué)習(xí)筆記之this——懂不懂由你，反正我是懂了

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

promise

首先看基本使用

梳理流程：

Promise是一個(gè)對象，它的內(nèi)部其實(shí)有三種狀態(tài)。

解析：

在這里有兩個(gè)地方需要注意

異步代碼錯(cuò)誤拋出要用reject

catch 可以捕獲then里丟出來的錯(cuò)，且按順序只抓捕第一個(gè)沒有被捕獲的錯(cuò)誤

錯(cuò)誤被捕獲后，下面代碼可以繼續(xù)執(zhí)行

錯(cuò)誤在捕獲之前的代碼不會執(zhí)行

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

Promise是一個(gè)對象，它的內(nèi)部其實(shí)有三種狀態(tài)。

錯(cuò)誤被捕獲后，下面代碼可以繼續(xù)執(zhí)行