详解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 相关文章推荐
根据分辨率不同,调用不同的css文件
Jul 07 Javascript
农历与西历对照
Sep 06 Javascript
javascript入门基础之私有变量
Feb 23 Javascript
关于js获取radio和select的属性并控制的代码
May 12 Javascript
JS获取页面窗口大小的代码解读
Dec 01 Javascript
表单元素的submit()方法和onsubmit事件应用概述
Feb 01 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
May 27 Javascript
vue-cli构建vue项目的步骤详解
Jan 27 Javascript
Vue Components 数字键盘的实现
Sep 18 Javascript
Vue组件通信中非父子组件传值知识点总结
Dec 05 Javascript
vue+element实现图片上传及裁剪功能
Jun 29 Javascript
react antd表格中渲染一张或多张图片的实例
Oct 28 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中exec与system用法区别分析
2014/09/22 PHP
如何解决PHP使用mysql_query查询超大结果集超内存问题
2016/03/14 PHP
php similar_text()函数的定义和用法
2016/05/12 PHP
PHP实现JS中escape与unescape的方法
2016/07/11 PHP
jQuery Autocomplete自动完成插件
2010/07/17 Javascript
javascript 实现 原路返回
2015/01/21 Javascript
javascript实现文字无缝滚动效果
2017/08/26 Javascript
nodejs实现OAuth2.0授权服务认证
2017/12/27 NodeJs
vue拖拽组件使用方法详解
2018/12/01 Javascript
ng-zorro-antd 入门初体验
2018/12/03 Javascript
js布局实现单选按钮控件
2020/01/17 Javascript
Nodejs在局域网配置https访问的实现方法
2020/10/17 NodeJs
[04:19]DOTA2完美大师赛第四天精彩集锦
2017/11/26 DOTA
python中使用正则表达式的连接符示例代码
2017/10/10 Python
CentOS 7下安装Python3.6 及遇到的问题小结
2018/11/08 Python
django orm 通过related_name反向查询的方法
2018/12/15 Python
Python设计模式之适配器模式原理与用法详解
2019/01/15 Python
详解Python数据分析--Pandas知识点
2019/03/23 Python
python3.6下Numpy库下载与安装图文教程
2019/04/02 Python
实例详解Matlab 与 Python 的区别
2019/04/26 Python
python从zip中删除指定后缀文件(推荐)
2019/12/05 Python
python读写Excel表格的实例代码(简单实用)
2019/12/19 Python
tensorflow 重置/清除计算图的实现
2020/01/19 Python
Python类的绑定方法和非绑定方法实例解析
2020/03/04 Python
Python实现从N个数中找到最大的K个数
2020/04/02 Python
Python可视化工具如何实现动态图表
2020/10/23 Python
Autopep8的使用(python自动编排工具)
2021/03/02 Python
浅析HTML5 Landmark
2020/09/11 HTML / CSS
全球速卖通法国在线交易平台:AliExpress法国
2017/07/07 全球购物
H&M旗下高端女装品牌:& Other Stories
2018/05/07 全球购物
极度干燥澳大利亚官方网站:Superdry澳大利亚
2019/03/28 全球购物
2019年c语言经典面试题目
2016/08/17 面试题
小区的门卫岗位职责
2014/10/01 职场文书
2015年工商局个人工作总结
2015/07/23 职场文书
爱国主题班会教案
2015/08/14 职场文书
护理培训心得体会
2016/01/22 职场文书