JavaScript 再入門(その21) 非同期処理 2 プロミスの動作

var promise1 ;
promise1 = new Promise( ( resolve , reject ) =>{
})
console.log( promise1 ) ;
/*
Promise {<pending>}
	[[Prototype]]: Promise
	[[PromiseState]]: "pending"
	[[PromiseResult]]: undefined
*/

var promise1 ;
promise1 = new Promise( ( resolve , reject ) =>{
	resolve() ;
})
console.log(promise1) ;
/*
Promise {<fulfilled>: undefined}
	[[Prototype]]: Promise
	[[PromiseState]]: "fulfilled"
	[[PromiseResult]]: undefined
*/

var promise1 ;
promise1 = new Promise( ( resolve , reject ) =>{
	resolve( '完了しました!' ) ;
})
console.log(promise1) ;
/*
Promise {<fulfilled>: '完了しました!'}
	[[Prototype]]: Promise
	[[PromiseState]]: "fulfilled"
	[[PromiseResult]]: "完了しました!"
*/

var promise1 ;
promise1 = new Promise( ( resolve , reject ) =>{
	reject( '失敗しました!' ) ;
})
console.log(promise1) ;
/*
Promise {<rejected>: '失敗しました!'}
	[[Prototype]]: Promise
	[[PromiseState]]: "rejected"
	[[PromiseResult]]: "失敗しました!"

Uncaught (in promise) 失敗しました! <--- エラーが throw される。
*/

var promise1 ;
promise1 = new Promise( ( resolve , reject ) =>{
	reject( '失敗しました!' ) ;
}).catch( ( e ) => { console.log( 'エラー発生:', e ) ; })
console.log(promise1) ;
/*
Promise {<rejected>: '失敗しました!'}
	[[Prototype]]: Promise
	[[PromiseState]]: "rejected"
	[[PromiseResult]]: "失敗しました!"

エラー発生: 失敗しました!
*/

var promise1 ;
promise1 = new Promise( ( resolve , reject ) =>{
	resolve( '成功しました!' ) ;
}).then( ( res ) => { console.log( '正常終了:', res ) ;
}).catch( ( e ) => { console.log( 'エラー発生:', e ) ;
})
console.log(promise1) ;
/*
Promise {<pending>}
	[[Prototype]]: Promise
	[[PromiseState]]: "fulfilled"
	[[PromiseResult]]: undefined

正常終了: 成功しました!
*/

var promise1 ;
promise1 = new Promise( ( resolve , reject ) =>{
	resolve( '<1> 成功しました!' ) ;					// <--- resolve()(PromiseResult)に値を設定
}).then( ( res ) => {									// <--- resolve値(PromiseResult)が引数となり関数へ渡される
	console.log( '(1) 正常終了:', res ) ;				// (1) 正常終了: <1> 成功しました!
	return new Promise( ( resolve , reject ) =>{		// <--- プロミスをreturn
		resolve( '<2> 成功しました!' ) ;				// <--- resolve()(PromiseResult)に値を設定
	}) ;
}).then( ( res ) => {									// <--- 前のthen()でreturnされたresolve値(PromiseResult)が引数となり関数へ渡される
	console.log( '(2) 正常終了:', res ) ;				// (2) 正常終了: <2> 成功しました!
	return '<3> すべての処理が正常終了しました。' ;		// <--- 文字列をreturn
}).then( ( res ) => {									// <--- 前のthen()でreturnされた文字列が引数となり関数へ渡される
	console.log( '(3) 正常終了:', res ) ;				// (3) 正常終了: <3> すべての処理が正常終了しました。
}).catch( ( e ) => { console.log( 'エラー発生:', e ) ;
})
/*
(1) 正常終了: <1> 成功しました!
(2) 正常終了: <2> 成功しました!
(3) 正常終了: <3> すべての処理が正常終了しました。
*/

var promise1 ;
promise1 = new Promise( ( resolve , reject ) =>{
	resolve( '<1> 成功しました!' ) ;					// <--- resolve()に値(PromiseResult)を設定
}).then( ( res ) => {									// <--- resolve値(PromiseResult)が引数となり関数へ渡される
	console.log( '(1) 正常終了:', res ) ;				// (1) 正常終了: <1> 成功しました!
	return new Promise( ( resolve , reject ) =>{		// <--- プロミスをreturn
		reject( '<2> 失敗しました!' ) ;					// <--- reject()に値(PromiseResult)を設定
	}) ;
}).then( ( res ) => {									// <--- 前のthen()メソッドでrejectされたので飛ばされる
	console.log( '(2) 正常終了:', res ) ;				
	return '<3> すべての処理が正常終了しました。' ;		
}).then( ( res ) => {									// <--- 前のthen()メソッドでrejectされたので飛ばされる
	console.log( '(3) 正常終了:', res ) ;				
}).catch( ( e ) => { console.log( 'エラー発生:', e ) ;	// エラー発生: <2> 失敗しました!
})
/*
(1) 正常終了: <1> 成功しました!
エラー発生: <2> 失敗しました!
*/

