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选项对象包含以下属性:
url | string | 请求的URL |
method | string | 请求的HTTP方法,例如:'GET', 'POST'或其他HTTP方法 |
body | Object, FormData string | request body |
params | Object | 请求的URL参数对象 |
headers | Object | request header |
timeout | number | 单位为毫秒的请求超时时间 (0 表示无超时时间) |
before | function(request) | 请求发送前的处理函数,类似于jQuery的beforeSend函数 |
progress | function(event) | ProgressEvent回调处理函数 |
credentials | boolean | 表示跨域请求时是否需要使用凭证 |
emulateHTTP | boolean | 发送PUT, PATCH, DELETE请求时以HTTP POST的方式发送,并设置请求头的X-HTTP-Method-Override |
emulateJSON | boolean | 将request body以application/x-www-form-urlencoded content type发送(表单形式发送) |
response对象包含以下属性:
text() | string | 以string形式返回response body |
json() | Object | 以JSON对象形式返回response body |
blob() | Blob | 以二进制形式返回response body |
属性 | 类型 | 描述 |
ok | boolean | 响应的HTTP状态码在200~299之间时,该属性为true |
status | number | 响应的HTTP状态码 |
statusText | string | 响应的状态文本 |
headers | Object | 响应头 |
以上为个人经验,希望能给大家一个参考,也希望大家多多支持软件开发网。