Vue プロジェクトで mock を使用する方法をご存知ですか?

npm install mockjs // mockjs をインストール

npm インストール axios

'axios' から axios をインポートします
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-urlencoded'
定数 http = axios.create()
 http.defaults.timeout = 3000
 http.interceptors.request.use(config => { // リクエストインターセプターの設定 // オプション // 何かを行う
    設定を返す
}, エラー => {
    コンソール.log(エラー)
    Promise.reject(error) を返します。
})
 http.interceptors.response.use(response => { // レスポンスインターセプターの設定 // オプション // 何かを行う
    応答を返す
}, エラー => {
    コンソール.log(エラー)
    Promise.reject(error) を返します。
})
 export function fetch(url, params) { // axios の post リクエストをカプセル化します return new Promise((resolve, reject) => { // Promise の使用方法については、axios.post(url, params).then(response => { を参照してください。
            resolve(response.data) // プロミス関連}).catch(error => {
            拒否(エラー) // プロミス関連})
    })
}
 export default { // 次のページで使用される htto_mock メソッドを公開します http_mock(url, params) {
        フェッチを返す(url, params)
    }
}

'mockjs' から Mock をインポートします。
 const ランダム = Mock.ランダム
 var listData = 関数() {
    _data = {とする
        ステータス: 200、
        メッセージ: '成功'、
        データ： {
            合計: 100,
            '行|10': [{
            ID: '@guid',
            名前: '@cname',
            '年齢|20-30': 23,
            'job|1': ['フロントエンドエンジニア'、'バックエンドエンジニア'、'UIエンジニア'、'要件エンジニア']
            }]
        }
    }
    {_data} を返す
}
// url はインターセプトされるリクエスト アドレス、リクエスト メソッド、リクエスト データ (ルール) です (ここでの api は mockjs によってインターセプトされます)
モック.モック('http://route.showapi.com/60-27', 'post', listData())
 

'@/http/mock' からモックをインポートします

'@/http/request' からリクエストをインポートします
 エクスポートデフォルト{
    名前: "FirstPage",
    作成された() {
        この.getData()
    },
    メソッド: {
        取得データ() {
             // http_mock を使用してリクエストを送信するふりをします (mock はリクエストを自動的にインターセプトしてデータを生成します)
   // ここでの最初のパラメータは、Mock.mock() の最初のパラメータと一致している必要があります console.log('Request started')
            リクエスト.http_mock('http://route.showapi.com/60-27','api_id=63114&api_sign=3847b0').then(レスポンス => {
            コンソール.log(レスポンス._data)
            })
       },
    }
}