2022/11/14

非同期処理とは

JavaScript

定義

ある処理が終わるのを待たずに次の処理を行うこと

例

非同期処理

↓1秒後にlogが出力される

setTimeout(() => {
	console.log('this is async');
}, 1000);

同期処理

↓alertのOKを押さないと次の処理に進まない

alert('wait!');
console.log('next');

非同期処理が抱える2つの問題

コールバック地獄

• クリックしたらeventをlogに出して
• その1秒後に’setTimeout’とlogに出して
• 現在地を取得して
• 現在地をlogに出して
• 1秒ごとに’setInterval’とlogに出して、、、、、

みたいなのがこれ↓　非常に読みにくい

window.addEventListener('click', (e) => {
	console.log(e);
	setTimeout(() => {
		console.log('setTimeout');
		navigator.geolocation.getCurrentPosition((position)=>{
			console.log(position);
			setInterval(()=>{
				console.log('setInterval');
			}, 1000);
		})
	}, 1000);
});

エラー処理ができない

↓1秒後にはtryの中を抜けているのでうまくキャッチできない

try {
	setTimeout(() => {
		throw new Error('error');
	}, 1000);
} catch (error) {
	console.log(error);
}

助けてPromise

Promiseとは

Promiseを使うと

さっきのコールバック地獄が、、、

// Promise化
let promisifiedSetTimeout = (time) => {
	return new Promise((resolve)=>{
		setTimeout(()=>{
			resolve();
		}, time);
	});
};
let promisifiedGetCurrentPosition = () => {
	return new Promise((resolve, reject)=>{
		navigator.geolocation.getCurrentPosition(resolve, reject);
	});
};

// 整理
window.addEventListener('click', (e) => {
	console.log(e);
	proomisifiedSetTimeout(1000)
		.then(()=>{
			console.log('setTimeout');
			return promisifiedGetCurrentPosition();
		})
		.then((position)=>{
			console.log(position);
			setInterval(()=>{
				console.log('setInterval');
			})
		})
})

↑ネストが浅くなって可読性が増した！！！

エラー処理もできるようになった

• Tweet