vue實戰使用ajax請求後臺數據（小白）

vue實戰使用ajax請求後臺數據（小白）

前言：前端小白入門到這個階段，應該會知道咱們所作的頁面上那些數據，絕大部分都不是靜態的數據，而是經過調用後臺接口把數據渲染到頁面上的效果。ajax能夠幫助咱們更好的去實現這一點，下面是詳解在vue中如何使用它。

vue自己它是不支持直接發送ajax請求的，須要用到axios（一個基於promise的HTTP庫，能夠用在瀏覽器和node.js中）這是Axios文檔的介紹，詳細可查看：https://www.kancloud.cn/yunye/axios/234845

第一步：Axios的安裝和引入

1.使用npm安裝：

$npm install axios -S　

2.在vue項目公共文件（我這裏是main.js文件）中引入：

import axios from "axios";

3.可是呢axios跟不少第三方模塊不一樣的一點是它不能直接使用use方法，而是用下面這種方法：

Vue.prototype.$axios = axios;

4.這樣呢在methods裏用到的時候直接用this.$axios來調用它：

this.$axios.get(接口地址).then(function(respon){}).catch(function(error){})

　　

 

第二步：axios.get（此次先講get的實例，下一篇寫用axios.post顯現登陸功能）

1.經過params選項來傳遞參數的格式是 axios.get('url',{params:{key:value}}).then() ；

2.本次實例的axios請求後臺數據代碼：

//右邊學員動態
        getbuyer: function () {
          this.$axios.get(this.GLOBAL.host+"/pub/api/v1/web/list_buyer",{
            params:{
              video_id:this.$route.query.video_id
            }
          }).then(res=>{
            var result = res.data;
            if (result.code == 0) {
              this.buyerArr = result.data;
            }
          })
        }

解析：

1）this.GLOBAL.host: 因爲一個項目中會有不少次ajax請求，咱們能夠把域名封裝在一個單獨的模塊中，而後用到的時候直接調用，操做代碼以下：

首先：在main.js全局文件中import咱們的封裝模塊global：

import Global from '../static/config/global'

而後：將上面的Global掛載到Vue.prototype：

Vue.prototype.GLOBAL = Global;

其次：host是在global.js模塊中封裝的域名：

const host = 'http://api.xdclass.net:8081';

最後：在每次axios請求的時候，直接 this.GLOBAL.host+"後臺接口地址"這樣就能夠了

2）params裏面是請求接口時的參數，能夠一個也能夠多個，用「，」隔開；

3）我這個參數寫法 this.$route.query.video_id ，意思是獲取到當前頁面地址欄中url參數名爲video_id的參數值；

4）.then中就是請求接口成功後要作的事情，res是responce的簡寫，就是成功後後臺給咱們返回的對象，數據就在這個對象裏面；

5）this.buyerArr 是定義在data中的一個空數組，用來接收後臺返回的數據

最後：一個簡單的axios請求實例就寫完了，在這裏給新手們推薦一款軟件Postman用來模擬請求後臺數據,很是簡單易用，也能更好的觀察接口數據；下面是個人一個例子

 

　　這個例子就這麼多，下次就寫post作登陸的例子，你們也能夠一塊兒來：854討論656前端的221各類問題和bug，一塊兒學習一塊兒進步；