vue.js--JSONファイルをロードする2つの方法
1037 ワード
方法1:
importが直接導入することで、dataを直接呼び出すことでjsonファイルの内容を取得できます.
この方法は比較的直接的であるが,パッケージング後にJSONファイルを変更することに気づき,結局レンダリングされたページは最初にJSONファイルをパッケージングしてレンダリングされたページと同様であり,私の望む結果には至らないため,方法2を試みた.
方法2:
axiosリクエストにより、前のブログaxiosのパッケージを参照できます.
1.http.jsにリクエストメソッドを追加
2.インタフェースのパッケージファイルに$getJson要求方式を導入
3.構成で使用
importが直接導入することで、dataを直接呼び出すことでjsonファイルの内容を取得できます.
import data from 'static/h5Static.json'
この方法は比較的直接的であるが,パッケージング後にJSONファイルを変更することに気づき,結局レンダリングされたページは最初にJSONファイルをパッケージングしてレンダリングされたページと同様であり,私の望む結果には至らないため,方法2を試みた.
方法2:
axiosリクエストにより、前のブログaxiosのパッケージを参照できます.
1.http.jsにリクエストメソッドを追加
export const $getJson = function (method) {
return new Promise((resolve, reject) => {
axios({
method: 'get',
url: method,
dataType: "json",
crossDomain: true,
cache: false
}).then(res => {
resolve(res)
}).catch(error => {
reject(error)
})
})
2.インタフェースのパッケージファイルに$getJson要求方式を導入
import{$get,$post,$getJson}from '../http';
// JSON
const getH5StaticJson = data => {
return $getJson('static/h5Static.json',data)
}
3.構成で使用
this.$api.user.getH5StaticJson({}).then(res => {
consloe.log(res)
});