基於es6 import 實現本地資料mock

2021-09-07 10:13:11 字數 1217 閱讀 9947

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 

}}

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

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)

3、頁面中使用

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命令的上述情況的乙個典型應用是...