淺談js promise看這篇足夠了,淺談jspromise足夠

來源:互聯網
上載者:User

淺談js promise看這篇足夠了,淺談jspromise足夠

一、背景

大家都知道nodejs很快,為什麼會這麼快呢,原因就是node採用非同步回調的方式來處理需要等待的事件,使得代碼會繼續往下執行不用在某個地方等待著。但是也有一個不好的地方,當我們有很多回調的時候,比如這個回調執行完需要去執行下個回調,然後接著再執行下個回調,這樣就會造成層層嵌套,代碼不清晰,很容易進入“回調監獄”,就容易造成下邊的例子:

async(1, function(value){ async(value, function(value){ async(value, function(value){  async(value, function(value){  async(value, function(value){   async(value, final);  });  }); }); });});

這樣的寫法會讓人崩潰,那麼有什麼辦法可以解決這個問題呢,或者有其他別的寫法嗎?答案是有的,es6新出的promise對象已經es7的async await都可以解決這個問題,當然這裡先介紹promise對象,es7的async await將在後邊的文章中分享。下邊將來介紹Promise對象。

二、簡介

Promise,他是一個對象,是用來處理非同步作業的,可以讓我們寫非同步呼叫的時候寫起來更加優雅,更加美觀便於閱讀。顧名思義為承諾、確保的意思,意思是使用了Promise之後他肯定會給我們回覆,無論成功或者失敗都會給我們一個回覆,所以我們就不用擔心他跑了哈哈。所以,Promise有三種狀態:pending(進行中),resolved(完成),rejected(失敗)。只有非同步返回的結構可以改變其狀態。所以,promise的過程一般只有兩種:pending->resolved或者pending->rejected。

promise對象還有一個比較常用的then方法,用來執行回呼函數,then方法接受兩個參數,第一個是成功的resolved的回調,另一個是失敗rejected的回調,第二個失敗的回調參數可選。並且then方法裡也可以返回promise對象,這樣就可以鏈式調用了。接下來上代碼:

var Pro = function (time) {   //返回一個Promise對象   return new Promise(function (resolve, reject) {    console.log('123');    //類比介面調用    setTimeout(function () {     //這裡告訴Promise 成功了,然後去執行then方法的第一個函數     resolve('成功返回');    }, time);   })  };  (function(){   console.log('start');   Pro(3000)   .then(function(data){    console.log(data);    return Pro(5000);})   .then(function(data){    console.log(data);    console.log('end');   })  })();

上邊代碼中,定義了一個Pro變數,然後把一個匿名函數賦給他,函數返回一個Promise對象,然後對象裡邊接收一個函數,分別把resolve跟reject方法當參數傳進去,用setTimeOut來類比非同步請求,當執行resolve方法後就會調用then方法的一個函數。結果如下:

三、Promise 的api 

1、Promise.resolve()
2、Promise.reject()
3、Promise.prototype.then()
4、Promise.prototype.catch()
5、Promise.all() // 所有的都有完成,相當於 且
6、Promise.race() // 完成一個即可,相當於 或

1、Promise.resolve()的作用將現有對象轉為Promise對象resolvedl;Promise.resolve('test')==new Promise(resolve=>resolve('test'))

2、Promise.reject()也是返回一個Promise對象,狀態為rejected;

3、then方法上邊已經做介紹,這裡就不再介紹。

4、catch():發生錯誤的回呼函數。

5、Promise.all()適合用於所有的結果都完成了才去執行then()成功的操作。舉個例子:

let p1 =new Promise(function(resolve,reject){   resolve(1);  });  let p2 = new Promise(function(resolve,reject){   resolve(2);  });  let p3 = new Promise(function(resolve,reject){   resolve(3);  });  Promise.all([p1, p2, p3]).then(function (results) {   console.log('success:'+results);  }).catch(function(r){   console.log("error");   console.log(r);  });

最後輸出:

6、Promise.race()的作用也是同時執行多個執行個體,只要有一個執行個體改變狀態,Promise就改為那個執行個體所改變的狀態;

四、例子

var Pro = function () {   //返回一個Promise對象   return new Promise(function (resolve, reject) {    //類比介面調用    setTimeout(function () {     resolve(true);    }, 1000);   })  };  var Pro2 = function () {   //返回一個Promise對象   return new Promise(function (resolve, reject) {    //類比介面調用    setTimeout(function () {     resolve('Pro2成功執行');    }, 1000);   })  };    Pro().then(function(data){   var val = data;   console.log(val)   if (val) {    console.log(1111)    return Pro2()   }     }).then(function(data1){   console.log(data1)  })

輸出:

這樣就可以用then方法可以實現鏈式調用了。

以上這篇淺談js promise看這篇足夠了就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援幫客之家。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.