Web Design Leaves

function oneSecMsg(msg) { //1秒経過したらメッセージを表示する関数
  // 開始時刻
  const start = Date.now();
  // 1秒経過するまでループ
  while (true) {
    //現在の時刻と開始時刻の差
    const diff = Date.now() - start;
    if (diff >= 1000) {
      // 1秒経過したらメッセージを表示して終了
      console.log(msg);
      return; 
    }
  }
}

console.log('Start');
oneSecMsg('一秒経過');
console.log('End');

//出力結果
Start
一秒経過
End

function loadimage(src) {
  //img 要素を生成
  const img = document.createElement('img');
  //img 要素の src 属性に引数で指定されたパスを設定（非同期的に行われる）
  img.src = src;
  //画像の高さと幅を取得して出力
  console.log(`height:${img.height} / width:${img.width}`);
}

//上記関数を実行
loadimage('images/01.jpg');

//出力結果（高さと幅を取得できていない）
//height:0 / width:0

function loadimage(src) {
  const img = document.createElement('img');
  img.src = src;
  //onload イベントで画像がロードされたらコールバック関数を実行
  img.onload = () => console.log(`height:${img.height} / width:${img.width}`);
}

//上記関数を実行
loadimage('images/01.jpg');

//出力結果（高さと幅を取得できている）
height:1200 / width:1800

function loadimage(src, callback) {
  const img = document.createElement('img');
  img.src = src;
  img.onload = () => callback(img);
}
 
//第2引数にコールバック関数を指定して関数を実行
loadimage('images/01.jpg', function(img) {
  console.log(`height:${img.height} / width:${img.width}`);
});

//コールバック関数をアロー関数で記述した場合の実行例
loadimage('images/01.jpg', (img) => {
  console.log(`height:${img.height} / width:${img.width}`);
}); 

// この場合は引数の括弧やブロックは省略できるので以下のようにも記述できます
loadimage('images/01.jpg', img => console.log(`height:${img.height} / width:${img.width}`));

function loadimage(src, callback) {
  const img = document.createElement('img');
  img.src = src;
  img.onload = () => callback(img);
}
 
//コールバック関数を別途定義
function logSizes(img) {
  console.log(`height:${img.height} / width:${img.width}`);
}

//第2引数にコールバック関数を指定して関数を実行
loadimage('images/01.jpg',logSizes);

function loadimage(src) {
  //Promise オブジェクトを生成し返す
  return new Promise((resolve, reject) => {
    const img = document.createElement('img');
    img.src = src;
    // 成功した場合：resolve を呼び出して結果（img）を引数に渡す
    img.onload = () => resolve(img);
    // 失敗した場合：reject を呼び出してエラーオブジェクトを引数に渡す
    img.onerror = () => reject(new Error(`Error: Image Not Found "${src}".`));
  });
}

//promise オブジェクトを生成
const promise = loadimage('images/01.jpg');

//then メソッドを使用
promise.then(
  // 非同期処理が成功したときの処理（コールバック）を登録
  (img) => console.log(`height:${img.height} / width:${img.width}`),
  // 非同期処理が失敗したときの処理（コールバック）を登録
  (error) => console.log(error.message)
);

/*** catch メソッドを使う場合 ***/
promise.then(
  // 非同期処理が成功したときの処理（コールバック）を登録
  (img) => console.log(`height:${img.height} / width:${img.width}`)
).catch(
  // 非同期処理が失敗したときの処理（コールバック）を登録
  (error) => console.log(error.message)
); 

function loadimage(src) {
  return new Promise((resolve, reject) => {
    const img = document.createElement('img');
    img.src = src;
    img.onload = () => resolve(img);
    img.onerror = () => reject(new Error(`Error: Image Not Found "${src}".`));
  });
}
 
//promise オブジェクトを生成して続けて then メソッドを使用
loadimage('images/01.jpg').then(
  (img) => console.log(`height:${img.height} / width:${img.width}`),
  (error) => console.log(error.message)
);

