vue中使用express和fetch取得本地json檔案技巧分享

本文主要介紹了詳解vue中使用express+fetch取得本地json文件，非常具有實用價值，需要的朋友可以參考下，希望能幫助到大家。

自己在做個vue小demo的時候，想模擬從伺服器取得json資料的過程，一開始的想法是使用fetch直接取得本地的json文件，無論是install了json-loader還是把json檔案放在index.html的目錄下或webpck.config.js裡output的目錄下，但是fetch一直報找不到檔案。然後決定用fetch向express伺服器發送請求，由伺服器傳回json資料。

express伺服器

先寫一個簡單的express伺服器，只有一個接口，起到範例作用就行了。 back.js如下:

var express = require('express')
var app = express();
var allowCrossDomain = function(req, res, next) {//设置response头部的中间件
res.header('Access-Control-Allow-Origin', 'http://localhost:8089');//8089是vue项目的端口，这里相对于白名单
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
res.header('Access-Control-Allow-Headers', 'Content-Type');
res.header('Access-Control-Allow-Credentials','true');
next();
};
app.use(allowCrossDomain);
app.get("/api/data",function (request,response) {
var data = require('./grid.json');//要获取的json文件
response.send(data);
})
app.listen('3000',function () {
console.log('>listening on 3000')
});

然後使用指令node back.js就可以執行這個服務了。

fetch取得json資料

用語接受請求的伺服器已經運作起來了，接下來就是使用fetch來傳送請求了，如下程式碼段就可以完成請求功能：

fetch( "http://localhost:3000/api/data")
.then(res=>res.json())
.then(data=>console.log(data))
.catch(function (e) {
console.log('oops! error:',e.message)
})

此時就可以順利取得想要的json資料了

##相關推薦;

#jQuery怎麼可以讀取本機json檔案

#jQuery使用ajax讀取本機json檔案的案例

json檔案定義與用法匯總#

以上是vue中使用express和fetch取得本地json檔案技巧分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！