javaScript ES 6のPromise簡単な事例

ES 6規格にはPromise( )があり、コールバック関数と類似している.
1:Promiseの作成例

//    
var promise = new Promise(function (resolve, reject) {
      if (success) {
          //    
          resolve(data);
      }else {
         //    
          reject(err);
      }
})
//  then()  
promise.then(function(value){
    //     
}, function(value){
    //     
})
//  
promist.then(function(value)){
    //     
}).cathc(function(value){
    //     
})

2:Promise結合fetch要求の使用

//      ，    
requestData = (url, postData)=> {
      return new Promise(function (resolve, reject) {
            //fetch    Promise
            fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Content-Encoding': 'identity'  //    
                },
                body: JSON.stringify(postData),
            }).then((response) => response.json())
                .then((responseData)=> {
                    resolve(responseData);
                })
                .catch((err)=> {
                    console.log('err', err);
                    reject(err);
                });
            });
      }
}

//       
this.requestData('http://xxx', {'name': 'jj'})
     .then( res=>{
                console.log('success');
     }).catch( err=>{
            //    
            console.log('flied');

3:Promise.allの使い方

Promise.all([promise1, promise2]).then(function(value){

}).catch(function(value){

})

Promise.allのパラメータはpromiseの配列です.配列中の操作が全部終わったら、後の応答を実行します.

var req1 = new Promise(function(resolve, reject) { 
     // A mock async action using setTimeout
     setTimeout(function() { resolve('First!'); }, 4000);
});
var req2 = new Promise(function(resolve, reject) { 
     // A mock async action using setTimeout
     setTimeout(function() { reject('Second!'); }, 3000);
});
Promise.all([req1, req2]).then(function(results) {
     console.log('Then: ', one);
}).catch(function(err) {
     console.log('Catch: ', err);
});

// From the console:
// Catch: Second!

Promise.allにpromise実行失敗rejectが現れたら、Promise.allはすぐにcatchを呼び出します.
4:Promise.raceの使い方

Promise.race([promise1, promise2]).then(function(value){

}).catch(function(value){

})

Promise.raceのパラメータもpromiseの配列です.Promise.allと違って、Promise.raceの配列の中には一つのpromiseだけが必要です.Promise.raceは次の操作に応じます.

var req1 = new Promise(function(resolve, reject) { 
     // A mock async action using setTimeout
     setTimeout(function() { resolve('First!'); }, 8000);
});
var req2 = new Promise(function(resolve, reject) { 
     // A mock async action using setTimeout
     setTimeout(function() { resolve('Second!'); }, 3000);
});
Promise.race([req1, req2]).then(function(one) {
     console.log('Then: ', one);
}).catch(function(one, two) {
     console.log('Catch: ', one);
});

// From the console:
// Then: Second!

ここでreq 2が先に実行されたら、Promise.raceのthenコールが実行されます.