ES6精解：promise用法

前言

今天就簡單總結一下promise的用法，在用promise以前，咱們要先了解一下什麼promise，這個東西是用來幹什麼的？

通俗易懂的講，promise其實就是一個構造函數，是用來解決異步操做的，咱們平時其實仍是會用到挺多的，好比咱們常常會嵌套一層層的函數

step1(function (value1) {

  step2(value1, function(value2){

    step3(value2,function(value3) {

      step4(value3,function(value4) {

        // ...

      });

    });

  });

});

傳統方法咱們會這樣寫，可是若是用promise就會簡單不少，以下：

(new Promise(step1))

  .then(step2)

  .then(step3)

  .then(step4);

基本用法

new Promise(function (resolve,reject) {
        console.log('promise準備階段');
        
        resolve("成功！");
        reject("失敗！");
    })

輸出結果：

promise準備階段

注意： promise總共有三個狀態，準備狀態，成功狀態，失敗狀態，這裏面promise是剛剛定義，因此是進入準備狀態，由於每new一個promise都會進入準備狀態，咱們尚未運行就進入準備狀態了，因此，咱們常常用一個函數給他包起來

function asyncPro(){
        return new Promise(function (resolve,reject) {
            console.log('promise準備階段');
            resolve("成功！");
            reject("失敗！");
        });
    }
    asyncPro();

輸出結果：

promise準備階段

這裏，只有調用asyncPro()，promise纔開始new一個

上面，你們應該也注意到了在構建promise時，有兩個參數，resolve和reject，接下來咱們重點講下這兩個

1. resolve講解

resolve其實就是異步操做成功時候執行的函數，當咱們建立一個構造函數以後，成功執行以後，咱們傳遞的參數要如何獲取呢？

function asyncPro(){
        return new Promise(function (resolve,reject) {
            console.log('promise準備階段');
            resolve("成功！");
            reject("失敗！");
        });
    }
    asyncPro().then(function (msg) {
        console.log(msg);
    });

輸出結果：

promise準備階段
成功！

注意： .then就是獲取成功時候獲取的數據

2. reject講解

上面resolve是成功的時候回調，那麼reject就是失敗以後的回調

function asyncPro(){
        return new Promise(function (resolve,reject) {
            console.log('promise準備階段');
            resolve("成功！");
            reject("失敗！");
        });
    }
    asyncPro().then(function (msg) {
        console.log(msg);
    }).catch(function (msg) {
        console.log(msg);
    });

這個通常只有在操做異常的時候纔會回調，.catch就是reject的回調，通常咱們能夠不寫

好了，上面主要簡單瞭解一下promise，接下來用一個例子來總結一下

function asyncPro(msg){
        return new Promise(function (resolve,reject) {
            console.log(msg+'：promise準備階段');
            resolve(msg+'成功！');
            reject(msg+"失敗！");
        });
    }
    asyncPro('第一步').then(function (msg) {
        console.log(msg);
        return asyncPro('第二步');
    }).then(function (msg) {
        console.log(msg);
        return asyncPro('第三步');
    }).then(function(msg){
        console.log(msg);
    });

輸出結果：

第一步：promise準備階段
第一步成功！
第二步：promise準備階段
第二步成功！
第三步：promise準備階段
第三步成功！

從上面代碼能夠看出，promise對多層嵌套時有很大的幫助，能夠對代碼很好的維護，當第一步執行完畢，要執行第二步的時候，return出第二步的函數，在下一個then中獲取返回的數據，以此類推。

以上是對promise用法簡單總結，後續會再補充。