function loadimage(src) {
  return new Promise(function(resolve, reject) {
    const img = document.createElement('img');
    img.src = src;
    // 成功した場合（画像が正しくロードされた場合）
    img.onload = function() {
      //resolve を呼び出して結果（img）を引数に渡す
      resolve(img);
    };
    // 失敗した場合（画像がロードできなかった場合）
    img.onerror = function() {
      //reject を呼び出してエラーオブジェクトを引数に渡す
      reject( new Error(`Error: Image Not Found "${src}".`) );
    };
  });
}
 
loadimage('images/01.jpg').then(
  function(img) {
    console.log(`height:${img.height} / width:${img.width}`);
  },
  function(error) {
    console.log(error.message);
  }
);

var promise = new Promise(executor)

var promise = new Promise( function( resolve, reject ) {
  // 非同期処理（executor の処理）を記述
});;

//アロー関数での記述（上記と同じこと）
var promise = new Promise( (resolve, reject) => {
  // 非同期処理（executor の内容）を記述
});

var promise = new Promise( (resolve, reject) => {
  // 何からの非同期処理
  // 処理による結果の値（コールバック関数に渡したい値）：value
  
  /* 成功した場合 */
  //結果の値を引数に指定して第1引数の resolve を呼び出す
  resolve(value);

  /* 失敗した場合 */
  //エラーオブジェクトを引数に指定して第2引数の reject を呼び出す
  reject(Error オブジェクト);
  
});

promise.then(
  function(value) { /* 成功した場合の処理 */ }, //onFulfilled（第1引数）
  function(error) { /* 失敗した場合の処理 */ } //onRejected（第2引数）
);

//アロー関数を使って記述する場合
promise.then(
  (value) => { /* 成功した場合の処理 */ }, //onFulfilled（第1引数）
  (error) => { /* 失敗した場合の処理 */ } //onRejected（第2引数）
);

function random_results(num) {
  //Promise のインスタンスを作成して返す
  return new Promise((resolve, reject) => {
    const rand = Math.floor( Math.random() * 10 );
    setTimeout(() => {
      //成功した場合（乱数と一致した）
      if (rand === num) {
        //resolve() の引数に指定した値は、成功したときのコールバック（24行目）に渡される
        resolve(rand);
      } else { //失敗した場合（乱数と一致しない）
        // エラーオブジェクトを引数に指定
        reject(new Error(`残念でした。値：${rand}`));
      }
    }, 1000 );
  });
} 
 
//random_results() を呼び出して promise オブジェクトを生成
const promise = random_results(4);
  
//then() メソッドで処理結果（成功・失敗）により実行する処理（コールバック）を登録
promise.then(
  // 非同期処理が成功したときのコールバック onFulfilled（第1引数）
  (result) => console.log(`大当たり！：${result}`),
  // 非同期処理が失敗したときのコールバック onRejected（第2引数）
  (error) => console.log(error.message)
);

/*
実行例
大当たり！：4     //成功時
残念でした。値：8  //失敗時
*/

function random_results(num) {
  return new Promise((resolve, reject) => {
    const rand = Math.floor( Math.random() * 10 );
    setTimeout(() => {
      if (rand === num) {
        resolve(rand);
      } else {
        reject(new Error(`残念でした。値：${rand}`));
      }
    }, 1000 );
  });
} 
 
//random_results() を呼び出して promise オブジェクトを生成して then() を実行
random_results(4).then(
  (result) => console.log(`大当たり！：${result}`),
  (error) => console.log(error.message)
);

function random_results(num) {
  //Promise のインスタンスを作成して返す（処理が成功した場合だけを扱う例）
  return new Promise((resolve) => {
    const rand = Math.floor( Math.random() * 10 );
    setTimeout(() => {
      //成功した場合（乱数と一致した）
      if (rand === num) {
        //以下の引数に指定した値は、成功したときのコールバック（20行目）の引数として渡される
        resolve(rand);
      } 
    }, 100 );
  });
} 
 
//random_results() を呼び出して promise オブジェクトを生成
const promise = random_results(4);
  
//then() メソッドで成功の場合に実行する処理を登録
promise.then(
  // 非同期処理が成功したときのコールバック（第1引数）
  (result) => console.log(`大当たり！：${result}`),
);
  

