待っていない！ APIをmockします

最新のWebアプリケーション開発には、多くの場合、フロントエンドとバックエンドの間のゆるい結合が含まれ、頻繁に別々のチームによって処理されます。これにより、同期の課題につながる可能性があります。解決策は、バックエンドAPIをシミュレートし、予想される動作を模倣する「偽の」サーバーを作成することです。このプロセスはモッキングとして知られています。理想的には、モッキングにより、フロントエンドの開発は、直接的なバックエンド依存関係なしに独立して進むことができます。複数のモッキングアプローチが存在しますが、これは困難な場合があります。

この記事では、フレームワークと存在するアプローチ（任意のフレームワークまたはバニラJavaScriptに適用可能）を使用して、効果的なAPIモッキングと新しいアプリケーションまたは既存のアプリケーションでの実装を示しています。

ミラージュ：クライアント側のモッキングソリューション

クライアント側のモッキングフレームワークであるMiragejsを利用します。 Mirageはブラウザ内で動作し、 XMLHttpRequestとFetchリクエストをインターセプトしてAPI応答をシミュレートします。ユーザーフレンドリーなインターフェイスを提供し、モッキングプロセスを簡素化します。

VUEを使用して簡単なTo Doアプリケーションを構築します（ただし、アプローチはフレームワークに依存しません）。

ミラージュのセットアップ

Mirageをインストールする：

 ＃npm
npm i miragejs -d

＃糸
糸はmiragejs -dを追加します

最適なフォルダー構造：

 <code>/ ├── public ├── src │ ├── api │ │ └── mock │ │ ├── fixtures │ │ │ └── get-tasks.js │ │ └── index.js │ └── main.js ├── package.json └── package-lock.json</code>

api/mock/index.jsを作成します：

 // api/mock/index.js
'miragejs'から{サーバー}をインポートします。

デフォルト関数をエクスポート（{環境= '開発'} = {}）{
    新しいサーバーを返す（{
        環境、
        routes（）{
            //ここで定義されているルート
        }、
    }）;
}

アプリケーションのブートストラップファイル（例：VUEのsrc/main.js ）：

 // main.js
'./api/mock/index'からcreateServerをインポートします。

if（process.env.node_env === 'development'）{
    createServer（）;
}

この条件により、ミラージュは生産ビルドから除外されます。

Mirageの仕組み

Mirageは、Pretender Libraryを使用して、クライアント側です。 Pretenderはリクエストをインターセプトし、実際のサーバーに到達し、シミュレートされたMirageサーバーにルーティングするのを防ぎます。 DevToolsのネットワークタブは、内部で処理されているため、Mirageリクエストは表示されません。

リクエストの処理

A /api/tasks Endpointを作成して、To Doアイテム（Axiosを使用）を取得しましょう。

 // components/tasks.vue
デフォルトのエクスポート{
    async created（）{
        試す {
            const {data} = axios.get（ '/api/tasks'）;
            this.tasks = data.tasks;
        } catch（e）{
            console.error（e）;
        }
    }
};

当初、Mirageは未定義のルートを示すエラーを記録します。これに対処し、 api/mock/index.jsにルートハンドラーを追加します。

 // api/mock/index.js
routes（）{
    this.get（ '/api/tasks'、（）=>（{
        タスク：[
            {id：1、テキスト：「猫を養う」}、
            {id：2、テキスト：「皿を洗う」}、
        ]、、
    }））;
}、

Mirageは、さまざまなHTTPメソッド（ get 、 post 、 patch 、 put 、 delete 、 options ）をサポートしています。

Mirageのデータレイヤーを使用した動的データ

動的なデータのために、Mirageはseedsフックと軽量データベースを提供します。リファクタリングしましょう：

 // api/mock/index.js
種子（サーバー）{
    server.db.loaddata（{
        タスク：[
            {id：1、テキスト：「猫を養う」}、
            {id：2、テキスト：「皿を洗う」}、
        ]、、
    }）;
}、

routes（）{
    this.get（ '/api/tasks'、（schema）=> {
        return schema.db.tasks;
    }）;
    this.post（ '/api/tasks'、（schema、request）=> {
        const task = json.parse（request.requestbody）.data;
        return schema.db.tasks.insert（task）;
    }）;
    this.delete（ '/api/tasks/：id'、（schema、request）=> {
        const id = request.params.id;
        return schema.db.tasks.remove（id）;
    }）;
}

ルートハンドラーのschemaパラメーターは、Mirageデータベースへのアクセスを提供します。 requestパラメーターにはリクエストの詳細が含まれています。

Mirageを既存のアプリケーションに統合します

Mirageを既存のアプリケーションに統合するには、 passthrough()メソッドを使用して、未解決のリクエストを処理します。

 routes（）{
    this.get（ '/api/tasks'、（）=> {...}）;
    this.passthrough（）; //未処理のリクエストを処理します
}

カスタムurlPrefixを指定することもできます。

 routes（）{
    this.urlprefix = 'https：//devenv.ourapp.example';
    this.get（ '/tasks'、（）=> {...}）;
}

これにより、Mirageと実際のAPIの間のシームレスな遷移が可能になります。

結論

MirageJSは、APIモッキング用の合理化されたクライアント側のソリューションを提供し、外部プロセスやサーバー側の知識の必要性を排除します。使いやすさと強力な機能により、フロントエンド開発者にとって貴重なツールになります。より高度な機能とチュートリアルについては、公式のMirageJSドキュメントを参照してください。作業例はGitHubで見つけることができます。

以上が待っていない！ APIをmockしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。