【javaScript fetch】fetchApiで素のデータを送っても何も返ってこない罠にはまったお話

asaba 著者:asaba

【javaScript fetch】fetchApiで素のデータを送っても何も返ってこない罠にはまったお話

fetchApiは、通信が成功した際にはpromise型で値を返します。が、スコープで囲んで変数に入れて飛ばすと、サーバーに要求した

値が返ってこない事態にハマってしまいました。ajaxだとdata:{“key”,value}みたいにまとめてからプロパティに入れて取ってくることが

できるのですがこっちでは仕様のせいか受け取ってくれません。

調べてみると、そのままbodyに入れるのではなくformDataというfetchから新しく使えるようになったApiを使って送り込むみたいです。

ajaxではdocumentというxmlを取り扱うことができるオブジェクトがあったのですが、こっちではそれが使えないのでこちらを代わりに

使ってくださいということだと思います。

fetchってもうリリースされてから数年経つのですが、国内の記事を探しても全然見つからないのでみんなまだajax使ってるのかなと

思ってしまいます。

ajaxと違いdomをいちいち掘削しないので、通信速度の向上は期待してもいいと思います。ですが、取ってきたxmlから各タグを取り出すメソッド

とかがめんどくさい感じでしたので、そこらが原因で手が出にくいのかなと思いました。前述の処理だけはjqueryに任せて通信だけ

fetchで賄うことができますが、試していないので速さの保証は実装してみないと分からないです。


var formData = new FormData() ;
var id = this.props.match.params.id;
var followMember = window.localStorage.getItem("member_no");
formData.append( "name", "asaba" ) ;
formData.append( "location", "shizuoka" );
formData.append( "gender", "male" );

var url = 'https://hottomotto';
fetch(url,
{ body: formData,
method: "POST",
})
//通常のレスポンスを返す
.then(function (response) {
return response.text();
})
.then(function(text) {
var xml = new DOMParser().parseFromString(text, "text/xml");
console.log(xml);
});


  • この記事いいね! (0)

著者について

asaba

asaba author

好きなもの:RPG、チョコミント 少しずつ頑張ります。