ECMAScript6 promise

promise
概要:ajax戻り値はpromise宣言関数:new Promise(callback関数);
1.promise状態:デフォルト:pendingで状態を変更し、resolveまたはrejectで状態コールバックに成功する:reslove失敗状態コールバック:reject
2.promiseインスタンス化後、thenメソッドによってトリガーされ、thenはパラメータとして2つのコールバック関数を受信し、1つ目は成功し、2つ目は失敗した.
3.thenメソッドを使用した後、新しいpromiseを返します.デフォルトは正しいです.
出現の目標:コールバック地獄(callback hell)を解決し、非同期プログラミングの問題を解決する.

var p = new Promise((res,rej)=>{

//res,rej      ，     ，
//PromiseStatus           ，  ，  
// return res，rej     

})

書き方:
書き方1

p.then((data)=>{
    //promise          
    console.log(data)
},()=>{
    console.log('  ');
}) ///      ，          

書き方2

p.then(()=>{
    console.log('  ')
})
p.catch(()=>{
    console.log('  ')
})

p.then(()=>{})は戻り値があるか、戻り値がpromiseか、デフォルトでresolvedが返される場合の例:チェーン呼び出し

p
.then(()={
    console.log(1);
    //then        ，               
})  
.then(()={
    console.log(2);
})
.catch((err)={
    console.log(err)
})

途中のある点でジャンプしたい場合は、promiseがデフォルトで正しい場合を返すため、Promise.reject(' ')メソッドとnew Promise((resolve,reject)=>{ reject(' ') })メソッドを投げ出すことができます.Promise.reject(reason)メソッドは、rejectedのステータスを持つ新しいPromiseインスタンスも返します.

var P1 = new Promise((resolved,rejected)=>{
    resolved('start count!');
})
P1.then((data)=>{
  console.log(data);
}).then(()=>{
  console.log('1');
}).then(()=>{
  console.log('2');
  return Promise.reject('3   ');
}).then(()=>{
  console.log('3');
}).then(()=>{
  console.log('4');
}).catch((err)=>{
  console.log(err);
})
//1 
//2
//3    

catchメソッドにも戻り値があり、resolve状態を返すpromise

var P1 = new Promise((resolved,rejected)=>{
    resolved('start count!');
})
P1.then((data)=>{
  console.log(data);
}).then(()=>{
  console.log('1');
}).then(()=>{
  console.log('2');
  return Promise.reject('3   ');
}).then(()=>{
  console.log('3');
}).then(()=>{
  console.log('4');
}).catch((err)=>{
  console.log(err);
}).then(()=>{
  console.log('5');
});

印刷結果:1、2、3エラー、5
Promise.all
関数はallメソッドを実行し、完了したら配列を返し、resolveでこの配列例を受信します.

Promise.all([   
    $.ajax(...),
    $.ajax(...),
    $.ajax(...)
]).then(arr=>{
    console.log(arr);
},(res)=>{
    alert("  : "+res);
});

もし間違いがあったらPromise.allはcatchで最初のエラー(一意)を処理し、残りのエラーは処理しません.

var a1 = new Promise((resolved,rejected)=>{
    setTimeout(()=>{
        resolved('A1'); 
    },1300);
});
var a2 = new Promise((resolved,rejected)=>{
    setTimeout(()=>{
        //resolved('A2');   
        rejected('A2   ')
    },600);
});
var a3 = new Promise((resolved,rejected)=>{
    setTimeout(()=>{
        //resolved('A3');   
        rejected('A3   ');
    },900);
});

var allP = Promise.all([a1,a2,a3]);
allP.then((args)=>{
    console.log('-----------success-------------')

    args.forEach((item)=>{
        console.log(item);
    })
},(err)=>{
    console.log('------------failed------------')

    console.log(err);
});

//------------failed------------
//A2   

正しいブランチが行かず、エラーが発生した場合は、最初に発生したブランチのみを処理します.
Promise.race
Promiseコレクションの中で、どのpromiseが先に完成して、誰を処理して、残りは操作しません

var a1 = new Promise((resolved,rejected)=>{
    setTimeout(()=>{
        resolved('A1'); 
    },1300);
});
var a2 = new Promise((resolved,rejected)=>{
    setTimeout(()=>{
        resolved('A2'); 
    },600);
});
var a3 = new Promise((resolved,rejected)=>{
    setTimeout(()=>{
        resolved('A3'); 
    },900);
});

var allP = Promise.race([a1,a2,a3]);
allP.then((args)=>{
    console.log('-----------success-------------')
    console.log(args);
},(err)=>{
    console.log('------------failed------------')

    console.log(err);
});
//-----------success-------------
//A2

async await
概要:ES 8 2017は同期方式を新たに使用し、非同期操作例を実行する.

async function fn1(){
    //        
    //        ，      ，        
    let data1 = await $.get({url:'xxx',dataType:'json'});
    if(data1>10){
        let data2 = await $.get({url:'xxx',dataType:'json'});
    }else{  
        let data3 = await $.get({url:'xxx',dataType:'json'});
    }

    console.log(data1,data2,data3)
}

コード解釈:最初のコールバック関数を実行してデータdata 1を取得し、data 1の状況を判断し、さらに後続の非同期操作を行う利点:同期方式を用いて、非同期操作内容を書く