import()動態載入相關資料：https://blog.csdn.net/Zckguiying/article/details/85864233

需求描述：前端專案中必定要有本地資料mock的模組，實現前後端分離，解決開發時因前後端介面的依賴而導致開發效率低下的問題。

實現方案：這裡主要使用了es6 import()動態載入模組來實現mock功能。

1、準備需要mock的json資料，命名為getLabelDetail.js；
​​​​
注意：這裡的檔名與介面地址路由的最後一層保持一致,測試介面地址為'/reference/label/getLabelDetail'，故命名getLabelDetail.js。

getLabelDetail.js

export default {
  'code': '200',
  'msg': '',
  'result': {
    'labelId': '12332131231213341',
    'labelName': '上海中心大廈',
    'labelAttribute': {
      'city': '上海'
    }
  }
}

2、根據介面地址找到對應檔案，動態載入相應的json資料。

mockApi.js

/**
 * 獲取mock的json資料
 * @param uri 介面地址
 * @param params請求引數
 * @returns {Promise<any>}
 */
function getMockJson(uri, params) {
  console.log(`介面地址:${uri}---請求引數:`, params)
  let fileName = uri.substring(uri.lastIndexOf('/') + 1)
  return new Promise((resolve, reject) => {
    // 這裡使用import()動態載入，路勁為相對路徑
    import(`../../mock/${fileName}.js`).then(({default: res}) => {
      if (res.code === '200' || res.code === 200) {
        resolve(res.result)
      } else {
        reject('mock資料中code非200，請檢查！')
      }
    }).catch(error => {
      console.error(error)
    })
  })
}

// 獲取標籤詳細資訊
export function getLabelDetail(params) {
  let uri = '/reference/label/getLabelDetail'
  return getMockJson(uri, params)
}
 

3、頁面中使用

import { getLabelDetail } from '@/services/mockApi'
// ...
​​​​​​​
getLabelDetail({appId: 123, labelId: 123123}).then(res => {
  console.log('結果', res)
  // ...
})

測試效果：