Promise基礎

custom_main_1.js

"use strict";

//==========
// Promise基礎_1

// Window
window.onload = (e)=>{

	// Promises
	const pr1 = new Promise((resolve, reject)=>{
		setTimeout(()=>{resolve("Completed1!!");}, 1000);
		//setTimeout(()=>{reject("Error1...");}, 1000);
	});

	// Promise(single)
	pr1.then(res=>{
		console.log("then:", res);
	}).catch(err=>{
		console.log("catch:", err);
	});
}

custom_main_2.js

"use strict";

//==========
// Promise基礎_2

// Window
window.onload = (e)=>{

	// Promises
	const pr1 = new Promise((resolve, reject)=>{
		setTimeout(()=>{resolve("Completed1!!");}, 1000);
		//setTimeout(()=>{reject("Error1...");}, 1000);
	});

	const pr2 = new Promise((resolve, reject)=>{
		setTimeout(()=>{resolve("Completed2!!");}, 1000);
		//setTimeout(()=>{reject("Error2...");}, 1000);
	});

	const pr3 = new Promise((resolve, reject)=>{
		setTimeout(()=>{resolve("Completed3!!");}, 1000);
		//setTimeout(()=>{reject("Error3...");}, 1000);
	});

	// Promise(all)
	Promise.all([pr1, pr2, pr3]).then(res=>{
		console.log("All completed!!");
		for(let r of res) console.log(r);
	}).catch(err=>{
		console.log("Something went wrong...");
		console.log(err);
	});

	// Using Axios
	const URL_WEATHER = "https://www.jma.go.jp/bosai/forecast/data/forecast/";
	const option = {responseType: "blob"};
	const ax1 = axios.get(URL_WEATHER + "210000.json", option);// 岐阜
	const ax2 = axios.get(URL_WEATHER + "240000.json", option);// 三重
	const ax3 = axios.get(URL_WEATHER + "230000.json", option);// 愛知

	Promise.all([ax1, ax2, ax3]).then(res=>{
		console.log("All completed!!");
		for(let r of res) console.log(r);
	}).catch(err=>{
		console.log("Something went wrong...");
		console.log(err);
	});
}

custom_main_3.js

"use strict";

//==========
// Promise基礎_3

// Window
window.onload = (e)=>{

	// Sequencial
	actionHop().then(res=>actionStep()).then(res=>actionJump()).catch(err=>console.log("Error:" + err));
}

function actionHop(){
	return new Promise((resolve, reject)=>{
		setTimeout(()=>{
			console.log("Hop!!");
			resolve();
			//reject("Rejected:Hop...");
		}, 1000);
	});
}

function actionStep(){
	return new Promise((resolve, reject)=>{
		setTimeout(()=>{
			console.log("Step!!");
			resolve();
			//reject("Rejected:Step...");
		}, 1000);
	});
}

function actionJump(){
	return new Promise((resolve, reject)=>{
		setTimeout(()=>{
			console.log("Jump!!");
			resolve();
			//reject("Rejected:Jump...");
		}, 1000);
	});
}

custom_main_4.js

"use strict";

//==========
// Promise基礎_4

window.onload = (e)=>{
  	// Test
	const files = [
		"../assets/mov_1.webm", "../assets/mov_2.webm",
		"../assets/mov_3.webm", "../assets/mov_4.webm"];
	const promises = [];
	for(const file of files){
		promises.push(preloadVideo(file));
	}
	Promise.all(promises).then(e=>{
		for(let file of e) console.log("Loaded:", file);
	}).catch(e=>{
		console.log("Error", e);
	});
}

// Preloader
function preloadVideo(file){
	const promise = new Promise((resolve, reject)=>{
		const xhrReq = new XMLHttpRequest();
		xhrReq.open("GET", file, true);
		xhrReq.responseType = "blob";
		xhrReq.onloadend = e=>{
			console.log("Loadend", e.total);
			resolve(file);
		}
		xhrReq.onerror = e=>{
			console.log("Error", e);
			reject(file);
		}
		xhrReq.onprogress = e=>{
			if(!e.lengthComputable) return;
			const percent = ((e.loaded/e.total)*100|0) + "%";
			console.log("Percent:", percent);
		}
		xhrReq.send();
	});
	return promise;  
}