Fetchの使い方とデータMock

fetchはajaxの代わりにデータを取得/コミットする技術であり、一部の高級ブラウザではすでにwindowが可能である.fetchを使いました.jQueryを使うよりajaxは軽量で(これだけしかできません)、promiseをサポートしており、現在のプログラミング習慣に合っています.
インストールnpm install whatwg-fetch --save、インストールできます.古いバージョンのブラウザと互換性を持つために、npm install es6-promise --saveをインストールする必要があります.
fetchの使い方

fetch(url,init).then(function(response) {  } )

パラメータ:urlは取得するリソースを表し、urlまたはRequestオブジェクトの値がある可能性があります.
init:オプション、オブジェクト、パラメータ

method:使用を要求するメソッドgetまたはpost

headers:リクエストヘッダ情報、オブジェクト

     headers: {
            "Content-Type": "application/json"
              },

body:要求されたbody情報:Blob、BufferSource、FormData、URLSearchParams、またはUSVstringオブジェクトである可能性があります.注意GETまたはHEADメソッドのリクエストにはbody情報は含まれません.

mode:cors、no-cors、same-originなどの要求モードは、デフォルトではno-corsです.このモードでは、CDNからのスクリプト、他のドメインからのピクチャ、および他のドメイン間リソースが許可されますが、まず、要求されたmethodはHEAD、GET、またはPOSTのみであるという前提条件があります.また、ServiceWorkersがこれらのリクエストをブロックした場合、これら以外のHeaderプロパティを任意に追加または変更することはできません.第三に、JSはResponseオブジェクトの属性にアクセスできません.これにより、ドメイン間でのServiceWorkersのセキュリティとプライバシー情報の漏洩の問題が保証されます.corsモードはドメイン間リクエストを許可し、same-originモードはドメイン間リクエストに対してerrorを返し、すべてのリクエストが同源ポリシーを遵守することを保証します.

credentials:‘include’//ドメイン間でcookieを持つことができることを示す(fetchドメイン間要求はデフォルトではcookieを持たないので、手動でこのパラメータを指定する必要がある)

cache:要求されたcacheモード:default,no-store,reload,no-cache,force-cache,or only-if-cached.

戻り値:Promise、resolve時にResponseオブジェクトが返されます.
getの基本的な使用
まず依存プラグインを導入

import 'whatwg-fetch' 
import 'es6-promise'

var result = fetch('/api/1', { 
    credentials: 'include', 
    headers: { 
        'Accept': 'application/json, text/plain, */*'
     } 
});

fetch()メソッドはデータを要求し、promiseオブジェクトを返し、promiseの構文構造を使用することができます.

result.then(res=>{
    return res.text()
}).then(text=>{
    console.log(text)
})

result.then(res=>{
    return res.json()
}).then(json=>{
    console.log(json)
})

なお、上記の2つの用法では、res.text()とres.json()だけが異なり、この2つの方法は、返されるResponseデータを文字列またはjsonフォーマットに変換することである
postの基本使用

import 'whatwg-fetch' 
import 'es6-promise'

var result = fetch(url,{
    method:'post',
    credentials: 'include',
    headers:{
        'Accept': 'application/json, text/plain, */*', 
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: "a=100&b=200"
})

fetchがデータをコミットした後も、返される結果はpromiseオブジェクトであり、getメソッドと同じなので、処理方法も同じです.
抽象postとget
データを取得するたびに、上のように多くのコードが書かれているので、冗長すぎます.getとpostを2つの方法に分けて抽象化し、2つのjsファイルに分けることができます.
get.js

import "whatwg-fetch"
import "es6-promise"

export function get(url){
    var result = fetch(url,{
        credentials:"include",
        headers:{
            'Accept':'application/json,text/plain,*/*'
        }
    });

    return result;
}

post.js

import "whatwg-fetch"
import "es6-promise"

//        key1=val1&key2=val2&key3=val3       

function obj2params(obj){
    var result = "";
    var item;
    for(item in obj){
        result += '&'+ item + '=' + encodeURIComponent(obj[item]);
    }

    //  result       &       
    if(result){
        result = result.slice(1);
    }

    return result;
}


//       
export function post(url,paramsObj){
    var result = fetch(url,{
        method:'POST',
        credentials:'include',
        headers:{
            'Accept':'appliaction/json,text/plain,*/*',
            'Content-Type':'application/x-www-form-urlencoded'
        },
        body:obj2params(paramsObj)
    });

    return result;
}

なお、post.jsではパラメータを処理していますが、body:「a=100&b=200」というパラメータフォーマットが要求されていますが、私たちが普段jsで最も多く使用しているのはJSONフォーマットのデータなので、回転する必要があります.
この2つの方法は抽象的で,他のコンポーネントから呼び出すと簡単になる.
データモジュール
インストールは、koaを使用してバックエンドインタフェースのシミュレーションを行うため、koaおよび関連するプラグインnpm install koa koa-body koa-router --save-devをインストールする必要があります.ここでは-save-devを使用します.開発中にkoaを使用するだけで、プロジェクトがリリースされた後にkoaは使用されません.リリース後のプロジェクトでは、koaに基づいて書かれたインタフェースではなく、バックエンドエンジニアが開発したオンラインインタフェースを使用しています.
アナログダイナミックインタフェース
つまり、自分で1つのwebフレームワークを使って、既定のインタフェースとデータ構造の要求に従って、自分でバックエンドインタフェースの機能をシミュレートして、フロントエンドのプロジェクトを順調に走ることができます.この方式は新しく開発されたプロジェクトに適用され,バックエンドとフロントエンドが同時に開発される.
シミュレーションインタフェースのコードを./mockディレクトリに書きます.インタフェースファイルは./mock/server.jsです(本当のプロジェクトを開発するときは、複数の異なるモジュールに分けられます).
注意:package.jsonでは、次のコードを追加し、npm run mockでシミュレーションインタフェースサービスを開始する必要があります.

"scripts": { "mock": "node --harmony ./mock/server.js", },

Webpack-dev-serverを使用するエージェント
koaインタフェースのポートは3000で、私たちのプロジェクトのインタフェースは8080で、ドメインをまたいでいるのではないでしょうか.--デフォルトでは、ドメイン間であることは間違いありません.Webpack-dev-serverがエージェントの転送を行う必要があります.構成コードは./webpack.config.js中

devServer: {
        proxy: {
          //    `/api`     http   ，       localhost:3000  ，  koa    mock   。
          // koa     ./mock    ，      npm run mock
          '/api': {
            target: 'http://localhost:3000',
            secure: false
          }
        },
        contentBase: "./public", //                
        colors: true, //          
        historyApiFallback: true, //   
        inline: true, //    
        hot: true  //         HotModuleReplacementPlugin
    }