详解vue中使用express+fetch获取本地json文件


Posted in Javascript onOctober 10, 2017

自己在做个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文件

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 插件实现图片延迟加载效果代码
Feb 06 Javascript
js+JQuery返回顶部功能如何实现
Dec 03 Javascript
解析JavaScript中delete操作符不能删除的对象
Dec 03 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
Feb 19 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
May 19 Javascript
详解AngularJS中的表格使用
Jun 16 Javascript
Vue.js基础知识小结
Jan 13 Javascript
js实现简单的二级联动效果
Mar 09 Javascript
vue实现文章内容过长点击阅读全文功能的实例
Dec 28 Javascript
js判断一个对象是数组(函数)的方法实例
Dec 19 Javascript
Vue是怎么渲染template内的标签内容的
Jun 05 Javascript
微信小程序选择图片控件
Jan 19 Javascript
vue router自动判断左右翻页转场动画效果
Oct 10 #Javascript
angular2 ng2 @input和@output理解及示例
Oct 10 #Javascript
ionic选择多张图片上传的示例代码
Oct 10 #Javascript
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
Oct 10 #Javascript
防止页面url缓存中ajax中post请求的处理方法
Oct 10 #Javascript
Vue实现数字输入框中分割手机号码的示例
Oct 10 #Javascript
JS判断数组那点事
Oct 10 #Javascript
You might like
Apache, PHP在Windows 9x/NT下的安装与配置 (一)
2006/10/09 PHP
高性能Javascript笔记 数据的存储与访问性能优化
2012/08/02 Javascript
JavaScript表达式:URL 协议介绍
2013/03/10 Javascript
JS判断数组中是否有重复值得三种实用方法
2013/08/16 Javascript
Query中click(),bind(),live(),delegate()的区别
2013/11/19 Javascript
js实现弹窗插件功能实例代码分享
2013/12/12 Javascript
SelecT下拉框选中和取值的解决方法
2016/11/22 Javascript
nodejs超出最大的调用栈错误问题
2017/12/27 NodeJs
使用npm安装最新版本nodejs
2018/01/18 NodeJs
详解vue项目打包后通过百度的BAE发布到网上的流程
2018/03/05 Javascript
深入理解js 中async 函数的含义和用法
2018/05/13 Javascript
[46:20]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
[01:07:46]完美世界DOTA2联赛循环赛 Magma vs IO BO2第二场 11.01
2020/11/02 DOTA
python获取beautifulphoto随机某图片代码实例
2013/12/18 Python
python的exec、eval使用分析
2017/12/11 Python
Python3.6安装及引入Requests库的实现方法
2018/01/24 Python
Python 窗体(tkinter)按钮 位置实例
2019/06/13 Python
Python程序打包工具py2exe和PyInstaller详解
2019/06/28 Python
Python 如何提高元组的可读性
2019/08/26 Python
python多线程扫描端口(线程池)
2019/09/04 Python
pyhton中__pycache__文件夹的产生与作用详解
2019/11/24 Python
关于Pytorch的MNIST数据集的预处理详解
2020/01/10 Python
英国皇室御用百货:福南梅森(Fortnum & Mason)
2017/12/03 全球购物
美国电子元器件分销商:Newark element14
2018/01/13 全球购物
德国购买门票网站:ADticket.de
2019/10/31 全球购物
数百万免费的图形资源:Freepik
2020/09/21 全球购物
什么是典型的软件三层结构?软件设计为什么要分层?软件分层有什么好处?
2012/03/14 面试题
某公司C#程序员面试题笔试题
2014/05/26 面试题
会计专业大学生职业生涯规划范文
2014/01/11 职场文书
幼儿园家长工作总结2015
2015/04/25 职场文书
幼儿园重阳节活动总结
2015/05/05 职场文书
诚信教育主题班会
2015/08/13 职场文书
2016年教代会开幕词
2016/03/04 职场文书
怎么禁用Windows 11快照布局? win11不使用快照布局的技巧
2021/11/21 数码科技
vue使用echarts实现折线图
2022/03/21 Vue.js
Go 内联优化让程序员爱不释手
2022/06/21 Golang