ES 6 Fetch API HTTP要求ユーティリティ

7042 ワード
プロミス es 6 fetch node.js javascript
今回は、どうやってFetch API(ES 6＋)を使ってREST APIに対するHTTP要求を紹介します.また、いくつかの例があります.
なお、すべての例は矢印機能を有するES 6において与えられる.
現在のWeb/モバイルアプリケーションの一般的なモードは、サーバからあるデータ(例えば、ユーザ、スレッド、コメント、購読、決済など)を要求または表示し、CRUD(作成-Create、閲読-Retrieve、更新-Updateまたは削除-Delete)を使用して動作します.
リソースをさらに操作するために、私たちはしばしばこれらのJS方法(推奨)を使用します.例えば.map()と.filter()と.reduce().
以下は私達が解決したい問題です.JSの非同期HTTP要求を処理するのはAJAXですか?なぜAPIを取得しますか?Fetch APIを早く紹介してAPI-CRUDの例←良いものを獲得します!
1.JSの非同期HTTP要求を処理する
JavaScript(JS)の仕事原理は最も挑戦的な部分の一つであり、どのように非同期要求を処理するかを理解することであり、これはpromisesとフィードバックがどのように働くかを理解する必要がある.ほとんどのプログラミング言語では、操作は順番に行われると思います.最初の行を実行してから次の行を継続することができます.この道理は明らかで、これは私達自身がこのように操作したり、仕事したりするので、もちろん歌を聞きながらコードを書くこともできます.しかし、JSを使って、バックグラウンド/フロントで動作する複数の操作があります.ユーザイベントを待つたびに、ウェブアプリケーションを凍結することはできません.JavaScriptを非同期として記述すると、何らかの誤解が生じる可能性がある.より正確には、JavaScriptは同期しており、様々なフィードバック機構を持つ単一スレッドである.しかし、順序によって発生しなければならないことがあります.そうでないと、流れが混乱して、意外な結果が発生します.このために、私たちはpromisesとcalbackを使って構築できます.例:_ある操作の前にユーザーの証明書を確認してからこの操作ができます.
2.AJAXとは何ですか
AJAXは、非同期JavaScriptとXMLを表しており、アプリケーションが実行されている間にWebサーバとデータを交換することで、ページを非同期的に更新することができます.簡単に言えば、実質的には、ページ全体を再読み込みすることなく、ウェブページの各部分を更新することができるということです.AJAXは誤認性のある名前です.AJAXアプリケーションはXMLを使用してデータを伝送することができますが、データを純粋なテキストやJSONテキストとして送信することもよくあります._;-w 3 shols.com*
AJAXは一緒に来ましたか多くの開発者は1ページのアプリケーション(SPA)の中ですべての特性を持つことに興奮していますが、これは多くの非同期の苦痛をもたらします.幸い、Anglar、VueJSとReactのようなライブラリがありますので、SPAアプリを書く時にはもっと簡単で使いやすいです.全体として、ページ全体をどのようにバランスよく読み込むか、または一部のページを読み込むかが重要です.ほとんどの場合、ページはブラウザの日増しに改善されている機能の下で再読み込みされ、非常によく表現されました.以前なら、ページを再読み込みするには何秒かかりますか?しかし、今日のブラウザは非常に早いので、AJAXやページ再読み込みを実行するかどうかを決めるのはそんなに違いません.個人の経験では、ほとんどの場合、お客様はSPAですか?それとも追加ページですか?もちろん、私の意味を誤解しないでください.確かにSPAが好きです.しかし、私達はいくつかのバランスを考慮しなければなりません.もし限られた予算と資源が足りないならば、快速解決案はもっといい方法かもしれません.
最後に、実際には用例によって異なりますが、個人的にはSPAは簡単なページではなく、より多くの開発時間といくつかの頭痛の問題を処理する必要があると思います.
3.なぜFetch APIが必要ですか?
これにより、私たちはサーバに対して声明的なHTTP要求を実行することができます.各要求に対しては、Promiseを作成するために解決すべき要求は、コンテンツタイプを定義し、データにアクセスすることができる.
現在、Fetch APIの利点は、JS生態系によって完全に支持されており、MDN Mozilla文書の一部でもある.最後に最も重要ではないですが、ほとんどのブラウザ(IEを除く)で開梱して使います.長い目で見れば、ウェブAPIを呼び出す標準的な方法になると思います.
注意します他のHTTPの方法はよく分かります.例えばRXJSを持つObservableを使って、購読/購読キャンセルなどのメモリ管理/漏洩についてどう関心を持っていますか?HTTP要求を実行する新しい標準的な方法になるかもしれませんが、誰が知っていますか?いずれにしても、ここではFetch APIだけに注目していますが、将来はObservableとRXJSに関する文章を書くかもしれません.
4.Fetch APIを迅速に紹介する
このfetch()方法はPromise解析Request表示状態からのRequest解析Reponseの方法を返します.もしあなたのpromise{}がコンソールのログ画面でこのニュースを受信したら、慌てないでください.基本的にはPromiseの仕事を意味しますが、解決を待っています.したがって、それを解決するためには、then()処理プログラム(コールバック)が必要です.簡単に言えば、まずパスを定義します.次にサーバからデータを要求します.第三の定義内容タイプ(Body)は最後に重要ではありません.データにアクセスします.
この概念を理解するのが難しいなら、慌てないでください.以下に示す例によって、より良い概観が得られます.
          
