vue的請求數據方式


一,vue-resource請求數據

介紹:vue-resource請求數據方式是官方提供的一個插件

步驟:

1,npm安裝

 

 

 

npm  install vue-resource  --save

或者使用cnpm淘寶鏡像安裝,會快很多。cnpm  install  vue-resource  --save

加--save是為了在package.json中引用,表示在生產環境中使用。因為我們在日常開發中,如果我們要打包代碼給其他人或者上傳到github,又或者要發布代碼時,package.json就是安裝所需要的包。如果只在開發環境中使用,則只需要--save-dev,有一些只在開發環境中用,有一些要在生產環境中用。

2,在main.js入口文件中引入vue-resource

 

 

 

引入之后要使用這個插件

 

 

 

如果不使用此插件的話,會報如下錯誤:

 

 

 

3,在項目中用this.$http.get()等等使用,詳情看 vue-resource  github

實例:

 

 

注意:this.$http.get()等等的各種http請求都是繼承promise的。promise是異步的請求;其次,.then箭頭函數里的this代表的是上下文。根據箭頭函數this的定義,只在函數定義時就已經賦值可知,this,指代的是定義函數的對象,在vue中對象就是methods當前頁面。所以this指導的是data里面的數據。如果想要獲取包裹函數外函數的數據,即閉包的概念。實現方法就是在外層函數加一個var that =  this;將外層的this先儲存到that中。如下實例,同時還解決了跨域的問題:

 

 

 
 

二,axios請求數據

介紹:這是一個第三方的插件  github地址:https://github.com/axios/axios

第一步:npm安裝  npm install axios  -save

 
 

 

第二步:直接調用。和vue-resource的區別是:aixos是每在一個頁面用一次就要在該頁面調用一次。vue-resource是綁定了全局的了。具體使用方法可以看github:

 

 

 

第三步:關於axios的跨域請求

在config->index.js->proxyTable配置如下:target填寫自己想要的地址

 

 

 

如下配置,url為地址后面所帶的參數,配置好后,現在npm run  dev 運行就行。

 

 

 

第四步:關於多個並發請求

 

 

 

上面這個是同一地址的跨域,如果要拿不同地址的跨域,只需要更改config->index.js->proxyTable的配置,增加地址塊就行。

三,關於fetch-jsonp

github地址:https://github.com/camsong/fetch-jsonp

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM