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

caozhijian 发布于2019-08-21 16:58 / 3593人阅读

摘要：自己在做个小的时候，想模拟从服务器获取数据的过程，一开始的想法是使用直接获取本地的文件，无论是了还是把文件放在的目录下或里的目录下，但是一直报找不到文件。

自己在做个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数据了

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88966.html

谈谈前端异常捕获与上报

摘要：另外这样的异常捕获不能捕获的异常错误信息，这点需要注意。最终大致的流程图如下结语前端异常捕获与上报是前端异常监控的前提，了解并做好了异常数据的收集和分析才能实现一个完善的错误响应和处理机制，最终达成数据可视化。关于微信公众号：前端呼啦圈（Love-FED）我的博客：劳卜的博客知乎专栏：前端呼啦圈前言 Hello，大家好，又与大家见面了，这次给大家分享下前端异常监控中需...

Kosmos 2019-08-22 15:44 评论0 收藏0
急速JavaScript全栈教程

摘要：使用访问后端服务使用的美化组件的方法整合全栈服务其中的指的是。所幸是在这个教程内，你不需要学习太多就可以把案例跑起来。另外一个组件负责显示全部项目，并接受删除事件，删除指定的项目。它们分别是组件和组件这两个组件的代码实现，分别在文件和内。自从一年前发布了Vuejs小书的电子书，也有些日子没有碰过它们了，现在因为项目的缘故，需要使用JavaScript全栈开发。所以，我得把这个全栈环境...

xingqiba 2019-06-26 17:46 评论0 收藏0
急速JavaScript全栈教程

摘要：使用访问后端服务使用的美化组件的方法整合全栈服务其中的指的是。所幸是在这个教程内，你不需要学习太多就可以把案例跑起来。另外一个组件负责显示全部项目，并接受删除事件，删除指定的项目。它们分别是组件和组件这两个组件的代码实现，分别在文件和内。自从一年前发布了Vuejs小书的电子书，也有些日子没有碰过它们了，现在因为项目的缘故，需要使用JavaScript全栈开发。所以，我得把这个全栈环境...

骞讳护 2019-08-26 12:18 评论0 收藏0
vue + vuex + koa2开发环境搭建及示例开发

摘要：开发既是一个练习如何在开发环境中写代码的过程，反过来，也是一个验证环境搭建的对不对好不好用的过程。前端调用后端接口示例为突出重点，排除干扰，方便理解。写在前面这篇文章的主要目的是学会使用koa框架搭建web服务，从而提供一些后端接口，供前端调用。搭建这个环境的目的是：前端工程师在跟后台工程师商定了接口但还未联调之前，涉及到向后端请求数据的功能能够走前端工程师自己搭建的http路径...

xioqua 2019-08-22 13:56 评论0 收藏0
VueCli3.0中集成MockApi

摘要：缺点需要增加本地的代码量，以及需要配置实现拦截优点数据通过会更丰富。缺点修改内容沟通成本高，跟后端扯皮利用去模拟优点可控内容以及实现动态。三本地周边知识本地的思想就是利用完成。注意接口的和自己的接口不要冲突。 VueCli3.0中集成MockApi 一：使用场景哎哟，好烦啊，这个需求还么结束就来下一个需求，程序员不要排期的吗？没办法啊，资本主义的XX嘴脸啊来吧，技术评审我俩把接口...

刘玉平 2019-08-26 13:59 评论0 收藏0