vue中使用express+fetch獲取本地json文件

caozhijian 發(fā)布于2019-08-21 16:58 / 3663人閱讀

摘要：自己在做個(gè)小的時(shí)候，想模擬從服務(wù)器獲取數(shù)據(jù)的過(guò)程，一開(kāi)始的想法是使用直接獲取本地的文件，無(wú)論是了還是把文件放在的目錄下或里的目錄下，但是一直報(bào)找不到文件。

自己在做個(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)目的端口，這里相當(dāng)于白名單
  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ù)了

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/88966.html

相關(guān)文章

談?wù)勄岸水惓２东@與上報(bào)

摘要：另外這樣的異常捕獲不能捕獲的異常錯(cuò)誤信息，這點(diǎn)需要注意。最終大致的流程圖如下結(jié)語(yǔ)前端異常捕獲與上報(bào)是前端異常監(jiān)控的前提，了解并做好了異常數(shù)據(jù)的收集和分析才能實(shí)現(xiàn)一個(gè)完善的錯(cuò)誤響應(yīng)和處理機(jī)制，最終達(dá)成數(shù)據(jù)可視化。關(guān)于微信公眾號(hào)：前端呼啦圈（Love-FED）我的博客：勞卜的博客知乎專(zhuān)欄：前端呼啦圈前言 Hello，大家好，又與大家見(jiàn)面了，這次給大家分享下前端異常監(jiān)控中需...

Kosmos 2019-08-22 15:44 評(píng)論0 收藏0
急速JavaScript全棧教程

摘要：使用訪問(wèn)后端服務(wù)使用的美化組件的方法整合全棧服務(wù)其中的指的是。所幸是在這個(gè)教程內(nèi)，你不需要學(xué)習(xí)太多就可以把案例跑起來(lái)。另外一個(gè)組件負(fù)責(zé)顯示全部項(xiàng)目，并接受刪除事件，刪除指定的項(xiàng)目。它們分別是組件和組件這兩個(gè)組件的代碼實(shí)現(xiàn)，分別在文件和內(nèi)。自從一年前發(fā)布了Vuejs小書(shū)的電子書(shū)，也有些日子沒(méi)有碰過(guò)它們了，現(xiàn)在因?yàn)轫?xiàng)目的緣故，需要使用JavaScript全棧開(kāi)發(fā)。所以，我得把這個(gè)全棧環(huán)境...

xingqiba 2019-06-26 17:46 評(píng)論0 收藏0
急速JavaScript全棧教程

摘要：使用訪問(wèn)后端服務(wù)使用的美化組件的方法整合全棧服務(wù)其中的指的是。所幸是在這個(gè)教程內(nèi)，你不需要學(xué)習(xí)太多就可以把案例跑起來(lái)。另外一個(gè)組件負(fù)責(zé)顯示全部項(xiàng)目，并接受刪除事件，刪除指定的項(xiàng)目。它們分別是組件和組件這兩個(gè)組件的代碼實(shí)現(xiàn)，分別在文件和內(nèi)。自從一年前發(fā)布了Vuejs小書(shū)的電子書(shū)，也有些日子沒(méi)有碰過(guò)它們了，現(xiàn)在因?yàn)轫?xiàng)目的緣故，需要使用JavaScript全棧開(kāi)發(fā)。所以，我得把這個(gè)全棧環(huán)境...

騫諱護(hù) 2019-08-26 12:18 評(píng)論0 收藏0
vue + vuex + koa2開(kāi)發(fā)環(huán)境搭建及示例開(kāi)發(fā)

摘要：開(kāi)發(fā)既是一個(gè)練習(xí)如何在開(kāi)發(fā)環(huán)境中寫(xiě)代碼的過(guò)程，反過(guò)來(lái)，也是一個(gè)驗(yàn)證環(huán)境搭建的對(duì)不對(duì)好不好用的過(guò)程。前端調(diào)用后端接口示例為突出重點(diǎn)，排除干擾，方便理解。寫(xiě)在前面這篇文章的主要目的是學(xué)會(huì)使用koa框架搭建web服務(wù)，從而提供一些后端接口，供前端調(diào)用。搭建這個(gè)環(huán)境的目的是：前端工程師在跟后臺(tái)工程師商定了接口但還未聯(lián)調(diào)之前，涉及到向后端請(qǐng)求數(shù)據(jù)的功能能夠走前端工程師自己搭建的http路徑...

xioqua 2019-08-22 13:56 評(píng)論0 收藏0
VueCli3.0中集成MockApi

摘要：缺點(diǎn)需要增加本地的代碼量，以及需要配置實(shí)現(xiàn)攔截優(yōu)點(diǎn)數(shù)據(jù)通過(guò)會(huì)更豐富。缺點(diǎn)修改內(nèi)容溝通成本高，跟后端扯皮利用去模擬優(yōu)點(diǎn)可控內(nèi)容以及實(shí)現(xiàn)動(dòng)態(tài)。三本地周邊知識(shí)本地的思想就是利用完成。注意接口的和自己的接口不要沖突。 VueCli3.0中集成MockApi 一：使用場(chǎng)景哎喲，好煩啊，這個(gè)需求還么結(jié)束就來(lái)下一個(gè)需求，程序員不要排期的嗎？沒(méi)辦法啊，資本主義的XX嘴臉啊來(lái)吧，技術(shù)評(píng)審我倆把接口...

劉玉平 2019-08-26 13:59 評(píng)論0 收藏0