var promise1 ;
promise1 = new Promise( ( resolve , reject ) =>{
	resolve( '<1> 成功しました!' ) ;					// <--- resolve()に値(PromiseResult)を設定
}).then( ( res ) => {									// <--- resolve値(PromiseResult)が関数へ渡される
	console.log( '(1) 正常終了:', res ) ;				// (1) 正常終了: <1> 成功しました!
	return new Promise( ( resolve , reject ) =>{		// <--- プロミスをreturn
		reject( '<2> 失敗しました!' ) ;					// <--- reject()に値(PromiseResult)を設定
	}) ;
}).then( ( res ) => {									// <--- 前のthen()でrejectされたので飛ばされる
	console.log( '(2) 正常終了:', res ) ;				
	return '<3> すべての処理が正常終了しました。' ;		
}).then( ( res ) => {									// <--- 前のthen()でrejectされたので飛ばされる
	console.log( '(3) 正常終了:', res ) ;				
}).catch( ( e ) => { console.log( 'エラー発生:', e ) ;	// エラー発生: <2> 失敗しました!
}).finally( () => { console.log( '終了処理' ) ;			// <--- 完了時も失敗時も実行されます
})
/*
(1) 正常終了: <1> 成功しました!
エラー発生: <2> 失敗しました!
終了処理
*/

let profile = '' ;	// プロフィール
let dataSet = {		// プロフィールデータ
	carName : 'AE86 SPRINTER TRUENO GT-APEX 3door ' , // 車名
	firstName : 'Takumi ' ,		// 名前
	lastName : 'Fujiwara ' ,	// 苗字
}
// 非同期でリクエストに対するデータをX秒後に返す関数
let GetReqData = function( argReq ) {
	return new Promise( ( resolve , reject ) => {	// 非同期処理の結果を Promise で返します
		setTimeout(
			() => {
				if ( argReq in dataSet ) {			// リクエストがプロフィールデータに存在するか
					resolve( dataSet[ argReq ] ) ;	// リクエストが正しければ正常終了して値も返すよ! 
				} else {
					reject( argReq ) ;				// リクエストが正しくなければリクエストをエラーとして投げる
				}
			} , 
			Math.random() * 1000
		) ;
	}) ;
}

// コールバック関数(プロフィールの編集)
let editProfile = ( argProfData ) => {
	profile += argProfData ;				// プロフィールに返された値を付加する。
}
//
let car = new GetReqData( 'carName' ) ;		// 車名取得インスタンス生成
let lname = new GetReqData( 'lastName' ) ;	// 苗字取得インスタンス生成
let fname = new GetReqData( 'firstName' ) ;	// 名前取得インスタンス生成
// 非同期で 車名+苗字+名前 のプロフィールを取得したい
car.then( ( argRes ) => {					// 車名の取得と車名の取得が成功(resolve)したときの処理
	editProfile( argRes ) ;					// 車名をプロフィールに編集
	return lname ;							// 苗字の取得 return によって結果は次の then() 関数の引数になる
}).then( ( argRes ) => {					// 苗字の取得が成功(resolve)したときの処理
	editProfile( argRes ) ;					// 苗字をプロフィールに編集
	return fname ;							// 名前の取得 return によって結果は次の then() 関数の引数になる
}).then( ( argRes ) => {					// 名前の取得が成功(resolve)したときの処理
	editProfile( argRes ) ;					// 名前をプロフィールに編集
}).catch( ( e ) => {						// 失敗時の処理
	console.error( 'Request ' + e + ' is not found !' ) ;
}).finally( () => {							// 終了処理
	console.log( 'Profile:' + profile ) ;	// プロフィールを表示
}) ;
console.log( '<TOYOTA>') ; // 一番最初に表示される。
/*
<TOYOTA>
Profile:AE86 SPRINTER TRUENO GT-APEX 3door Fujiwara Takumi
*/