Promise對(duì)象

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

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

Promise 對(duì)象

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


特點(diǎn)
then的鏈?zhǔn)秸{(diào)用
Promise.all()

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

特點(diǎn)

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

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

then 的鏈?zhǔn)秸{(diào)用 第一個(gè)回調(diào)函數(shù)返回正常值

使用Mock模擬接口，定義了兩個(gè)接口

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方法依次指定了兩個(gè)回調(diào)函數(shù)。
第一個(gè)回調(diào)函數(shù)完成后，會(huì)將返回結(jié)果
作為第二個(gè)回調(diào)函數(shù)的參數(shù)傳入
通過運(yùn)行結(jié)果即可知

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

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

getIndexData()

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

如果是這樣，也就是還存在異步，則第二個(gè)回調(diào)的執(zhí)行就需等待第一個(gè)執(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)才會(huì)變成Fulfilled，此時(shí)p1和p2的返回值組成一個(gè)數(shù)組，傳遞給p的回調(diào)函數(shù)；

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

均為p1和p2增加了catch函數(shù)，則，如果p1或者p2發(fā)生reject或者其它異常，那么會(huì)由自己的catch函數(shù)捕獲，等到執(zhí)行完catch，實(shí)例的狀態(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，則最終的就會(huì)被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]