callback内で受け取ったデータをグローバル変数に反映する方法に関して

Question

javascript(node.js)初心者です。
APIの実行結果をコールバックで受け取り、パースした上で、グローバル変数に反映したいと考えています。

下記スニペットのようなやり方だとだと、コールバック外のobjは、callback時のObject.assignが反映されていません。
callbackを抜けた後で受け取るのは、非同期という特性上難しいのだというのはわかったのですが、
callbackの処理内でグローバル変数 var objを書き換える方法はないのでしょうか？

"use strict";
var obj = {hoge: "hoge"};

getAPIData(request,obj, function(result,obj){
  //処理内容
  console.log(obj);//{hoge: "hoge"};
  Object.assign(obj,{result: result})
  console.log(obj);//{hoge: "hoge", result: "result"}
});

console.log(obj);//{hoge:"hoge"}

function getAPIData(request,obj, callback) {
  //API実行
  var https = require('https');
  var options = {
    hostname: 'example.com',
    port: 443,
    path: '/',
    method: 'GET'
  };

  var req = https.request(options, (res) => {
    console.log('statusCode:', res.statusCode);
    console.log('headers:', res.headers);

    res.on('data', chunk => {
      result = result +chunk;
    });
    res.on('end', () => {
      var response = parseData();
      callback(response);
    });
  });
  req.on('error', (e) => {
    console.error(e);
  });
  req.end();
}

function parseData(result) {
  //API実行結果パース
 return parsedResult;
}

Comments

[mit0223]

このコードのとおりであれば、callback の呼び出しが getAPIData の中で同期的なので、 obj は書き換わり、 console.log でも見えると思います。 callback が非同期に呼ばれるのであれば、コード例をそういう風に書いてもらえますか。callback が非同期であれば、consol.log で書き換わったのが見えないのは当然なので、その解説を回答します。

[strawberry]

ご指摘いただきありがとうございます。API実行と結果のパース部分を詳しく書き直しました。

Answer 1

JavaScript のコールバックは、殆どの場合、非同期に呼び出されます。非同期に呼び出されるというのは、それを呼び出した一連の処理が終わってから、そのタイミングになったら呼び出されるということです。例示されているコードですと、var req = https.request(options, (res) => {の第二引数は非同期のコールバックですので、ここの処理が行われるのは、トップレベルの処理がすべて終わったあとになります。

処理される順番で書きますと、最初に実行されるのは

getAPIData(request,obj, コールバック
});

console.log(obj);//{hoge:"hoge"}

ここまでです。この時点ですでに{hoge:"hoge"}が出力されてしまってます。function(result,obj){の部分はコールバックですので、まだ呼ばれません。この時点で質問者様の想定とは動きが異なっていると思います。

次に HTTP の通信でレスポンスが着信すると、httpd.request の第二引数に指定されたコールバックが呼ばれます。

 (res) => {
    console.log('statusCode:', res.statusCode);
    console.log('headers:', res.headers);

    res.on('data', コールバック);
    res.on('end', コールバック);
  }

次に、データの読み込みが終わったら、res.on('data'のコールバックchunk => {result = result +chunk;}が実行され、データが終了したら、res.on('end'のコールバック() => {var response = parseData();callback(response);}が実行されます。

そこで、お待ちかねの callback が呼ばれ、

function(result,obj){
  //処理内容
  console.log(obj);//{hoge: "hoge"};
  Object.assign(obj,{result: result})
  console.log(obj);//{hoge: "hoge", result: "result"}
}

が実行されます。

長々と書きましたが、結論から言うと、グローバル変数の obj の内容は書き換わっています。トップレベルの console.log が実行されるタイミングではまだ書き換わってないだけです。

Comments

[strawberry]

とても細かくわかりやすい解説をありがとうございます！実行順序に関しての理解が不足していました。ありがとうございました！