vue-resource 获取本地json数据404问题的解决

目录

• vue-resource 获取本地json数据404
• 什么是vue-resource？

vue-resource 获取本地json数据404

在使用vue-cli搭建的vue项目中，使用vue-resource请求本地的json格式数据，来模仿服务端返回数据流程，但是请求不到json数据，返回404。

在网上查询了大量资料，大都是以前的版本，在build的dev-server.js中进行修改。但是最新的版本已经废除了dev-sever.js文件。

VUE开发请求本地数据的配置，早期的vue-cli下面有dev-server.js和dev-client.js两文件，请求本地数据在dev-server.js里配置，最新的vue-webpack-template 中已经去掉了dev-server.js和dev-client.js 改用webpack.dev.conf.js代替，所以 配置本地访问在webpack.dev.conf.js里配置。

但是以上步骤非常麻烦且有很多坑。

解决vue-resource使用本地json模拟服务端数据请求问题： vue-resource 的安装：

cnpm install vue-resource --save

在main.js中导入并使用

import vueResource from 'vue-resource';
Vue.use(vueResource);

模拟后台数据的json文件必须放在static目录下，其他目录不能访问

读取数据

调用成功之后返回数据

什么是vue-resource？

vue-resource是Vue.js的一款插件，它可以通过XMLHttpRequest或JSONP发起请求并处理响应，也就是说，jQuery中ajax能做的事情，vue-resource插件一样也能做到，而且vue-resource的API更为简洁。

此外，vue-resource还提供了非常有用的inteceptor功能，使用inteceptor可以在请求前和请求后附加一些行为，比如使用inteceptor在ajax请求时显示loading界面。

vue-resource是不是已经不那么陌生了，接下来我们就来看看vue-resouce的具体使用方法：

// 因为vue-resource依赖于vue.js，所以要先引入vue.js
<script src="js/vue.js"></script>
<script src="js/vue-resource.js"></script>

引入插件以后，我们再来看看它怎么使用：

// 全局引用 Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback); Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback); 
// 基于某个Vue实例使用 var vm = new Vue(); vm.$http.get('/someUrl', [options]).then(successCallback, errorCallback); vm.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

可以看到，在发出请求以后，会有一个then对callback进行处理，看到then我们就会想到ES6里面的promise函数，这里确实是在promise的基础上进行封装的。为了方便，我们可以在回调函数中使用箭

头函数，示例如下：

Vue.http.get('/someUrl', [options]).then((response) => {
  // 成功回调函数
}).catch((error) => {
   // 错误回调函数，会在整个请求过程中监听错误
})

vue-resource总共提供了7种请求API，如下所示：

• get(url, [options])
• head(url, [options])
• delete(url, [options])
• jsonp(url, [options])
• post(url, [body], [options])
• put(url, [body], [options])
• patch(url, [body], [options])

值得注意的是API中的options属性，发送请求时的options选项对象包含以下属性：

参数类型描述urlstring请求的URLmethodstring请求的HTTP方法，例如：'GET', 'POST'或其他HTTP方法bodyObject, FormData stringrequest bodyparamsObject请求的URL参数对象headersObjectrequest headertimeoutnumber单位为毫秒的请求超时时间 (0 表示无超时时间)beforefunction(request)请求发送前的处理函数，类似于jQuery的beforeSend函数progressfunction(event)ProgressEvent回调处理函数credentialsboolean表示跨域请求时是否需要使用凭证emulateHTTPboolean发送PUT, PATCH, DELETE请求时以HTTP POST的方式发送，并设置请求头的X-HTTP-Method-OverrideemulateJSONboolean将request body以application/x-www-form-urlencoded content type发送（表单形式发送）

response对象包含以下属性：

方法类型描述text()string以string形式返回response bodyjson()Object以JSON对象形式返回response bodyblob()Blob以二进制形式返回response body属性类型描述okboolean响应的HTTP状态码在200~299之间时，该属性为truestatusnumber响应的HTTP状态码statusTextstring响应的状态文本headersObject响应头

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。