本文主要介紹了詳解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資料了
##相關推薦;
以上是vue中使用express和fetch取得本地json檔案技巧分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!