vue-resource 獲取本地json數(shù)據(jù)404

在使用vue-cli搭建的vue項(xiàng)目中，使用vue-resource請求本地的json格式數(shù)據(jù)，來模仿服務(wù)端返回?cái)?shù)據(jù)流程，但是請求不到j(luò)son數(shù)據(jù)，返回404。

在網(wǎng)上查詢了大量資料，大都是以前的版本，在build的dev-server.js中進(jìn)行修改。但是最新的版本已經(jīng)廢除了dev-sever.js文件。

VUE開發(fā)請求本地?cái)?shù)據(jù)的配置，早期的vue-cli下面有dev-server.js和dev-client.js兩文件，請求本地?cái)?shù)據(jù)在dev-server.js里配置，最新的vue-webpack-template 中已經(jīng)去掉了dev-server.js和dev-client.js 改用webpack.dev.conf.js代替，所以 配置本地訪問在webpack.dev.conf.js里配置。

但是以上步驟非常麻煩且有很多坑。

解決vue-resource使用本地json模擬服務(wù)端數(shù)據(jù)請求問題： vue-resource 的安裝：

cnpm install vue-resource --save

在main.js中導(dǎo)入并使用

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

模擬后臺數(shù)據(jù)的json文件必須放在static目錄下，其他目錄不能訪問

讀取數(shù)據(jù)

調(diào)用成功之后返回?cái)?shù)據(jù)

什么是vue-resource？

vue-resource是Vue.js的一款插件，它可以通過XMLHttpRequest或JSONP發(fā)起請求并處理響應(yīng)，也就是說，jQuery中ajax能做的事情，vue-resource插件一樣也能做到，而且vue-resource的API更為簡潔。

此外，vue-resource還提供了非常有用的inteceptor功能，使用inteceptor可以在請求前和請求后附加一些行為，比如使用inteceptor在ajax請求時(shí)顯示loading界面。

vue-resource是不是已經(jīng)不那么陌生了，接下來我們就來看看vue-resouce的具體使用方法：

// 因?yàn)関ue-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); 
// 基于某個(gè)Vue實(shí)例使用 var vm = new Vue(); vm.$http.get('/someUrl', [options]).then(successCallback, errorCallback); vm.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

可以看到，在發(fā)出請求以后，會有一個(gè)then對callback進(jìn)行處理，看到then我們就會想到ES6里面的promise函數(shù)，這里確實(shí)是在promise的基礎(chǔ)上進(jìn)行封裝的。為了方便，我們可以在回調(diào)函數(shù)中使用箭

頭函數(shù)，示例如下：

Vue.http.get('/someUrl', [options]).then((response) => {
? // 成功回調(diào)函數(shù)
}).catch((error) => {
? ?// 錯(cuò)誤回調(diào)函數(shù)，會在整個(gè)請求過程中監(jiān)聽錯(cuò)誤
})

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屬性，發(fā)送請求時(shí)的options選項(xiàng)對象包含以下屬性：

response對象包含以下屬性：

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評論