function random_results(num) {
  //Promise のインスタンスを作成して返す
  return new Promise((resolve, reject) => {
    const rand = Math.floor( Math.random() * 10 );
    setTimeout(() => {
      //失敗した場合（乱数と一致しない）
      if (rand !== num) {
        //引数にはエラーオブジェクトを渡し、失敗したときのコールバック（21行目）に渡される
        reject(new Error(`残念でした。値：${rand}`));
      } 
    }, 1000 );
  });
} 
 
//promise オブジェクトを生成
const promise = random_results(4);
  
//第1引数には undefined を渡すことにより失敗した時のコールバックが呼び出される
promise.then( undefined, //第1引数
  //非同期処理が失敗したときのコールバック（第2引数）
  (error) => console.log(error.message)
);


//以下のように catch メソッドを使っても上記の then(undefined, onRejected) と同じこと
promise.catch(
  //非同期処理が失敗したときのコールバック
  (error) => console.log(error.message)
);

function random_results(num) {
  //Promise のインスタンスを作成して返す
  return new Promise((resolve, reject) => {
    const rand = Math.floor( Math.random() * 10 );
    
    //コンストラクタ内で発生した例外は自動的に捕捉され reject() を呼び出しエラーが渡されます
    throw new Error("例外発生！");
    // 例外が発生すると以降の処理は実行されません
    
    setTimeout(() => {
      //成功した場合（乱数と一致した）
      if (rand === num) {
        //以下の引数に指定した値（rand）は、成功したときのコールバックに引数として渡される
        resolve(rand);
      } else { //失敗した場合（乱数と一致しない）
        //引数に指定したエラーオブジェクトは、失敗したときのコールバック（30行目）に渡される
        reject(new Error(`残念でした。値：${rand}`));
      }
    }, 1000 );
  });
} 
 
//promise オブジェクトを生成
const promise = random_results(4);
  
promise.then(
  // 非同期処理が成功したときのコールバック
  (result) => console.log(`大当たり！：${result}`),
  // 非同期処理が失敗したときのコールバック
  (error) => console.log('失敗のコールバック：' + error.message)
);

/*
実行例
例外発生！
*/

const promise = Promise.resolve(); 

const promise = new Promise((resolve) => {
  resolve();
});

//または、以下でも同じ（引数と式の括弧を省略）
const promise = new Promise(resolve => resolve());

const promise = Promise.resolve('hello'); 

//上記は以下と同じこと
const promise = new Promise((resolve) => {
  resolve('hello');
});

promise.then( value => console.log(value) );  // hello と出力

//引数に値を渡さずに呼び出すと undefined で実行される Promise が作成されます
const promise = Promise.resolve(); 
promise.then( value => console.log(value) );  // undefined と出力

const promise = Promise.resolve('hello');

//then メソッドで登録したコールバック関数の呼び出し
promise.then((val) => {
    console.log(val);  // hello
});

//同期的な処理
console.log('こんにちは');   

//同期的な処理
console.log('ハロー'); 

//出力
/*
こんにちは
ハロー
hello
*/

const promise = Promise.reject(new Error('Error!'));

const promise = new Promise((resolve, reject) => {
  reject(new Error('Error!'));
});

//または、以下でも同じ
const promise = new Promise((resolve, reject) => reject(new Error('Error!')));

const promise = Promise.reject(new Error('Error!'));
 
promise.catch((error) => {
    console.log(error.message); //Error!
});  
  
// then メソッドを使った記述（上記と同じこと）
promise.then( undefined, (error) => {
  console.log(error.message); //Error!
}); 

//error を使わない例
promise.catch(() => {
    console.log('エラー！');  //エラー！
}); 

//catch メソッドで登録したコールバック関数の呼び出し  
Promise.reject(new Error('Error!')).catch((error) => {
    console.log(error.message);  //Error!
});  
 
//同期的な処理
console.log('こんにちは');   
 
//同期的な処理
console.log('ハロー'); 

//出力
/*
こんにちは
ハロー
Error!
*/

new Promise(function(resolve, reject) {

  setTimeout(() => resolve('hello'), 1000); //1秒で解決される

}).then(function(result) {
  
  console.log(result); // hello
  return result + ' hello2'; //結果を（処理して）返す

}).then(function(result) { 
  //8行目で return された値が result に入っている
  console.log(result); // hello hello2
  return result + ' hello3'; //結果を（処理して）返す

}).then(function(result) {
  //13行目で return された値が result に入っている
  console.log(result); //  hello hello2 hello3

}); 

