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，一起學習一起進步；

 　  版權聲明：本文為博主原創文章，未經博主允許不得轉載。 https://www.cnblogs.com/nbb-hbb/