Zenn
⛲

非同期処理・Promiseを使った、具体的な処理の書き方

2021/01/29に公開
JavaScript
tech

前の記事の振り返り

前の記事で書いたことは
　・非同期処理が誕生した背景
　・Promiseの役割とメリット
でした。

非同期処理やPromiseの役割から理解したい方は、前の記事を読むことをオススメします。

本記事について

本記事では、
　・非同期処理、Promiseの具体的な書き方/使い方
について書きます。

対象読者

新人エンジニア。
非同期処理やPromiseのメリットは分かっている。
しかし、実際にコードを書くには、ノウハウが足りないと感じている人。

記事の内容

書くこと

  • 非同期処理、Promiseの具体的な書き方/使い方

書かないこと

  • 非同期処理、Promiseの役割/メリット

やること

APIを叩いて、JSONデータを取得します
叩きに行くAPIのURLはこちら：https://jsonplaceholder.typicode.com/posts/1

APIを叩く処理が成功すると、以下のJSONデータを取得できます

{
  "userId": 1,
  "id": 1,
  "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
  "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
}

本記事では、このJSONデータを、エラーハンドリングもしながら取得する実装について、解説していきます。

APIを叩く時は fetch メソッドを使います。

fetch('[https://jsonplaceholder.typicode.com/posts/1](https://jsonplaceholder.typicode.com/)')
	.then(response => {
		console.log(response); // JSONデータを含むPromise
		return response.json();
	});

fetchメソッドはPromiseを返すので、取得したいデータにjson()メソッドを使い、データをJSON形式にして取り出す必要があります。

これで非同期処理でAPIを叩き、問題なくデータを取得することが出来そうです。。。

いえ、これだけではいけません。

非同期処理は失敗することもあります。
よって、失敗した時のためにエラーを処理する必要があります。

エラー処理

エラー処理を行う方法を2つ紹介します。

  1. thenメソッドの第二引数でエラー処理を行う
  2. catchメソッドでエラーを処理する

1. thenメソッドの第二引数のコールバック関数内でエラー処理を行う

// http://failURL のリソースは存在しないので第二引数のエラー処理が呼ばれる
fetch("http://failURL").then(response => {
    // このブロックには入らない
}, error => {
    console.log(error); // Error: "NOT FOUND"
});

2. catchメソッドでエラーを処理する

// http://failURL のリソースは存在しないのでcatchメソッドのエラー処理が呼ばれる
fetch("http://failURL")
	.then(response => {
    // このブロックには入らない
	})
	.catch(error => {
    console.log(error); // Error: "NOT FOUND"
	});

thenチェーン時のエラー処理

※ コード上に sleep という関数が出てきます。
　 これは、自作の関数であり、引数に与えられた時間が経つと
　成功状態のPromiseが返り値として出力されます。

thenチェーンではthenの数に依らず、最後に1つcatchメソッドを書いておくことで、thenチェーン上の全てのエラーを処理できます↓

sleep(2000)
	.then(() => console.log('2秒経ったよ'))
	.then(() => sleep(1500))
	.then(() => console.log('1.5秒経ったよ'))
	.catch(error => {
		console.log('エラーが発生！');
		console.error(error);
	});

また、thenチェーンの途中でエラーが発生すると、すぐにcatchの処理が実行されます↓

sleep(2000)
	.then(() => console.log('2秒経ったよ'))
	.then(() => {
		throw new Error('エラー発生');
	})
	.then(() => sleep(3000))
	.then(() => console.log('3秒経ったよ'))
	.catch(error => {
		console.error(error);
	})
	.then(() => console.log('catchの後のthenは処理されます'));

上記の場合のコンソールは
2秒経ったよ
Error: エラー発生
catchの後のthenは処理されます
と出力されます。
3秒経ったよは出力されません！！

thenチェーンの途中でcatchを書いても、エラーが発生していなかったら、catchは無視されそのまま残りのthenチェーンの処理が実行されます↓

sleep(2000)
	.then(() => console.log('2秒経ったよ'))
	.catch(error => {
		console.error(error);
	})
	.then(() => sleep(3000))
	.then(() => console.log('3秒経ったよ'));

上記の場合のコンソールは
2秒経ったよ
3秒経ったよ
と出力されます。

おわり

最後までご覧いただきありがとうございます。
コメント欄で、本記事に関するご意見やフィードバック等々お待ちしております。

参考サイト

YouTubeのvideoIDが不正ですhttps://youtube.com/playlist?list=PL3PnJ18ZwZneYxvTkTGMgCh07OoTYlYw-

Discussion