Promise對象

maxmin 發(fā)布于2019-08-22 18:25 / 2105人閱讀

摘要：對象這個東西吧，它一直困擾我很久很久了，但是之前未能靜下心來好好研究下，現(xiàn)在終于有時間好好鼓搗一下了。

Promise 對象

promise這個東西吧，它一直困擾我很久很久了，但是之前未能靜下心來好好研究下，現(xiàn)在終于有時間好好鼓搗一下了。
順帶記錄下吧~~


特點
then的鏈式調(diào)用
Promise.all()

The Promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value.
一種異步編程的解決方案
有了Promise對象，就可以將異步操作以同步操作的流程表達出來，避免了層層嵌套的回調(diào)函數(shù)
then方式是定義在Promise.prototype上的，所以Promise實例就能調(diào)用這個方法，添加狀態(tài)改變時的回調(diào)函數(shù)了

特點

對象的狀態(tài)不受外界影響
Pending => Resolve
Pending => Fulfilled

一旦狀態(tài)改變就不會再變，任何時候都可以得到這個結(jié)果

then 的鏈式調(diào)用 第一個回調(diào)函數(shù)返回正常值

使用Mock模擬接口，定義了兩個接口

Mock.mock("http://g.cn", {
    "data|0-10": [{
        "id|+1": 1,
        "thscode|1-100.2": 1,
        "zqjc": Mock.Random.csentence(5)
    }]
});

Mock.mock("http://q.cn", {
    "data|0-10": [{
        "id|+1": 1,
        "jgcg": Mock.Random.csentence(5)
    }]
});

獲取ajax的通用函數(shù)，接收url地址作為參數(shù)

function getAjax(url){
  return new Promise(function(resolve, reject) {
    axios.get(url)
    .then(function(response){
      resolve(response);
      console.log("ajax 1:", response);
    })
    .catch(function(err){
      reject(err);
      console.log(err);
    });
  });
}

下面的代碼使用then方法依次指定了兩個回調(diào)函數(shù)。
第一個回調(diào)函數(shù)完成后，會將返回結(jié)果
作為第二個回調(diào)函數(shù)的參數(shù)傳入
通過運行結(jié)果即可知

function getIndexData(){
  getAjax("http://g.cn").then(function(res) {
    console.log("第一個then: ", res);

    return res.data;
  })
  .then(function(res) {
    console.log("第二個then: ", res);
  }).catch(err => {
    console.log(err);
  })
}

getIndexData()

第一個回調(diào)函數(shù)返回的仍舊是一個promise

如果是這樣，也就是還存在異步，則第二個回調(diào)的執(zhí)行就需等待第一個執(zhí)行完畢，不管是resolve還是reject

function getAjax2(url){
  return new Promise(function(resolve, reject) {
    axios.get(url)
    .then(function(response){
      setTimeout(() => {
        resolve(response);
      }, 2000);

      console.log("ajax 2:", response);
    })
    .catch(function(err){
      reject(err);
      console.log(err);
    });
  });
}

function getIndex2Data() {
  getAjax("http://g.cn").then(res => {
    return getAjax2("http://q.cn");
  })
  .then(res => {
    console.log("in the data: ", res);
  })
  .catch(err => {
    console.log(err);
  });
}

getIndex2Data();

Promise.all()

如下代碼，定義了p1、p2，和p
p的狀態(tài)是由p1和p2決定的

只有p1和shup2的狀態(tài)都變成了Fulfilled，p的狀態(tài)才會變成Fulfilled，此時p1和p2的返回值組成一個數(shù)組，傳遞給p的回調(diào)函數(shù)；

只要p1、p2的狀態(tài)中有一個被Rejected，p的狀態(tài)就變成Rejected，此時第一個被Rejected的實例的返回值會傳遞給p的回調(diào)函數(shù)

均為p1和p2增加了catch函數(shù)，則，如果p1或者p2發(fā)生reject或者其它異常，那么會由自己的catch函數(shù)捕獲，等到執(zhí)行完catch，實例的狀態(tài)也變成了resovled

var p1 = new Promise((resolve, reject) => {
  resolve("one corgi");
})
.then(res => res)
.catch(err => err)

var p2 = new Promise((resolve, reject) => {
  resolve("two corgies");
})
.then(res => res)
.catch(err => err)

var p = Promise.all([p1, p2]);

p.then(res => {
  console.log(res);
})
.catch((err) => {
  console.log("all:", err);
});
// 輸出： ["one corgi", "two corgies"]

增加p3，不帶catch，則最終的就會被p的catch捕獲了

var p3 = new Promise((resolve, reject) => {
  reject("Error");
})
.then(res => res)

var p = Promise.all([p1, p2, p3]);

p.then(res => {
  console.log(res);
})
.catch((err) => {
  console.log("all:", err);
});

//輸出： ["all: Error]