promise用法解析

fai1017 發(fā)布于2019-08-26 11:33 / 1170人閱讀

摘要：這時(shí)，第二個(gè)方法指定的回調(diào)函數(shù)，就會等待這個(gè)新的對象狀態(tài)發(fā)生變化。

1.概述

javascript是單線程語言（單線程/多線程、阻塞/非阻塞、同步、異步）參考此文章，所有的任務(wù)都是按順序執(zhí)行的，但是對于很耗時(shí)的操作采用異步的方式（前一個(gè)任務(wù)結(jié)束的時(shí)候，不是執(zhí)行下一個(gè)任務(wù)，而是執(zhí)行回調(diào)函數(shù)，后一個(gè)任務(wù)則是不等前一個(gè)任務(wù)結(jié)束就執(zhí)行）參考此文章，js中異步編程的四種方法：回調(diào)函數(shù)、事件監(jiān)聽、發(fā)布/訂閱、Promise對象,這里討論promise的用法，promise是es6增加的內(nèi)容，使得在異步編程中不用過多的嵌套回調(diào)函數(shù)，讓異步操作變得更加簡單

2.Promise介紹 2.1 Promise構(gòu)造函數(shù)

Promise構(gòu)造函數(shù)接收一個(gè)函數(shù)作為參數(shù)，此函數(shù)又有兩個(gè)參數(shù)分別為resolve和reject，這兩個(gè)參數(shù)也是函數(shù)

  const promise = new Promise(function(resolve, reject) {
  // 異步操作的代碼
  if(success) {
    return resolve(data); // data為異步操作成功返回的數(shù)據(jù)
  } else {
    return reject(error); //data為失敗時(shí)返回的數(shù)據(jù)
  }
})

2.2 resolve和reject

promise對象類似于一個(gè)容器（也可以說是一個(gè)狀態(tài)機(jī)），里面包含著異步操作，異步操作會有兩種結(jié)果：成功或失敗。當(dāng)異步操作成功就會將pending(執(zhí)行中狀態(tài))轉(zhuǎn)為fulfilled(成功狀態(tài))同時(shí)觸發(fā)resolve函數(shù)，用來將操作成功后得到的結(jié)果傳遞出去；當(dāng)異步操作失敗就會將pending(執(zhí)行中狀態(tài))轉(zhuǎn)為reject（拒絕狀態(tài))同時(shí)觸發(fā)reject函數(shù)，用來將操作失敗后報(bào)出的錯(cuò)誤傳遞出去

const promise = new Promise(function(resolve, reject) {
  // 異步操作的代碼
  if(success) {
    return resolve(data); // data為異步操作成功返回的數(shù)據(jù)
  } else {
    return reject(error); //data為失敗時(shí)返回的數(shù)據(jù)
  }
})

我們來看下面代碼：

  function fn1() {
    return new Promise(function(resolve, reject){
      setTimeout(() => {
        console.log("fn1")
      },1000)
    })
  }
  function fn2() {
    return new Promise(function(resolve, reject){
      setTimeout(() => {
        console.log("fn2")
      },2000)
    })
  }
fn1().then(fn2)

輸出為：
fn1
fn2函數(shù)不執(zhí)行，這個(gè)時(shí)候我們需要調(diào)用resolve函數(shù)以便執(zhí)行then()方法中的回調(diào)函數(shù)fn2

function fn1() {
    return new Promise(function(resolve, reject){
      setTimeout(() => {
        console.log("fn1")
        resolve("fn1")
      },1000)
    })
  }

輸出為：
fn1
fn2
如果我們在fn1中調(diào)用reject函數(shù)時(shí)會出現(xiàn)什么情況呢？

function fn1() {
    return new Promise(function(resolve, reject){
      setTimeout(() => {
        console.log("fn1")
        // resolve("fn1")
        reject("錯(cuò)誤"+"fn1")
      },1000)
    })
  }
  fn1().then(fn2).then((data) => {
    console.log(data)
  })

輸出為：

提示錯(cuò)誤未捕獲，所以需要在then()方法中添加第二個(gè)回到函數(shù)來處理出錯(cuò)信息

  fn1().then(fn2).then((data) => {
    console.log(data)
  }, (err) => {
    console.log(err)
  })

輸出為：

2.3 then（）方法