/*
出力結果
hello
hello hello2
hello hello2 hello3
*/

function is_random_even() {
  //Promise のインスタンスを作成して返す
  return new Promise((resolve, reject) => {
    const rand = Math.floor( Math.random() * 10 );
    setTimeout(() => {
      //成功した場合（乱数が偶数の場合）
      if (rand%2 === 0) {
        //以下の引数に指定した値（rand）は成功したときのコールバックに result として渡される
        resolve(rand);
      } else { //失敗した場合（乱数が奇数の場合）
        //引数に指定したエラーオブジェクトは失敗したときのコールバックに error として渡される
        reject(new Error(`偶数ではありません。値：${rand}`));
      }
    }, 1000 );
  });
}   
  
  
//promise オブジェクトを生成
const promise = is_random_even();  
  
promise.then(
  // 非同期処理が成功したときのコールバック
  result => {
    console.log(`1回目の偶数です。：${result}`);
    // Promise を返す
    return is_random_even(); 
  }
).then(
  // 非同期処理が成功したときのコールバック
  result => {
    console.log(`2回連続の偶数です。：${result}`);
    // Promise を返す
    return is_random_even(); 
  }
).then(
  // 非同期処理が成功したときのコールバック
  result => {
    console.log(`3回連続の偶数です。：${result}`);
    // Promise を返す
    return is_random_even(); 
  }
).catch(
  // 非同期処理が失敗したときのコールバック
  (error) => console.log(error.message)
)

/*出力例*/

//最初に奇数が出た場合（最初で失敗した場合）
//catch で登録した失敗時の処理が呼び出され、成功時の処理は実行されない
//偶数ではありません。値：5

//2回目に奇数が出た場合（2回目で失敗した場合）
//成功時の処理が1回呼び出され、失敗時の処理が呼び出される
//1回目の偶数です。：2
//偶数ではありません。値：3

//3回目に奇数が出た場合（3回目で失敗した場合）
//成功時の処理が2回呼び出され、失敗時の処理が呼び出される
//1回目の偶数です。：4
//2回連続の偶数です。：4
//偶数ではありません。値：3

//3回全てが偶数の場合（全て成功 ）
//成功時の処理が3回呼び出され、失敗時の処理は呼び出されない
//1回目の偶数です。：6
//2回連続の偶数です。：4
//3回連続の偶数です。：4

new Promise((resolve, reject)  => {

  setTimeout(() => resolve('hello'), 1000);

}).then((result) => {
  
  console.log(result);  //hello
  return new Promise((resolve, reject) => { 
    setTimeout(() => resolve(result + ' hello2'), 1000);
  });

}).then((result) => { 

  throw new Error("例外発生！");  //例外を発生させる
  console.log(result); 
  return new Promise((resolve, reject) => { 
    setTimeout(() => resolve(result + ' hello3'), 1000);
  });

}).then((result) => console.log(result)

).catch(
  // 非同期処理が失敗したときのコールバック
  (error) => console.log(error.message)
); 

/*
//出力
hello
例外発生！ //console.log(error.message)
*/

var promise = Promise.all([promiseInstance, ... ]);

function delayed_action(num, ms) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`${num}つ目の処理（${ms} ミリ秒）`);
    }, ms)
  })
}
  
const promise1 = delayed_action(1, 2000);
const promise2 = delayed_action(2, 500);
const promise3 = delayed_action(3, 1000);

Promise.all([promise1, promise2, promise3]).then(response => console.log(response)); 

/* 出力
["1つ目の処理（2000 ミリ秒）", "2つ目の処理（500 ミリ秒）", "3つ目の処理（1000 ミリ秒）"]
*/
  
// forEach を使って出力
Promise.all([promise1, promise2, promise3]).then(responses => responses.forEach(
  response => console.log(response)
));

/* 出力
1つ目の処理（2000 ミリ秒）
2つ目の処理（500 ミリ秒）
3つ目の処理（1000 ミリ秒）
*/

function delayed_action(num, ms) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`${num}つ目の処理（${ms} ミリ秒）`);
    }, ms)
  })
}
  
