sendBeaconリクエストがアンロードイベントにアタッチされたときに「（保留中）」と表示される

Question

navigator.sendBeaconをコンソールで直接呼び出すと、Chrome devツールのネットワークペインでリクエストがすぐに正常に表示されます。

beforeunloadイベントにsendBeaconを添付してページから移動すると、ネットワークペインに追加された行が表示されますが、ステータスは「（保留中）」に止まっていて送信されません。

私は間違っていますか？

window.addEventListener('beforeunload', function() { 
    navigator.sendBeacon(
     'https://www.example.com/sendBeacon-data-collector', 
     'Sent by a beacon!'); 
    }, false); 

Answer 1

あなたは接続が「保留中」で止まっていて、送信しないと言います。送信しなかった場合、ネットワークペインに接続が全く表示されないので、はが実際に送信することが確認されます。

期待されている行動（観測のみで経験的に確立した主張）と思われる「保留中」に固執している状態については、定義上、sendBeaconコマンドは答えを期待していないので、サーバーからの可能な応答（私の部分の純粋な推測）を決して読んでいないので、ブラウザが接続が機能しているかどうかを表示していないのが普通です。

とにかく私はウェブアプリケーションにsendBeaconを持っています。これは、 "保留中"のステータスにもかかわらず正常に動作しているデータベースに最後のデータを保存します。したがって、データが届かない場合は、問題が他の場所にある可能性があります。

たとえば、適切な形式でデータを送信する必要があります。 HTMLフォームからデータを読み取るスクリプトと互換性を持たせるには、単純にJSON文字列を送信するだけではなく、文字列をformdataに配置する必要があります（そうでなければ、サーバ側の生の投稿データから取得できます）

例：

var fd = new FormData(); 
    fd.append('data', JSON.stringify(beaconData)); 
    navigator.sendBeacon("inc/php/saveData.php", fd); 

また、あなたはsendBeaconは常にPOSTパラメータを介してデータを送信することを認識する必要があります。 GETを使用する場合は、自分でURLにデータを追加する必要があります。