2020/08/22(土)javascript の fetch と XMLHttpRequest

今回は、これにちょっと嵌ったので自分メモ。
fetch も XMLHttpRequest も Javascript 内でWebサーバと通信処理が出来る便利な機能で
ちょっと前は「Ajax」とか言ってもてはやされたものですが、今はほぼ死語でしょうかね。
それでも今はWebサイトでちょっとしたことをするには欠かせなくなってきているもの。

今回は、オンラインでの画像編集機能をサイト内にて実現するために、
最初は fetch による以下のコードを書きました(一部を公開用に変更部分あり):
async function gosub_canvasimg(serial,imgblob) {
  var responce = await (await fetch('/editor.cgi', {
                          method : 'POST',
                          cache  : 'no-cache',
                          headers : {'Content-Type' : 'application/x-www-form-urlencoded' } ,
                          body   : 'imgblob=' + imgblob ;
                         })).text() ;
  if (responce != 'valid') {
    alert(serial + "つめの画像ファイル保存に失敗しました。" );
  }
}
ところが、これだと、
Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource.
というエラーが出て、fetch 自体が実行されないのです。*1
これは、拙作のシステムにて「画像があるはずだが、編集画面で表示されない」という現象を作り出す直接原因になっていました。

同期処理でないと、編集時に不具合が更に出るので、こうしています。
『同期処理なんぞ殆ど使われません』と大声で叫ぶサイトなんかも散見されますが、
それはよほど精通している方か、同期処理の必要な案件に出会ったことが無い方なのでしょう。
少なくともハードウェアの制御がシステム全体として絡んで来ると、同期処理はどうやっても必須。

結局、fetch がエラーになる原因は判らず仕舞いで、fetch のところを同じ処理になるように、
async function gosub_canvasimg(serial,imgblob) {
  var imgxhr  = new XMLHttpRequest() ;
  var msgbody = 'imgblob=' + imgblob ;

  imgxhr.open('POST', '/editor.cgi', false) ;
  imgxhr.send(msgbody) ;
  var responce = imgxhr.response ;

  if (responce != 'valid') {
    alert(serial + "つめの画像ファイル保存に失敗しました。" );
  }
}
みたいな感じにすると、エラーは出なくなった模様。
これで不具合は出なくなったと思うが様子見です。
fetch の実装バグなのか、「同期方式」という使い方が悪いのか調べても全く判らないのです。

やっぱり XMLHttpRequest() のほうが断然判りやすい。
fetch は Promise という挙動の概念を理解しなければならず、これが当方にはあまり直感的ではなく判りずらさの極みです。これを使いこなせないのがこの顛末の一因でしょう。

何せ、類似の事例が殆ど表に出てきていない案件なので、エンドユーザに動作検証してもらうという暴挙を敢行するしかないのです。

*1 : 当方は英語が苦手なので、日本語表示がある程度出来る Firefox でデバッグをしています. chrome のデバッガは、英語だらけで正直発狂しそうになります...

2020/08/20(木)今度はアマゾンのアカウント停止??

2020/08/20 14:22 はんかくさい
今回はふざけ過ぎなので、全て晒します。

先月末頃から、
「(Amazonで)お客様のアカウントのパスワードを無効にいたしました。」
「残念ながら、Аmazon のアカウントを更新できませんでした。」
とか、不安を煽るようなアホメールが散発的に来るのだが、ついに8月19日になって、
20200820_1.png

※画像クリックで大きな画像が表示されます。

というのが来て、IPアドレスが提示されてきたので、見てみたら・・・
Yahoo Taiwan のIPアドレスの模様。台湾に大阪府があるのか。知らんかった(笑)
に始まり、このメール発信元の「info@jncuiyantang.com」は実在するドメインなようなので、調査したら、
登録者は武漢に近い地方都市の模様。マルウェアに侵されているか、意図的に流しているかは不明ですが。
いずれにせよ、こういうのは止めれ、、、

更に同じ日に・・・
20200820_2.png

※画像クリックで大きな画像が表示されます。

これです。目的不明ですね。単なる嫌がらせなのか、不安を煽りたい馬鹿なのか。
賢明な方々であれば難なく無視できるのですが、インターネット初心者のような方々だと、
最悪パニックに陥る。

アマゾンや、当方に恨みでもあるのかもしれんが、こういうのは何の解決にもならないですね。