vue 导入本地json数据的几种方式

假设有test.json文件位于src/api/json/test.json路径

一,直接import

import res from "@/api/json/test.json"

res 即为导入的 test.json 数据

二,通过import()函数

let res = await import("@/api/json/test.json").then(data=>{
    return data.default
})

res 即为导入的 test.json 数据

三,封装为api接口

export const getJsonData = params => {
    return import("@/api/json/test.json").then(data=>{
        return data.default
    })
}

通过接口 let res = await getJsonData() 获取的即为test.json数据

四,利用promise将数据直接封放在接口内部

export const getJsonData = params => {
    return new Promise((resolve,reject)=>{
        let data =['aaa','bbb']
        setTimeout(()=>{
            resolve(data)
        },200)
    })
}

通过接口 let res = await getJsonData() 获取的即为test.json数据

五，import➕promise

import data from "@/api/json/test.json"

export const getJsonData = params => {
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve(data)
        },200)
    })
}

通过接口 let res = await getJsonData() 获取的即为test.json数据

六，import➕promise

export const getJsonData = async params => {

    let res = await import("@/api/json/test.json")
    
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve(res.default)
        },200)
    })
}

通过接口 let res = await getJsonData() 获取的即为test.json数据