KumaTechLab
2020-12-07/2023-05-23

XMLHttpRequestの完了時に動作させる

XMLHttpRequestの完了時に動作させる

XMLHttpRequestを使用した関数に返り値がある場合非同期処理のため本来意図している値が入らない場合があります。

そのような場合に本来意図した動作をさせる方法です。

他にもモジュールごとにファイルを分けている場合などに非同期処理の完了後に行いたい関数を指定する場合にも便利です。

function ajax_function() {
    let request = new XMLHttpRequest();
		request.onreadystatechange = () => {
			if( request.readyState == 4 ) {
				if( request.status == 200 ) {
					return request.status;
				}
			}
		};
		request.open( 'POST', url, true);
		request.setRequestHeader( 'content-type', 'application/x-www-form-urlencoded;charset=UTF-8' );
		request.send(send);
}


let ajax_value = ajax_function();


console.log( ajax_value );

上記のような場合ajax_functionが完了していれば返り値である「request.status」が入ります。

しかし、XMLHttpRequestは非同期処理のため、このままでは「undefined」となってしまいます。

これを「request.status」が受け取れるように変更します。

ES6からのPromiseを使用します。

function ajax_function() {
　　return new Promise( ( resolve ) => {
      let request = new XMLHttpRequest();
		  request.onreadystatechange = () => {
			  if( request.readyState == 4 ) {
				  if( request.status == 200 ) {
				  	resolve( request.status );
				  }
			  }
		  };
		  request.open( 'POST', url, true);
		  request.setRequestHeader( 'content-type', 'application/x-www-form-urlencoded;charset=UTF-8' );
		  request.send(send);
  }
}

成功した際に「resolve」で指定した値が返却されます。

上記例では成功時のみ記述していますが、失敗時の記述も可能です。

受け取り側は下記のようにします。

let ajax_value = '';
ajax_function().then( ( value ) => { 
    ajax_value = value;
} );

thenを使用して成功した際の値を受け取ることができます。

失敗した際にはcatchになります。

非同期処理だけど終わるタイミングに合わせて何かを行いたい場合に使用してみてください。

2020 KumaTechLab.