ファッションに追随して、Fetchはそれらを実践します

2628 ワード
vue.js fetch
今日、アリの先端面接に関する質問を見て、アリはfecthを使っているはずなのに、どうしてajaxの底を試験しているのかという兄弟がいました.以前ajaxを読んで死んでいましたが、fetchの永生文章を読んでいたときにこの知識を知っていましたが、暇でも暇だったので、探してみて、彼がそこにいることを知りました.いつものルール、公式の少しの文章を見て、私はやはりMDNを推薦して、個人の理解を読み終わって、ajax、fetchの優位性を比較します:
    ，   ajax        ；
  promise；

簡単な呼び出しを見てみましょう.
fetch('http://localhost:8089/StockAnalyse/BlogServlet', fetchInitOption({flag:"getList"}))
.then(function(response){
    if(response.ok){  //  404 500     
            return response.json();
    } else {
        console.error('     ，     ；\r
Code:' + response.status)
    }
}).then(function(data){
           that.item =data;// promise this        window  ，     that   this；
           that = null;
        })                
});

jquery、vue-resource、axiosなどのajaxサードパーティ製ライブラリを使用したことがある場合は、fetch呼び出し方法とこれらのライブラリの類似性が非常に大きく、optionの設定可能なプロパティを見てみましょう.
method: GET/POST...
headers:    header    ，    Content-type    header；
body:       
mode: cors / no-cors / same-origin，    no-cors
credentials: omit / same-origin / include
cache: default / no-store / reload / no-cache / force-cache / only-if-cached
redirect: follow / error / manual
referrer: no-referrer / client / 
referrerPolicy: no-referrer / no-referrer-when-downgrade / origin /  origin-when-cross-origin / unsafe-url
integrity:

fetchで出会った新鮮なこと:
  • 404、500のエラーにかかわらず、リクエストにはresponse応答があるため、responseがある.OK状態値の判断;
  • サードパーティajaxライブラリを使用してpostリクエストを送信すると、データデータはjsオブジェクトであり、Content-typeをアプリケーション/x-www-form-urlencodedと設定し、サーバは正常に応答することができる(データはrequest.getPramerameterとして読み出される).しかし、Fetchがこのように設定するとサーバ500がエラーになるのは、FetchがAJAXのように最下位のAPIであり、カプセル化されたようなデータ変換がなく、第三者ライブラリが持参しているため、postリクエストによく使われるContent-typeについては、サーバ側を変更しないためにpostデフォルトリクエストヘッダを構成する際に、送信データに対して一定の処理を行ったためである.ただし、単純JSオブジェクトにのみ適用されます.オブジェクトをキー値ペアに変換する方法を目的としています.コードは、function fetchInitOption(json){
    let res=new Array();
for(let item in json){
    res.push(item+'='+json[item])
}
return {
    method:'post',
    mode:'cors',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    body:res.join('&')            
};
    }
    • です.
  • thisは変化を指します(これはfetchのピットではありません.これはプログラミングで注意すべき問題です).私はvueを使用しています.インスタンスのthisはデフォルトで現在のvueインスタンスを指していますが、fetchを呼び出すという方法がpromiseの応答の匿名関数でwindowオブジェクトを指しているので、ここでは事前に変数thatでインスタンスthisの参照を維持する必要があります.
  • リクエスト前のブロックは、リクエスト前にヘッダにカスタムリクエストヘッダを追加したい場合、TOKENのようにしますが、解決策のようにInitOption時に手動で設定することもできます.

    • 道は果てしないが、足取りはしっかりしている(朝1杯の鶏のスープ、素晴らしい週末が始まる)
    極めてシンプルなAjaxパッケージで、コールバックインタフェースとブラウザの互換性が優れています.
    jQuery-AJAX load()メソッド【jQuery load()メソッドは簡単だが強力なAJAXメソッドです.】構文:$(selector).load(URL,data,callback);