vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue-resource获取本地json数据404

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

作者:yw00yw

这篇文章主要介绍了vue-resource 获取本地json数据404问题的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

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,如下所示:

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

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

response对象包含以下属性:

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

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文