详解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 相关文章推荐
表单的焦点顺序tabindex和对应enter键提交
Jan 04 Javascript
MyEclipse取消验证Js的两种方法
Nov 14 Javascript
node.js中的fs.lchmod方法使用说明
Dec 16 Javascript
Jquery树插件zTree实现菜单树
Jan 24 Javascript
深究AngularJS中$sce的使用
Jun 12 Javascript
vue最简单的前后端交互示例详解
Oct 11 Javascript
详解javascript函数写法大全
Mar 25 Javascript
浅谈vue.use()方法从源码到使用
May 12 Javascript
微信小程序与webview交互实现支付功能
Jun 07 Javascript
js验证密码强度解析
Mar 18 Javascript
vue.js实现h5机器人聊天(测试版)
Jul 16 Javascript
从源码角度来回答keep-alive组件的缓存原理
Jan 18 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
有关php运算符的知识大全
2011/11/03 PHP
PHP过滤黑名单关键字的方法
2014/12/01 PHP
PHP的Yii框架中移除组件所绑定的行为的方法
2016/03/18 PHP
php微信开发之谷歌测距
2018/06/14 PHP
在JavaScript中使用inline函数的问题
2007/03/08 Javascript
javascript同步Import,同步调用外部js的方法
2008/07/08 Javascript
JS 文字符串转换unicode编码函数
2009/05/30 Javascript
Document 对象的常用方法
2009/07/31 Javascript
容易造成JavaScript内存泄露几个方面
2014/09/04 Javascript
JS打开新窗口防止被浏览器阻止的方法
2015/01/03 Javascript
jquery搜索框效果实现方法
2015/01/16 Javascript
jQuery实现模拟marquee标签效果
2015/07/14 Javascript
基于jQuery实现点击列表加载更多效果
2016/05/31 Javascript
bootstrap datetimepicker实现秒钟选择下拉框
2017/01/05 Javascript
Vue.js 60分钟快速入门教程
2017/03/28 Javascript
jQuery Jsonp跨域模拟搜索引擎
2017/06/17 jQuery
vue中路由参数传递可能会遇到的坑
2017/12/07 Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
2020/08/31 Javascript
[33:15]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VP VS Mineski
2018/03/31 DOTA
[01:36:19]Secret vs NB 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[52:52]完美世界DOTA2联赛PWL S3 LBZS vs access 第一场 12.10
2020/12/13 DOTA
Python使用scrapy采集数据过程中放回下载过大页面的方法
2015/04/08 Python
Python实现全角半角字符互转的方法
2016/11/28 Python
pandas.DataFrame选取/排除特定行的方法
2018/07/03 Python
Python 占位符的使用方法详解
2019/07/10 Python
浅谈pycharm使用及设置方法
2019/09/09 Python
pytorch方法测试——激活函数(ReLU)详解
2020/01/15 Python
Python小白学习爬虫常用请求报头
2020/06/03 Python
Tahari ASL官方网站:高级设计师女装
2021/03/15 全球购物
中专毕业自我鉴定
2013/10/16 职场文书
卫生院健康教育实施方案
2014/06/07 职场文书
2014年全国爱牙日宣传活动方案
2014/09/21 职场文书
事业单位人员的自我评价范文
2014/09/21 职场文书
硕士论文致谢范文
2015/05/14 职场文书
Nginx配置https的实现
2021/11/27 Servers
Anaconda安装pytorch和paddle的方法步骤
2022/04/03 Python