了解JavaScript中的Promise

學習記錄，加深印象

1. 回呼函式

JavaScript是單執行緒，因此JavaScript中的瀏覽器事件、網路操作需要異步執行，而異步執行可以用回呼函式實作

	function callback() {
	    console.log('Done');
	}
	console.log('before setTimeout()');
	setTimeout(callback, 1000); // 1秒鐘后呼叫callback函式
	console.log('after setTimeout()');

• callback回呼函式，作為JundgeNum的引數

	function JundgeNum(num,callback){
	   if(num<0)
	       return setTimeout(callback,1000,1)
	   setTimeout(callback,1000,null,num)   //null，num表示callback的一二引數
	}
	JundgeNum(2,function(err,succ){
	   if(err)
	       console.log('數字小于0')
	   else                     //當callback中err引數為null時
	       console.log('成功，數字為'+succ)
	})
	console.log('test')
	//test
	//成功，數字為2    (1秒后出現)

• 將callback的兩個引數(err,succ)拆開為兩個函式來看,分別作為JundgeNum的兩個引數

    function JundgeNum(num,succ,err)
    {
      if(num<0)
          return setTimeout(err, 1000)
      setTimeout(succ, 1000)
    }
    JundgeNum(1,function(){
        console.log('成功，數字大于0')        
    },function(){
        console.log('err數字小于0')
    })
   	console.log('test')
	//test
   	//成功，數字大于0

2.回呼地獄

回呼套回呼,當回呼嵌套很深時，就稱為回呼地獄

    function JundgeNum(num,succ,err){
        if(num<0)
            return setTimeout(err, 1000,num)
        setTimeout(succ, 1000,num)
    }
    JundgeNum(2,function(num){
        console.log(num) 
        JundgeNum(4,function(num){
            console.log(num)
            JundgeNum(3,function(num){
                console.log(num)
                JundgeNum(5,function(num){
                	console.log(num)             
            	})                
            })             
        })
    })
	//4
	//16
	//9
	//25

3.Promise

• Promise是一個建構式，因此我們可以new Promise得到一個Promise的實體物件
• 在Promise上，有兩個函式，resolve(成功之后的回呼函式)，reject(失敗之后的回呼函式)
• 在Promise建構式的Prototype屬性上，有一個.then()方法，也就是說，只要是Promise建構式創建的實體，都可以訪問到.then()方法
• 我們可以在new出來的Promise實體上，呼叫.then()方法，預先為這個異步操作，指定成功 (resolve)和失敗(reject)回呼函式

    function JundgeNum(num){
        return promise=new Promise(function(resolve,reject){
            if(num<0) return setTimeout(reject,1000)
            setTimeout(resolve,1000,num*num)
        })
    }
    JundgeNum(-1).then(function(num){
        console.log(num)       //預先指定成功resolve函式
    },function(){
        console.log('小于0')        //預先指定失敗reject函式
    })
    //小于0

• 在上一個.then中,回傳一個新的promise實體，可以繼續用下一個.then處理

    function JundgeNum(num){
        return promise=new Promise(function(resolve,reject){
            setTimeout(resolve,1000,num)
        })
    }
    var p=JundgeNum(2)
    p.then(function(num){
        console.log(num)
        return JundgeNum(num*num)
    }).then(function(num){
        console.log(num)
        return JundgeNum(num*num)
    }).then(function(num){
        console.log(num)
    })
    //2
    //4
    //16

Promise單純的為了解決回呼地獄的問題，并不能幫我們減少代碼量

廖雪峰官方網站例子

// 0.5秒后回傳input*input的計算結果:
function multiply(input) {
    return new Promise(function (resolve, reject) {
        console.log('calculating ' + input + ' x ' + input + '...');
        setTimeout(resolve, 500, input * input);
    });
}

// 0.5秒后回傳input+input的計算結果:
function add(input) {
    return new Promise(function (resolve, reject) {
        console.log('calculating ' + input + ' + ' + input + '...');
        setTimeout(resolve, 500, input + input);
    });
}

var p = new Promise(function (resolve, reject) {
    console.log('start new Promise...');
    resolve(2);
});

p.then(multiply)
 .then(add)
 .then(multiply)
 .then(add)
 .then(function (result) {
    console.log('Got value: ' + result);
});

Promie中捕獲例外的兩種方式

1. 如果前面的Promise執行失敗，但不想讓后續的Promise操作被終止，可以為每個Promise指定失敗的回呼

    function JundgeNum(num){
        return promise=new Promise(function(resolve,reject){
            if(num>0||num===0)
                return setTimeout(resolve,1000,num)
            setTimeout(reject,1000,num)
        })
    }
    var p=JundgeNum(0)
    p.then(function(num){
        console.log(num)
        return JundgeNum(num-1)
    },function(err){
        console.log(err+'!!數值為負')
        return JundgeNum(err-1)
    })
    .then(function(num){
        console.log(num)
        return JundgeNum(num-1)
    },function(err){
        console.log(err+'!!數值為負')
        return JundgeNum(err-1)
    })
    .then(function(num){
        console.log(num)
    },function(err){
        console.log(err+'!!數值為負')
    })
    //0
    //-1!!數值為負
    //-2!!數值為負

2. 如果后續的promise執行依賴于前面promsie執行的結果，因此前面失敗了后面沒有執行下去的意義，則立即終止所有的Promise執行，這時可用.catch()

    function JundgeNum(num){
        return promise=new Promise(function(resolve,reject){
            if(num>0||num===0)
                return setTimeout(resolve,1000,num)
            setTimeout(reject,1000,num)
        })
    }
    var p=JundgeNum(0)
    p.then(function(num){
        console.log(num)
        return JundgeNum(num-1)
    }).then(function(num){
        console.log(num)
        return JundgeNum(num-1)
    }).then(function(num){
        console.log(num)
    }).catch(function(err){
        console.log(err+'!!數值為負')
    })
    //0
    //-1!!數值為負

catch的作用:如果前面有任何的Promise執行失敗，則立即終止所有Promise的執行，并馬上進入catch去處理Promise中拋出的例外