首頁 >web前端 >js教程 >詳細介紹js中有關promise的知識點

詳細介紹js中有關promise的知識點

亚连
亚连原創
2018-06-08 10:57:491489瀏覽

下面我就來跟大家分享一個淺談js promise的使用。具有很好的參考價值,看完這篇都懂了。希望對大家有幫助。

一、背景

大家都知道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方法可以實作鍊式呼叫了。

上面是我整理給大家的,希望今後對大家有幫助。

相關文章:

JavaScript調停者模式(詳細教學)

在jQuery中有關Dom元素使用方法?

在Vue中如何實作事件響應式進度條元件

#

以上是詳細介紹js中有關promise的知識點的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn