fetch APIで取得した値を、自作関数で返したい

Question

// sample.php
<?php
$a_name= $_POST['a_name'];
$b_name= $_POST['b_name'];
$c_name= $_POST['c_name'];
$name_list=array('a_name'=>$a_name,'b_name'=>$b_name,'$c_name'=>$c_name);
echo json_encode($name_list);
?>

// sample.js
function get_data(a_name,b_name,c_name){
    const postData = new FormData; // フォーム方式で送る場合
    postData.set('a_name', a_name);
    postData.set('b_name', b_name);
    postData.set('c_name',c_name);
    const data = {
      method: 'POST',
      body: postData,
    };
    fetch(sample.php, data)
      .then(response=> {
        return response.json();
      })
      .then(res=> {
        alert('x:'+res.a_name);
        return res_name;
      })
      .catch(error=> {
        alert(error);
      })
    alert('y');
    return response.json(); // ここにPHPから返された値を指定したい
  }
var info= get_data('a','b','c');
alert('----');
alert(info); // get_data()を処理してから個々のコード(alert(info))を処理したい
alert('last');

// alertの結果
y
x:a
(以降何も表示されない)
// 理想
y
x:a
----
Object
last

やりたいことは、自作関数get_dataの返り値にfetchAPIで取得した値（形式:json）を指定したいです。そのうえで、コールバックであるget_data()を処理してからalert(info)を処理したです。
関数の一番上に変数を用意して、(then(response=> {〇 return response.json();}))の〇の部分に、用意した変数にresponse.json()を代入したり、リストで追加したりして、それを関数の返り値に指定しましたが、用意したときの値のままでした。
助言をお願いします。

Answer 1

//sample.php

<?php
header('Content-Type: application/json'); 
$name_list["a_name"]= filter_input(INPUT_POST,'a_name');
$name_list["b_name"]= filter_input(INPUT_POST,'b_name');
$name_list["c_name"]= filter_input(INPUT_POST,'c_name');
echo json_encode($name_list);

//js

const get_data=async(a_name,b_name,c_name)=>{
  const url="sample.php";
  const body = new FormData;
  body.append('a_name', a_name);
  body.append('b_name', b_name);
  body.append('c_name',c_name);
  const method="post";
  const option = { method,body};
  const data=await fetch(url, option).then(res=>res.json());
  alert('x:'+data.a_name);
  alert('y');
  return data;
}
(async()=>{
  var info= await get_data('a','b','c');
  alert('----');
  alert(JSON.stringify(info));
})();

Comments

[hima-mura.]

返信ありがとうございます。
上記のコードで問題なく動くのですが、変数infoを外で使用できません。やりたいこととしましては、
(async()=>{
var info= await get_data('a','b','c');
alert('----');
alert(JSON.stringify(info));
})();
alert(info); // ここでinfoを使用したいが先に(alert(info))が処理され次に(await get_data('a','b','c');)が処理されるのが問題

コールバックの処理が終了してから、次のコード（今回はalert(info）)を実行したいです。
そもそもの考え方が間違いなのでしょうか。助言をお願いいます。

[退会済みユーザー]

関数の外でlet info;しておけば、var を省いて info= await get_data('a','b','c'); で行けそうな気がするけれど。

[yambejp]

> 外で使用できません

中でやればいいだけのはなしでしょ？
中でinfoを確認すのが「alert(JSON.stringify(info));」なんですけどね

ようはこういうことなので、もはや外に出す意味はありません

window.addEventListener('DOMContentLoaded',async ()=>{
info= await get_data('a','b','c');
alert('----');
await alert(JSON.stringify(info));
});

[hima-mura.]

sPy2bUDOZ4uRa7tさんのご指摘通り外で定義した変数にawait get_data('a','b','c');の値を入れて、すこし条件をつけてできました。await get_data('a','b','c');の値をグローバルスコープで使いたかったので、このような希望になってしまいました。
ありがとうございました。

Answer 2

POSTメソッドでFetch APIを使うなら、正しいやり方を踏まえてください。
Fetch の使用 - Web API | MDNの「リクエストオプションの適用」にて、
POSTメソッドでの送信例があります。
'Content-Type': 'application/x-www-form-urlencoded',で送信するならオブジェクトのまま、
'Content-Type': 'application/json',で送信するならJSONにエンコードすることになります。
FormData オブジェクトにする必要、あるかなぁ。XHRじゃないので、もっと簡単に行きそうな気もするけれど。
php側で受信できていればそれで良しってことで。。

あとphp側、
header('Content-Type: application/json');
を加えておくと良さげ。
余計なデバッグ出力や空の改行など出力させないように。

Comments

[hima-mura.]

返信ありがとうございます。
表記していませんが、実際はテンプレートエンジンを使っている関係でjs側でjson形式を定義するを避ける形でformDataオブで送信しています。その際に'Contet-Type'は指定すべきということでしょうか？この文がなくても送受信できているようで気が付きませんでした。一通り「リクエストオプションの適用」に目を通し、自分でも調べてみたのですが、指定する利点とは何でしょうか？また、今回の場合は、multipart/form-data　を指定であっていますか？

[退会済みユーザー]

指定しなければ 'Content-Type': 'application/x-www-form-urlencoded', で進むはずなので、POSTとして受信できるはずですが。兎にも角にもphp側でvar_dump()/var_export()などして受信できていればOKってことで。。