详细解释在vue中使用快速获取来获取本地json文件

在制作vue演示时，我想模拟从服务器获取json数据的过程。我最初的想法是使用fetch直接获取本地json文件，无论是安装json-loader还是将json文件放在index.html的目录或者webpck.config.js中的输出目录，但是fetch总是报告找不到文件。然后决定通过fetch向express服务器发送请求，服务器返回json数据。

快速服务器

首先，编写一个只有一个接口的简单的express服务器，这将作为一个例子。Back.js如下：

var express=require(' express ')var app=express()；varallowcrossdomain=function(req，res，next){//设置响应头的中间件RES . header(' access-control-allow-origin '，' http://localhost 33608089 ')；//8089是vue项目的端口，相对于白名单RES . header(' access-control-allow-methods '，' get，put，post，delete ')；res.header('访问控制-允许-头'，'内容类型')；res.header('访问控制-允许-凭证'，' true ')；next()；};app . use(allowCrossDomain)；app.get('/api/data '，函数(请求，响应){var data=require('。/grid . JSON’)；//json文件获取response.send(数据)；})app.listen('3000 '，function () {console.log('监听3000 ')})；然后使用命令节点back.js运行服务。

Fetch获取json数据

接受请求的服务器已经运行，下一步是使用fetch发送请求。以下代码段可以完成请求功能：

fetch(' http://localhost :3000/API/data ')。然后(res=res.json())。然后(数据=console.log(数据))。catch(function (e) {console.log('哎呀！Error: '，e.message)})此时，您可以成功获取所需的json数据

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。