axios 基本運用

axios是專門對ajax請求進行封裝的一個插件，其返回一個promise對象，用法跟ES6的promise很類似

1、安裝axios插件
npm install axios

2、引入axios插件

在main.js中引入，以下：

import axios from 'axios'

Vue.prototype.$http = axios; // 經過原型鏈的方式這樣就能夠在任何組件下調用axios

3、在代碼中執行請求,沒有配置請求方式時默認爲GET請求

（1）執行GET請求

this.$http.get("https://www.ehometd.com/temporary/api/other/all.php?fc=bianlifile&FID=459&Class=3", {
        params: {
          ID: 459
        }
      })
      .then(response => {
        this.nowImg = response.data.Sub[460].File[0].ImgUrl; // 初始默認爲第一個系列的第一張圖片
        this.goods_name = response.data.Sub[460].File[0].Name;
        this.goods_style = response.data.Sub[460].File[0].Desc;
      })
      .catch(function(error) {
        console.log(error);
      });
    }

（2）執行POST請求

this.$http.post("https://www.ehometd.com/temporary/api/other/all.php?fc=bianlifile&FID=459&Class=3", {
        params: {
          ID: 459
        }
      })
      .then(response => {
        this.nowImg = response.data.Sub[460].File[0].ImgUrl; // 初始默認爲第一個系列的第一張圖片
        this.goods_name = response.data.Sub[460].File[0].Name;
        this.goods_style = response.data.Sub[460].File[0].Desc;
      })
      .catch(function(error) {
        console.log(error);
      });
    }

 

若是報錯：ReferenceError: $http is not defined"

須要安裝vue-resource插件，而後在main.js中引入：

import vueResource from 'vue-resource';
Vue.use(vueResource);

4、執行多個併發請求（同時執行多個請求語句）

function getUserAccount() {
　　return axios.get('/user/1244');
}

function getUserPromise() {
　　return axios.get('/user/666/promise');
}

axios.all([getUserAccount(), getUserPromise()]).then(axios.spread(function(acct, perms){ 　　// 兩個請求都完成時才走到這裏來，跟ES6的Promise.all()同樣的原理}));