vue 使用axios請求接口數據

一、首先下載安裝axios 

npm install --save axios

二、在項目main.js裏 引入下面代碼

import axios from 'axios'
Vue.prototype.$http = axios

三、在須要用到axos的組件<script>標籤中引入以下代碼

import axios from 'axios'

四、組件methods中定義function 

methods: {
    getdata: function() {
        var url = "https://cnodejs.org/api/v1/topics";
        // 發送請求:將數據返回到一個回到函數中
        var that = this;
            // 而且響應成功之後會執行then方法中的回調函數
        axios.get(url).then(function(result) {
            // result是全部的返回回來的數據
            // 包括了響應報文行
            // 響應報文頭
            // 響應報文體
            console.log(result.data.data);
            that.goodlist = result.data.data;

        });
    }
}

五、在組件HTML中設置@click事件  getdata  （點擊後請求數據）

六、將獲取的數據在頁面渲染