tsuyopon-xyz/README.md Secret

## README.md

      
    Raw
  

              README.md
            
          
    （コールバック関数の利用例）コールバック関数を使って非同期処理を実装する

話の流れ


HTMLとJavaScriptの下準備をする
setTimeoutを使う
Promiseを使う
fetchを使う(APIを使って外部サービスとデータのやりとりを行う)

資料


setTimeout
Promise
fetch
JavaScript Promiseの本
Trivia API（利用したAPIのサイト）


## index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>非同期処理のテスト</title>
</head>
<body>
  <h1>非同期テスト</h1>

  <script src="main.js"></script>
</body>
</html>

## main.js
// 2. setTimeoutを使う
console.log('111');

setTimeout(() => {
  console.log('setTimeoutの中');
}, 1000);

console.log('222');


// 3. Promiseを使う
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('promiseの中のsetTimeout');
    resolve('何かしらのデータ');
  }, 2000);
});

promise.then((data) => {
  console.log('thenの中');
  console.log('data : ', data);
})


// 4. fetchを使う(APIを使って外部サービスとデータのやりとりを行う)
fetch('https://opentdb.com/api.php?amount=10')
  .then((response) => {
    console.log('response : ', response);
    return response.json();
  })
  .then((data) => {
    console.log('data : ', data);
  })
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>非同期処理のテスト</title>
	</head>
	<body>
	<h1>非同期テスト</h1>

	<script src="main.js"></script>
	</body>
	</html>
	// 2. setTimeoutを使う
	console.log('111');

	setTimeout(() => {
	console.log('setTimeoutの中');
	}, 1000);

	console.log('222');



	// 3. Promiseを使う
	const promise = new Promise((resolve, reject) => {
	setTimeout(() => {
	console.log('promiseの中のsetTimeout');
	resolve('何かしらのデータ');
	}, 2000);
	});

	promise.then((data) => {
	console.log('thenの中');
	console.log('data : ', data);
	})



	// 4. fetchを使う(APIを使って外部サービスとデータのやりとりを行う)
	fetch('https://opentdb.com/api.php?amount=10')
	.then((response) => {
	console.log('response : ', response);
	return response.json();
	})
	.then((data) => {
	console.log('data : ', data);
	})