Promise用法講解

• 避免回調(diào)地獄，解決異步多次回調(diào)問題

• Promise構(gòu)造函數(shù)接受兩個(gè)個(gè)函數(shù)作為參數(shù)，該函數(shù)的兩個(gè)參數(shù)分別是resolve和reject

• resolve：將Promise對(duì)象的狀態(tài)從“未完成”變?yōu)椤俺晒Α?在異步操作成功時(shí)調(diào)用，并將異步操作的結(jié)果，作為參數(shù)傳遞出去,在then()的第一個(gè)函數(shù)中使用

• reject：將Promise對(duì)象的狀態(tài)從“未完成”變?yōu)椤笆　?，在異步操作失敗時(shí)調(diào)用，并將異步操作報(bào)出的錯(cuò)誤，作為參數(shù)傳遞出去，在catch()中使用

• Promise實(shí)例生成以后，可以用then方法分別指定resolved狀態(tài)和rejected狀態(tài)的回調(diào)函數(shù)

     runAsync.then(function(value) {
       // success
     }, function(error) {
       // failure
     });
  

• 有一層回調(diào)的實(shí)例

   function runAsync(){
       var p = new Promise(function(resolve, reject){
           //做一些異步操作
           setTimeout(function(){
               console.log('執(zhí)行完成');
               resolve('隨便什么數(shù)據(jù)');
           }, 2000);
       });
       return p;            
   }
    runAsync().then(function(data) {
       console.log(data);
       //后面可以用傳過來的數(shù)據(jù)做些其他操作
   });
  
   ES6寫法一:
   let runAsync = () => {
     return new Promise((resolve, reject) => {
       setTimeout(() => {
               console.log('執(zhí)行完成');
               resolve('隨便什么數(shù)據(jù)');
           }, 2000);
     });
   }
   
   runAsync().then((value) => {
     console.log(value);
   });
   ES6寫法二:
   let runAsync = new Promise((resolve, reject) => {
       setTimeout(() => {
           console.log('執(zhí)行完成');
           resolve('隨便什么數(shù)據(jù)');
       }, 2000);
   });
  
   runAsync.then((value) => {
       console.log(value);
   });
  

• 有多個(gè)回調(diào)函數(shù)，鏈?zhǔn)讲僮鞯挠梅?/strong>

    var runAsync1 = new Promise(function(resolve, reject){
        //做一些異步操作
        setTimeout(function(){
            console.log('異步任務(wù)1執(zhí)行完成');
            resolve('隨便什么數(shù)據(jù)1');
        }, 1000);
    });
       
    var runAsync2 = new Promise(function(resolve, reject){
        //做一些異步操作
        setTimeout(function(){
            console.log('異步任務(wù)2執(zhí)行完成');
            resolve('隨便什么數(shù)據(jù)2');
        }, 2000);
    });
       
    var runAsync3 = new Promise(function(resolve, reject){
        //做一些異步操作
        setTimeout(function(){
            console.log('異步任務(wù)3執(zhí)行完成');
            resolve('隨便什么數(shù)據(jù)3');
        }, 2000);
    });
    
    runAsync1
    .then(function(data){
        console.log(data);
        return runAsync2;
    })
    .then(function(data){
        console.log(data);
        return runAsync3;
    })
    .then(function(data){
        console.log(data);
    });    
  

• 基礎(chǔ)完整的promise實(shí)例，包含成功失敗回調(diào)

    function getNumber(){
        var p = new Promise(function(resolve, reject){
            //做一些異步操作
            setTimeout(function(){
                var num = Math.ceil(Math.random()*10); //生成1-10的隨機(jī)數(shù)
                if(num<=5){
                    resolve(num);
                }
                else{
                    reject('數(shù)字太大了');
                }
            }, 2000);
        });
        return p;            
    }
  
    //使用一
    getNumber()
    .then(
        function(data){
            console.log('resolved');
            console.log(data);
        }, 
        function(reason, data){
            console.log('rejected');
            console.log(reason);
        }
    );
    //使用二
    getNumber()
    .then(function(data){
        console.log('resolved');
        console.log(data);
        //即使在then使用是內(nèi)部報(bào)錯(cuò)也會(huì)進(jìn)入catch，不會(huì)在控制臺(tái)報(bào)錯(cuò)
    })
    .catch(function(reason){
        console.log('rejected');
        console.log(reason);
    });
  

• all的用法

    //適用預(yù)加載網(wǎng)頁(yè)，初始化數(shù)據(jù)
    var runAsync1 = new Promise(function(resolve, reject) {
            //做一些異步操作
        setTimeout(function() {
            console.log('異步任務(wù)1執(zhí)行完成');
            resolve('隨便什么數(shù)據(jù)1');
        }, 1000);
    });
  
    var runAsync2 = new Promise(function(resolve, reject) {
        //做一些異步操作
        setTimeout(function() {
            console.log('異步任務(wù)2執(zhí)行完成');
            resolve('隨便什么數(shù)據(jù)2');
        }, 2000);
    });
  
    var runAsync3 = new Promise(function(resolve, reject) {
        //做一些異步操作
        setTimeout(function() {
            console.log('異步任務(wù)3執(zhí)行完成');
            resolve('隨便什么數(shù)據(jù)3');
        }, 2000);
    });
    
    Promise
        .all([runAsync1, runAsync2, runAsync3])
        .then(function(results) {
            console.log(results);
    });
  

• race的用法

    //適用于請(qǐng)求設(shè)置超時(shí)時(shí)間，未加載成功時(shí)
    var runAsync1 = new Promise(function(resolve, reject) {
            //做一些異步操作
        setTimeout(function() {
            console.log('異步任務(wù)1執(zhí)行完成');
            resolve('隨便什么數(shù)據(jù)1');
        }, 1000);
    });
  
    var runAsync2 = new Promise(function(resolve, reject) {
        //做一些異步操作
        setTimeout(function() {
            console.log('異步任務(wù)2執(zhí)行完成');
            resolve('隨便什么數(shù)據(jù)2');
        }, 2000);
    });
  
    var runAsync3 = new Promise(function(resolve, reject) {
        //做一些異步操作
        setTimeout(function() {
            console.log('異步任務(wù)3執(zhí)行完成');
            resolve('隨便什么數(shù)據(jù)3');
        }, 2000);
    });
    Promise
    .race([runAsync1, runAsync2, runAsync3])
    .then(function(results){
        console.log(results);
    });
  

• race和all的區(qū)別

• 不同點(diǎn):all順序執(zhí)行，race誰(shuí)快誰(shuí)先執(zhí)行

• 相同點(diǎn):并行執(zhí)行多個(gè)異步操作，并且在一個(gè)回調(diào)中處理所有的返回?cái)?shù)據(jù)