基於es6 import 實現本地資料mock

import()動態載入相關資料：

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

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

1、準備需要mock的json資料，命名為getlabeldetail.js；

​​​​

注意：這裡的檔名與介面位址路由的最後一層保持一致。

example: post介面位址為'

/***/***/getlabeldetail'，故命名getlabeldetail.js

get介面位址為'/***/***/getlabeldetail?id=123'，故命名getlabeldetail.js'

getlabeldetail.js

export default 

}}

mockapi.js

/**

* 獲取mock的json資料
* @param uri 介面位址
* @param params請求引數
* @returns 
*/function getmockjson(uri, params) 
return new promise((resolve, reject) => .js`).then(() =>  else 
}).catch(error => )
})}// 獲取標籤詳細資訊
export function getlabeldetail(params) 

import  from '@/services/mockapi'

// ...
​​​​​​​
console.log('結果', res)
				
es6 import 和 export細節說明
import匯入模組 export匯出模組 全部匯入 import people from example 有一種特殊情況，即允許你將整個模組當作單一物件進行匯入 該模組的所有匯出都會作為物件的屬性存在 import as example from example.js console.log ex...
				
ES6，import時如何正確使用花括號
在 es6 之前，社群制定了一些模組載入方案，最主要的有 commonjs 和 amd 兩種。前者用於伺服器，後者用於瀏覽器。es6 在語言標準的層面上，實現了模組功能，而且實現得相當簡單，完全可以取代 commonjs 和 amd 規範，成為瀏覽器和伺服器通用的模組解決方案。而我們這裡要說的是在使...
				
關於ES6 import命令的乙個補充
其實，import命令乙個典型的表達是其後面的from子句中可以直接跟乙個路徑 也常常跟乙個省略.js副檔名的js模組檔名 此時，es6在解析時會到指定路徑下查詢乙個名字為index.js的檔案。注意 js檔案只能用index.js，換其他名字都會報錯！有關import命令的上述情況的乙個典型應用是...