const promise1 = delayed_action(1, 2000);
const promise2 = delayed_action(2, 500);
const promise3 = delayed_action(3, 1000);
  
Promise.all([
  promise1, 
  //rejected になる Promise インスタンスを追加
  new Promise((resolve, reject) => 
        setTimeout(() => 
          reject(new Error('エラー発生!')), 3000)
       ),
  
  promise2, 
  promise3
]).then(responses => responses.forEach(
  response => console.log(response)
)).catch(
  // 失敗したとき（rejected）のコールバック
  (error) => console.log(error.message)
); 

/* 出力
エラー発生!
*/

var promise = Promise.race([promiseInstance, ... ]);

function delayed_action(num, ms) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`1番：${num}つ目の処理（${ms} ミリ秒）`);
    }, ms)
  })
}
  
const promise1 = delayed_action(1, 2000);
const promise2 = delayed_action(2, 500);
const promise3 = delayed_action(3, 1000);
  
Promise.race([promise1, promise2, promise3]).then(value => console.log(value)); 

/* 出力
1番：2つ目の処理（500 ミリ秒）
*/

function delayed_action(num, ms) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`1番：${num}つ目の処理（${ms} ミリ秒）`);
    }, ms)
  })
}
  
const promise1 = delayed_action(1, 2000);
const promise2 = delayed_action(2, 500);
const promise3 = delayed_action(3, 1000);
  
Promise.race([
  promise1, 
  
  //処理時間が一番短く且つエラーになる Promise インスタンスを追加
  new Promise((resolve, reject) => 
        setTimeout(() => 
          reject(new Error('エラー発生!')), 10)
       ),
  
  promise2, 
  promise3
]).then( value => 
  console.log(value)
).catch( error => 
  // 失敗したときのコールバック
  console.log(error.message)
); 

/* 出力
エラー発生!
*/

//第3引数に true を指定すると失敗する関数
function delayed_action2(num, ms, error) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if(!error) {
        resolve(`1番：${num}つ目の処理（${ms} ミリ秒）`);
      }else{
        reject(new Error(`Error 発生 :${num}つ目の処理でエラー`));
      }
    }, ms)
  })
}
  
const promise1 = delayed_action2(1, 2000);
const promise2 = delayed_action2(2, 500);
const promise3 = delayed_action2(3, 1000, true); //第3引数に true を指定

Promise.race([promise1, promise2, promise3]).then(value => console.log(value)).catch( error => 
  // 失敗したときのコールバック
  console.log(error.message)
); 

/* 出力
1番：2つ目の処理（500 ミリ秒）
*/

function delayed_action2(num, ms, error) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if(!error) {
        resolve(`1番：${num}つ目の処理（${ms} ミリ秒）`);
      }else{
        reject(new Error(`Error 発生 :${num}つ目の処理でエラー`));
      }
    }, ms)
  })
}
  
const promise1 = delayed_action2(1, 2000);
const promise2 = delayed_action2(2, 500, true); //第3引数に true を指定
const promise3 = delayed_action2(3, 1000);

Promise.race([promise1, promise2, promise3]).then(value => console.log(value)).catch( error => 
  // 失敗したときのコールバック
  console.log(error.message)
); 

/* 出力
Error 発生 :2つ目の処理でエラー
*/

const getDataThen = (url) => {
  fetch(url)
  .then((response) => {
    return response.json();
  })
  .then((data) => {
    console.log(data);
  });
}
getDataThen('https://jsonplaceholder.typicode.com/users');

const getDataAsync = async (url) => { 
  const response = await fetch(url); 
  const data = await response.json(); 
  console.log(data);
}
getDataAsync('https://jsonplaceholder.typicode.com/users');

const getApiKey = (data) => {
  //Promise を返す
  return new Promise( (resolve) => {
    fetch('apikeys.php', {
      method: 'POST',
      body: data //引数で受け取った値 
    })
    .then((response) => {
      return response.text();
    })
    .then((apikey) => {
      //apikey に解決される Promise を返す
      resolve(apikey);
    });
  });
}

const getApiKey = async (data) => {
  const response = await fetch('apikeys.php', {
    method: 'POST',
    body: data //引数で受け取った値
  });
  const apikey = await response.text();
  //apikey を返すと apikey に解決される Promise が返される
  return apikey;
}