Promise對象

maxmin 發布于2019-08-22 18:25 / 2102人閱讀

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

Promise 對象

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

特點

then的鏈式調用

Promise.all()

The Promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value.

一種異步編程的解決方案
有了Promise對象，就可以將異步操作以同步操作的流程表達出來，避免了層層嵌套的回調函數
then方式是定義在Promise.prototype上的，所以Promise實例就能調用這個方法，添加狀態改變時的回調函數了

特點

對象的狀態不受外界影響
Pending => Resolve
Pending => Fulfilled

一旦狀態改變就不會再變，任何時候都可以得到這個結果

then 的鏈式調用 第一個回調函數返回正常值

使用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的通用函數，接收url地址作為參數

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方法依次指定了兩個回調函數。
第一個回調函數完成后，會將返回結果
作為第二個回調函數的參數傳入
通過運行結果即可知

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()

第一個回調函數返回的仍舊是一個promise

如果是這樣，也就是還存在異步，則第二個回調的執行就需等待第一個執行完畢，不管是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的狀態是由p1和p2決定的

只有p1和shup2的狀態都變成了Fulfilled，p的狀態才會變成Fulfilled，此時p1和p2的返回值組成一個數組，傳遞給p的回調函數；

只要p1、p2的狀態中有一個被Rejected，p的狀態就變成Rejected，此時第一個被Rejected的實例的返回值會傳遞給p的回調函數

均為p1和p2增加了catch函數，則，如果p1或者p2發生reject或者其它異常，那么會由自己的catch函數捕獲，等到執行完catch，實例的狀態也變成了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]

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95845.html

Promise——從閱讀文檔到簡單實現（一）

摘要：意味著操作成功完成。方法接收失敗情況的回調函數作為參數，返回一個對象。參數回調函數不接收任何參數，當對象變成狀態時被調用?，F在各個方法的參數返回值功能和使用方法已經有個大概的了解了，為了進一步理解其原理，接下來我打算簡單地實現一下它。前言最近幾周參加筆試面試，總是會遇到實現異步和處理異步的問題，然而作者每次都無法完美地回答。在最近一次筆試因為 Promise 而被刷掉后，我終于下定...

yanwei 2019-08-23 15:57 評論0 收藏0
關于Promise

摘要：反之，操作失敗，對象由狀態轉換為狀態，此時回調函數會執行方法。這里需要注意的是，雖然在之后便執行了方法，但是并不是意味著往后的對象不執行了，其他的還是對象還是要執行的，只是不會再調用函數。在掘金上看見一篇寫promise的文章，感覺作者寫的很棒，文章鏈接在這：八段代碼徹底掌握 Promise 。看完之后感覺學到了很多，所以又重新把JavaScript Promise迷你書（中文版）...

546669204 2019-08-20 18:30 評論0 收藏0
js-Promise

摘要：總結用方法創建對象用或添加對象的處理函數它的作用是為實例添加狀態改變時的回調函數。方法是的別名，用于指定發生錯誤時的回調函數。一、為什么需要Promise Javascript 采用回調函數(callback)來處理異步編程。從同步編程到異步回調編程有一個適應的過程，但是如果出現多層回調嵌套，也就是我們常說的回調金字塔(Pyramid of Doom)，絕對是一種糟糕的編程體驗。于是...

xcold 2019-08-23 15:40 評論0 收藏0
簡單學習 Promise 對象

摘要：方法是的別名，用于指定發生錯誤時的回調函數。由于字符串不屬于異步操作判斷方法是字符串對象不具有方法，返回實例的狀態從一生成就是，所以回調函數會立即執行。出錯了等同于出錯了出錯了上面的代碼生成一個對象的實例，狀態為，回調函數會立即執行。引言 Promise 是異步編程的一種解決方案，比傳統的解決方案——回調和事件——更合理且強大。最近的項目要用到這個，就參照阮一峰老師的《ES6標準入門...

muzhuyu 2019-08-23 14:02 評論0 收藏0
嘗試實現一個Promise

摘要：的實現說明沒有執行里的函數說明執行了里的函數說明執行里的函數過程中出現錯誤和執行狀態時的回調函數后返回的結果都需要執行傳進來的對象不能等于當前的對象回調返回的值或者的值是對象時需要等待該對象的狀態變更設置當前狀態的狀態和值執行回調隊列里的函 function resolve_promise_value(promise,value) {//PromiseA+的實現 var th...

DTeam 2019-08-20 14:21 評論0 收藏0
關于promise的小結

摘要：則是把類似的異步處理對象和處理規則進行規范化，并按照采用統一的接口來編寫，而采取規定方法之外的寫法都會出錯。這個對象有一個方法，指定回調函數，用于在異步操作執行完后執行回調函數處理。到目前為止，已經學習了創建對象和用，方法來注冊回調函數。 Promise 本文從js的異步處理出發，引入Promise的概念，并且介紹Promise對象以及其API方法。 js里的異步處理可以參考這篇文章...

Tony_Zby 2019-08-20 17:44 評論0 收藏0