vue中ajax請求與axios包完美處理

這次帶給大家vue中ajax請求與axios包完美處理，vue中ajax請求與axios包處理的注意事項有哪些，下面就是實戰案例，一起來看一下。

在vue中，常常會用到資料請求，常用的有：vue-resourse、axios

今天我說的是axios的post請求

github原始檔及文件位址：【https://github.com/axios/axios】

首先，引入axios

CDN: <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
npm: npm install axios   并在全局的js中引入：import axios from 'axios';

•get請求

axios.get('/user?ID=12345')
 .then(function (response) {
  console.log(response);
 })
 .catch(function (error) {
  console.log(error);
 });

•post請求

 依赖于qs包，将对象转换成以&连接的字符串
//例：
axios.post( postUrl ,qs.stringify({userid:1,username:'yyy'})).then(function (response) {
  console.log(response);
})

附錄：設定axios

上面封裝的方法中，使用了axios 的三個配置項，實際上只有url 是必須的，完整的api 可以參考使用說明

為了方便，axios 也為每種方法起了別名，例如上面的saveForm 方法等價於：

axios.post('/user', context.state.test02)

完整的請求還應包括.then 和.catch

.then(function(res){
 console.log(res)
})
.catch(function(err){
 console.log(err)
})

當請求成功時，會執行.then，否則執行.catch

這兩個回呼函數都有各自獨立的作用域，如果直接在裡面存取this，無法存取到Vue 實例

這時只要增加一個.bind(this) 就能解決這個問題

.then(function(res){
 console.log(this.data)
}.bind(this))

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

node實作登入時圖片驗證碼功能

vue父元件往父元件內傳遞值步驟詳解

以上是vue中ajax請求與axios包完美處理的詳細內容。更多資訊請關注PHP中文網其他相關文章！