Promise調査

all.js

Promise.all([
  Promise.resolve(1),
  Promise.resolve(2),
  Promise.resolve(3),
])
.then(values =>{
  console.log(values[0]);
  console.log(values[1]);
  console.log(values[2]);
});
// 出力は以下
// 1
// 2
// 3

Promise.all([
  Promise.resolve(1),
  Promise.reject(new Error('error')),
  Promise.resolve(3),
])
.then(values =>{
  console.log(values[0]);
  console.log(values[1]);
  console.log(values[2]);
})
.catch(error =>{
  console.log(error);
});
// 出力は以下
// Error: error

Promise.js

var promise = new Promise(function(resolve, reject) {
  setTimeout(function() {
    resolve(0);
  }, 300);
});

promise
  .then( value =>{
    console.log(value);
    // コールバック関数内でreturnすることで、値を後続の処理に引き渡せる。
    return ++value;
  })
  .then( value =>{
    console.log(value);
    return ++value;
  })
  .then( value =>{
    console.log(value);
    return ++value;
  })
;
// 出力は以下のようになる
// 0
// 1
// 2

promise.js

var promise1 = new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", 'http://example.com');
    xhr.onload = () => resolve(xhr.status); // resolveは成功を表す
    xhr.onerror = () => reject(xhr.status); // rejectは失敗を表す
    xhr.send();
  });
});

var promise2 = new Promise((resolve, reject) => {
    throw new Error('error!'); // 例外がスローされた場合はrejected
  });
});

Promiseチェーンの例外処理.js

var promise = new Promise(function(resolve, reject) {
  setTimeout(function() {
    resolve(0);
  }, 300);
});

// catchによる例外処理
promise
  .then( value =>{
    console.log(value);
    return ++value;
  })
  .then( value =>{
    // 例外をスロー
    throw new Error('Error!');
  })
  .then( value =>{
    // 前の処理で例外がスローされているため、この処理は実行されない
    console.log(value);
    return ++value;
  })
  .catch(error => {
    console.log(error);
  })
;
// 出力は以下のようになる
// 0
// Error: Error!

race.js

var promise = Promise.race([
    new Promise(function (resolve, reject) {
        const xhr = new XMLHttpRequest();
        xhr.open("GET", 'http://example.com');
        xhr.onload = () => resolve(xhr.status);
        xhr.onerror = () => reject(xhr.status);
        xhr.send();
    }),
    new Promise(function (resolve, reject) {
         setTimeout(() => reject(new Error('request timeout')), 5000)
    })
]);
      
promise
  .then(value => console.log(value))
  .catch(error => console.log(error));

race2.js

var promise = Promise.race([
    new Promise(function (resolve, reject) {
        console.log('promise 1');
        setTimeout(() => reject(new Error('request timeout')), 5000)
    }),
    new Promise(function (resolve, reject) {
        console.log('promise 2');
        setTimeout(() => reject(new Error('request timeout')), 1000)
    })
]);
      
promise
  .then(value => console.log(value))
  .catch(error => console.log(error));
// 出力は以下
// promise 1
// promise 2
// Error: request timeout

resolveとreject.js

Promise.resolve('success');

// 上記は以下と等価
new Promise(function(resolve){
    resolve('success');
});

Promise.reject(new Error('error!'));

// 上記は以下と等価
new Promise(function(resolve,reject){
    reject(new Error('error!'));
});