詳解vue中使用express+fetch獲取本地json文件
自己在做個(gè)vue小demo的時(shí)候，想模擬從服務(wù)器獲取json數(shù)據(jù)的過(guò)程，一開(kāi)始的想法是使用fetch直接獲取本地的json文件，無(wú)論是install了json-loader還是把json文件放在index.html的目錄下或webpck.config.js里output的目錄下，但是fetch一直報(bào)找不到文件。然后決定用fetch向express服務(wù)器發(fā)送請(qǐng)求，由服務(wù)器返回json數(shù)據(jù)。
express服務(wù)器
先寫(xiě)一個(gè)簡(jiǎn)單的express服務(wù)器，只有一個(gè)接口，起到示例作用就行了。back.js如下:
var express = require('express')
var app = express();
var allowCrossDomain = function(req, res, next) {//設(shè)置response頭部的中間件
res.header('Access-Control-Allow-Origin', 'http://localhost:8089');//8089是vue項(xiàng)目的端口，這里相對(duì)于白名單
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就可以運(yùn)行這個(gè)服務(wù)了。
fetch獲取json數(shù)據(jù)
用語(yǔ)接受請(qǐng)求的服務(wù)器已經(jīng)運(yùn)行起來(lái)了，接下來(lái)就是使用fetch來(lái)發(fā)送請(qǐng)求了，如下代碼段就可以完成請(qǐng)求功能：
fetch( "http://localhost:3000/api/data")
.then(res=>res.json())
.then(data=>console.log(data))
.catch(function (e) {
console.log('oops! error:',e.message)
})
此時(shí)就可以順利獲取想要的json數(shù)據(jù)了
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vuex 使用 v-model 配合 state的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11
Vue2.0 http請(qǐng)求以及l(fā)oading展示實(shí)例
下面小編就為大家分享一篇Vue2.0 http請(qǐng)求以及l(fā)oading展示實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
今天小編就為大家分享一篇vue-cli 3.x 修改dist路徑的方法，具有很好的參考價(jià)值。希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
本文主要介紹了Vue3怎么使用element-plus，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
在Vue.js開(kāi)發(fā)中,我們經(jīng)常需要?jiǎng)?chuàng)建可復(fù)用的組件,這些組件可能會(huì)有自己的樣式規(guī)則,而有時(shí)我們希望父組件能夠影響子組件的樣式,本文將詳細(xì)介紹如何使用v-deep以及一些相關(guān)的最佳實(shí)踐,需要的朋友可以參考下2024-10-10
vue動(dòng)態(tài)綁定組件子父組件多表單驗(yàn)證功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue動(dòng)態(tài)綁定組件子父組件多表單驗(yàn)證功能的實(shí)現(xiàn)代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-05-05
在vue中使用jsonp進(jìn)行跨域請(qǐng)求接口操作
這篇文章主要介紹了在vue中使用jsonp進(jìn)行跨域請(qǐng)求接口操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
Vue使用mind-map實(shí)現(xiàn)在線思維導(dǎo)圖
Vue中的Mind-Map通常是指使用Vue.js這個(gè)前端框架構(gòu)建的思維導(dǎo)圖組件或庫(kù),它可以幫助開(kāi)發(fā)者在Web應(yīng)用中創(chuàng)建動(dòng)態(tài)、交互式的思維導(dǎo)圖,讓用戶可以直觀地組織信息和結(jié)構(gòu)化數(shù)據(jù),本文介紹了Vue使用mind-map實(shí)現(xiàn)在線思維導(dǎo)圖,需要的朋友可以參考下2024-07-07
vue3選項(xiàng)式api如何監(jiān)控?cái)?shù)組變化
這篇文章主要介紹了vue3選項(xiàng)式api如何監(jiān)控?cái)?shù)組變化問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要介紹了vue鼠標(biāo)懸停事件，本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-04-04