當(dāng)promise實(shí)例生成以后，后面跟then方法，其的第一個(gè)回調(diào)函數(shù)來處理resolve函數(shù)傳遞的數(shù)據(jù)，第二個(gè)回調(diào)函數(shù)來處理reject函數(shù)傳遞的數(shù)據(jù)，以上的流程用代碼展示如下

promise
  .then(function(data){
    //拿到返回的數(shù)據(jù)之后做一些處理
    console.log(data)
  }, function(error) {
    //返回失敗時(shí)做一些處理
    console.log(error)
  })

2.3.1 then()的返回值

then（）方式是Promise實(shí)例的方法，此then方法定義在原型對象（Promise.prototype）上，then()方法的返回值是一個(gè)新的Promise實(shí)例（不是原來那個(gè)Promise，原來那個(gè)Promise已經(jīng)承諾過）所以我們可以采用鏈?zhǔn)降膶懛?/p>

var p1 = new Promise( (resolve, reject) => {
    setTimeout(() => resolve("p1"), 10);
});

p1.then( ret => {
    console.log(ret);
    return "then1";
}).then( ret => {
    console.log(ret);
    return "then2";
}).then( ret => {
    console.log(ret);
});

執(zhí)行順序：
p1>then1>then2
從第二個(gè)then()方法開始，它們的resolve中的參數(shù)就是前一個(gè)then()中的resolve的return語句的返回值
采用鏈?zhǔn)降膖hen，可以指定一組按照次序調(diào)用的回調(diào)函數(shù)。這時(shí)，前一個(gè)回調(diào)函數(shù)，有可能返回的還是一個(gè)Promise對象（即有異步操作），這時(shí)后一個(gè)回調(diào)函數(shù)，就會等待該P(yáng)romise對象的狀態(tài)發(fā)生變化，才會被調(diào)用

getJSON("/post/1.json").then(function(post) {
  return getJSON(post.commentURL);}).then(function funcA(comments) {
  console.log("resolved: ", comments);}, function funcB(err){
  console.log("rejected: ", err);})

上面代碼中，第一個(gè)then方法指定的回調(diào)函數(shù)，返回的是另一個(gè)Promise對象。這時(shí)，第二個(gè)then方法指定的回調(diào)函數(shù)，就會等待這個(gè)新的Promise對象狀態(tài)發(fā)生變化。如果變?yōu)閞esolved，就調(diào)用funcA，如果狀態(tài)變?yōu)閞ejected，就調(diào)用funcB。
如果采用箭頭函數(shù)，上面的代碼可以寫得更簡潔

getJSON("/post/1.json").then(
  post => getJSON(post.commentURL)).then(
  comments => console.log("resolved: ", comments),
  err => console.log("rejected: ", err));

promise鏈?zhǔn)綄懛ㄈ缦拢?/p>

  function fn1() {
    return new Promise(function(resolve, reject){
      setTimeout(() => {
        console.log("fn1")
        resolve("fn1")
      },1000)
    })
  }
  function fn2() {
    return new Promise(function(resolve, reject){
      setTimeout(() => {
        console.log("fn2")
        resolve("fn2")
      },2000)
    })
  }
  function fn3() {
    return new Promise(function(resolve, reject){
      setTimeout(() => {
        console.log("fn3")
        resolve("fn3")
      },3000)
    })
  }
  function fn4() {
    return new Promise(function(resolve, reject){
      setTimeout(() => {
        console.log("fn4")
        resolve("fn4")
      },4000)
    })
  }
  fn1().then(fn2).then(fn3).then((data) => {
    console.log(data)
  }, (err) => {
    console.log(err)
  })

依次輸出為：fn1>fn2>fn3
同時(shí)我們還可以更改執(zhí)行的先后順序

  function fn1() {
    return new Promise(function(resolve, reject){
      setTimeout(() => {
        console.log("fn1")
        reject(false)
      },1000)
    })
  }
  function fn2() {
    return new Promise(function(resolve, reject){
      setTimeout(() => {
        console.log("fn2")
        resolve("fn2")
      },2000)
    })
  }
  function fn3() {
    return new Promise(function(resolve, reject){
      setTimeout(() => {
        console.log("fn3")
        resolve("fn3")
      },3000)
    })
  }
  function fn4() {
    return new Promise(function(resolve, reject){
      setTimeout(() => {
        console.log("fn4")
        resolve("fn4")
      },4000)
    })
  }
  fn1().then(fn2).then(fn3).then((data) => {
    console.log(data)
  }, (err) => {
    if(err == false){
      fn3().then(fn4)
    }
  })