https://jsonplaceholder.typicode.com/users //  JSON
5.API取得-HTTPの例
データにアクセスしたいなら、私たちは2つのthen()処理プログラム(コールバック)が必要です.しかし、リソースを操作したいなら、私たちは一つのプロセスだけが必要です.しかし、我々は第二の送信値を確保するために使用することができます.
基本抽出APIテンプレート
//  fetch     
fetch
.then(response.something) //            
.then(data) //
注意します以上の例は目的を説明するためだけに使用されます.これを実行するとコードが機能しません.
APIの取得例は、ユーザーがユーザーリストを表示し、新規ユーザ削除ユーザ更新ユーザを削除することを示している.
注意しますリソースは本当にサーバ上で作成されませんが、falseの結果を返して本物のサーバーを模倣します.
1.表示ユーザは、前に述べたように、単一のユーザを表示するプロセスは、2つの.then()処理プログラム(コールバック)を含み、最初はオブジェクトを定義するためのもので、2番目はデータにアクセスするためのものである.クエリurl文字列を読むだけで、APIの役割が分かります.これはレストアプリの重要な意味の一つです.
例
fetch('https://jsonplaceholder.typicode.com/users/2')
    .then(response => response.json()) //            
    .then(data => console.log(data)) //      
//     ：
// {
//     "id": 2,
//     "name": "Ervin Howell",
//     "username": "Antonette",
//     "email": "[email protected]",
//     "address": {
//       "street": "Victor Plains",
//       "suite": "Suite 879",
//       "city": "Wisokyburgh",
//       "zipcode": "90566-7771",
//       "geo": {
//         "lat": "-43.9509",
//         "lng": "-34.4618"
//       }
//     },
//     "phone": "010-692-6593 x09125",
//     "website": "anastasia.net",
//     "company": {
//       "name": "Deckow-Crist",
//       "catchPhrase": "Proactive didactic contingency",
//       "bs": "synergize scalable supply-chains"
//     }
// }
2.ユーザーリストを表示します.この例は前の例とほぼ同じです.ただし、クエリ文字列は/usersではなく、/users/2です.
例

fetch('https://jsonplaceholder.typicode.com/users')
    .then(response => response.json()) //            
    .then(data => console.log(data)) //      
//     ：
// [
//     {
//       "id": 1,
//       "name": "Leanne Graham",
//       "username": "Bret",
//       "email": "[email protected]",
//       "address": {
//         "street": "Kulas Light",
//         "suite": "Apt. 556",
//         "city": "Gwenborough",
//         "zipcode": "92998-3874",
//         "geo": {
//           "lat": "-37.3159",
//           "lng": "81.1496"
//         }
//       },
//       "phone": "1-770-736-8031 x56442",
//       "website": "hildegard.org",
//       "company": {
//         "name": "Romaguera-Crona",
//         "catchPhrase": "Multi-layered client-server neural-net",
//         "bs": "harness real-time e-markets"
//       }
//     }
//   ...
// ]
3.新規ユーザーを作成するというのは、前の例とは少し違って見えます.HTTPプロトコルを熟知すれば、POST、GET、DELETE、UPDATE、PATCH、PUTなど多くの方法を提供してくれます.これらの方法は、サーバ上のリソース／データの操作を主に行う動作タイプを簡単に説明する動詞である.
いずれにしても、Fetch APIを使用して新しいユーザを作成するためには、HTTP述語POSTを使用する必要がある.まず、どこでそれを定義しますか?幸いにも、Initは、ユーザー定義のURL、例えば、方法の種類、本文、根拠、タイトルなどのオプションパラメータを伝えることができます.例
fetch('https://jsonplaceholder.typicode.com/users',{
    method: 'POST',
      body: JSON.strignify({
        username: '  ',
          email: '[email protected]',
        userId: 1
    }),
      headers: { 'Content-Type': 'application/json;charset=utf-8'}
})
4.ユーザーを削除するためには、まずユーザー/users/1の位置付けが必要です.その後、方法の種類を定義します.例
fetch('https://jsonplaceholder.typicode.com/users/1',{
    methods: 'DELETE'
})
5.ユーザHTTP述語PUTを更新してターゲットリソースを操作し、部分的に変更する場合はPATCHを使用する必要がある.例
fetch('https://jsonplaceholder.typicode.com/users',{
    method: 'PUT',
      body: JSON.strignify({
        username: '  ',
          email: '[email protected]',
        userId: 1
    }),
      headers: { 'Content-Type': 'application/json;charset=utf-8'}
})
結論
今、JavaScriptのFetch APIを使って、サーバーからリソースを検索したり操作したりして、promiseをどのように処理するかを基本的に知っています.本明細書を使用して、CRUD動作を構築するAPI要求の指針として使用することができます.個人的には、Fetch APIは声明的なものだと思います.技術コードの経験がなくても、何が起こったのか分かりやすいです.
何か問題があれば、コメントと処分についてあなたの考えを共有します.
JavaScriptの対象継承雑談