輸出為：fn1>fn3>fn4

2.4 catch（）方法

我們在開發(fā)時(shí)傾向于用catch（）方法來處理異常，而不是在then()方法里寫入第二個(gè)回調(diào)函數(shù)，這種寫法類似于.then(null, rejection)

promise
  .then(function(data){
    //拿到返回的數(shù)據(jù)之后做一些處理
    console.log(data)
  })
  .catch(function(error) {
    //返回失敗時(shí)做一些處理
    console.log(error)
  }

為什么要采用這么catch（）方法呢？我們來看一個(gè)例子：

const promise = new Promise((resolve,reject) => {
  console.log(1)
  resolve("成功")
})
promise
  .then((data) => {
    console.log(data)
    console.log(a)
  }, (err) => {
    console.log(err)
  })

輸出為：
1
成功
但是沒有捕捉到回調(diào)函數(shù)里a未定義
這個(gè)時(shí)候我們來該寫以上代碼
1
成功
ReferenceError: a is not defined
Promise對象的Error對象具有冒泡性質(zhì)，會一直向后傳遞，直到被捕獲為止。也就是說，錯(cuò)誤總是會被下一個(gè)catch語句捕獲

var p = new Promise( (resolve, reject) => {
    setTimeout(() => resolve("p1"), 10);
});

p.then( ret => {
    console.log(ret);
    throw new Error("then1");
    return "then1";
}).then( ret => {
    console.log(ret);
    throw new Error("then2");
    return "then2";
}).catch( err => {
    // 可以捕抓到前面的出現(xiàn)的錯(cuò)誤。
    console.log(err.toString());
});

輸出為：
p1
Error: then1

2.4.1 catch（）返回值

既然catch()是.then(null, rejection)的別名，那么catch()就會返回一個(gè)Promise對象，因此在后面還可以接著調(diào)用then方法

var p = new Promise((resolve, reject) => {
    resolve(x + 2);
});
p.then( () => {
    console.log("nothing");
}).catch( err => {
    console.log(err.toString());
    return "catch";
}).then( ret => {
    console.log(ret);
});

輸出為：
ReferenceError: x is not defined
catch
當(dāng)出錯(cuò)時(shí)，catch會先處理之前的錯(cuò)誤，然后通過return語句，將值繼續(xù)傳遞給后一個(gè)then方法中，如果沒有報(bào)錯(cuò)，則跳過catch，示例如下：

var p = new Promise((resolve, reject) => {
    resolve("p");
});
p.then( ret => {
    console.log(ret);
    return "then1";
}).catch( err => {
    console.log(err.toString());
    return "catch";
}).then( ret => {
    console.log(ret);
});

3. promise用法解析 3.1 用Promise實(shí)現(xiàn)ajax操作

const getJSON = function(url) {
  const promise = new Promise(function(resolve, reject){
    const handler = function() {
      if (this.readyState !== 4) {
        return;
      }
      if (this.status === 200) {
        resolve(this.response);
      } else {
        reject(new Error(this.statusText));
      }
    };
    const client = new XMLHttpRequest();
    client.open("GET", url);
    client.onreadystatechange = handler;
    client.responseType = "json";
    client.setRequestHeader("Accept", "application/json");
    client.send();

  });

  return promise;
};

getJSON("/posts.json").then(function(json) {
  console.log("Contents: " + json);
}, function(error) {
  console.error("出錯(cuò)了", error);
});

3.2 promise和ajax方法結(jié)合

var http = {
    get: function(url) {
        var promise = new Promise(function(resolve, reject) {
            $.ajax({
                url: url,
                method: "get",
                success: function(data) {
                    resolve(data);
                },
                error: function(xhr, statusText) {
                    reject(statusText);
                }
            });
        });
        return promise;
    }
};
http.get("data.php").then(function(data) {
    document.write(data);
}, function(err) {
    document.write(err);
});

3.3 用promise實(shí)現(xiàn)異步加載圖片的例子

function loadImageAsync(url) {
  return new Promise(function(resolve, reject) {
    const image = new Image();

    image.onload = function() {
      resolve(image);
    };

    image.onerror = function() {
      reject(new Error("Could not load image at " + url));
    };

    image.src = url;
  });
}
var loadImage1 = loadImageAsync(url);
loadImage1.then(function success() {
    console.log("success");
}, function fail() {
    console.log("fail");
});

3.4 promise和axios方法結(jié)合

function fetch(url, params) {
  return new Promise((resolve, reject) => {
    axios.post(url, params)
      .then(response => {
        resolve(response.data);
      }, error => {
        reject(error);
      })
      .catch(error => {
        reject(error)
      })
  })
}

function lineStatus(params) {
  return fetch("/ProductionLine/GetStatus", params)
}
function statisticsData(params) {
  return fetch("/ProductionLine/GetWeightStatistics", params)
}

      lineStatus(this.lineId)
        .then((result) => {
          this.deviceStatus.run = result.TotleMoveMotor
          this.deviceStatus.stop = result.TotleStopMotor
          this.deviceStatus.lost = result.TotleLoseMotor
          this.deviceStatus.alarm = result.TotleAlarmMotor
          this.ProductionStatus = result.ProductionStatus
          console.log(result)
        })
        .catch((error) => {
          console.log("瓦特了...(；′⌒`)")
        })

      statisticsData(this.lineId)
        .then((result) => {
          this.outputData.totalOutput = result.MainConveyorModel.OutPut
          this.outputData.instantWeight = result.MainConveyorModel.InstantWeight
          this.outputData.runningTime = result.MainConveyorModel.RunningTime
          this.outputData.motorLoad = result.MainConveyorModel.MotorLoad
          // console.log(result)
        })
        .catch((error) => {
          console.log("瓦特了...(；′⌒`)")
        })

以上是Promise在開發(fā)中常見的用法,參考了以下幾篇文章，特此感謝作者

Promise 對象[阮一峰]

[es6系列]學(xué)習(xí)Promise

阮一峰的ES6---Promise對象

對Promise中的resolve，reject，catch的理解

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

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

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

發(fā)表評論

登陸后可評論

0條評論

fai1017

男|高級講師

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

TA的文章

2021雙十一寶塔面板專業(yè)版優(yōu)惠活動（寶塔面板專業(yè)版和企業(yè)版區(qū)別）

閱讀 3067·2021-11-02 14:40
前端每日實(shí)戰(zhàn)：65# 視頻演示如何用純 CSS 創(chuàng)作一個(gè)搖搖晃晃的 loader

閱讀 869·2019-08-30 15:53
【零基礎(chǔ)入門】 css學(xué)習(xí)筆記（1）字體顏色樣式等

閱讀 1298·2019-08-30 15:53
Vue學(xué)習(xí)日記（四）——Vue狀態(tài)管理vuex

閱讀 3286·2019-08-30 13:53
HTML & CSS之小白初入江湖

閱讀 3337·2019-08-29 12:50
前端使用canvas壓縮并在線預(yù)覽圖片

閱讀 1162·2019-08-26 13:49
js 中的class

閱讀 1892·2019-08-26 12:20
JavaScript Date類使用中遇到的"bug"

閱讀 3694·2019-08-26 11:33

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

資訊專欄INFORMATION COLUMN

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

promise用法解析

相關(guān)文章

**淺述Promise用法（一）**

**ES6中Promise 承諾對象封裝異步操作解析**

Service Worker 基本用法

Eventloop不可怕，可怕的是遇上Promise

發(fā)表評論

0條評論

fai1017

男|高級講師

TA的文章

2021雙十一寶塔面板專業(yè)版優(yōu)惠活動（寶塔面板專業(yè)版和企業(yè)版區(qū)別）

前端每日實(shí)戰(zhàn)：65# 視頻演示如何用純 CSS 創(chuàng)作一個(gè)搖搖晃晃的 loader

【零基礎(chǔ)入門】 css學(xué)習(xí)筆記（1）字體顏色樣式等

Vue學(xué)習(xí)日記（四）——Vue狀態(tài)管理vuex

HTML & CSS之小白初入江湖

前端使用canvas壓縮并在線預(yù)覽圖片

js 中的class

JavaScript Date類使用中遇到的"bug"

最新活動

資訊專欄INFORMATION COLUMN

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

promise用法解析

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

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