vue利用axios來完成資料的互動例項及安裝方法

csdn原文連結https://blog.csdn.net/lily2016n/article/details/79654957

axios基於 Promise 的 HTTP 請求客戶端，可同時在瀏覽器和 node.js 中使用 現在Vue官方推薦的網路通訊庫不再是vue-resource了，推薦使用axios。所以學習了下，總結如下。

一、功能特性 1、在瀏覽器中傳送 XMLHttpRequests 請求 2、在 node.js 中傳送 http請求 3、支援 Promise API 4、攔截請求和響應 5、轉換請求和響應資料 6、自動轉換 JSON 資料 7、客戶端支援保護安全免受 XSRF 攻擊 二、axios的安裝方法（官方給了3種方法） 1、npm安裝

$ npm install axios
複製程式碼

2、bower安裝

$ bower install axios
複製程式碼

3、直接使用cdn

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
複製程式碼

三、安裝步驟 這裡我使用npm的方法步驟： ①首先在npm中輸入npm install axios ②在main.js加上配置 import axios from 'axios' Vue.prototype.$http = axios

四、請求例項 點選獲取資料可以取到想要的資料

<template>
  <div class="tabbar">
    <p>首頁</p>
    <button v-on:click = 'goback'>獲取資料</button>
    <div class="new_wrap" v-for="items in item">
      <div class="newcard">
        <div>
           <p>{{items.issuer_nickname}}.</p>
        </div>
        <div>
           {{items.title}}
        </div>
        <div class="pic">
           <img :src="items.cover">
        </div>  
      </div>

      <br>
     </div>
  </div>
</template>
<script>
export default {
  name: 'tabbar',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      item: []
    }
  },
  methods:{
    goback:function(){
      console.log('hah');
      this.$http.get('url') //把url地址換成你的介面地址即可
        .then(res => {
          //this.request.response = res.data
          this.item = res.data.data.item; //把取item的資料賦給 item: []中
          console.log(res.data.data.item);
          if (res.data.code == '0') {
            console.log('haha');
          }else{
            alert('資料不存在');
          }
        })
        .catch(err => {
          alert('請求失敗');
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
*{margin: 0;padding: 0;}
@function torem($px){//$px為需要轉換的字號
    @return $px / 100px * 1rem; //100px為根字型大小
}
ul{
  width: 100%;
  position: absolute;
  bottom: 0;
  li{
    width: torem(187.5px);
    float:left;
    height: torem(98px);
    text-align:center;
    background: #ccc;
    }

}
img{
      width: torem(200px);
      height: torem(200px);
    }

</style>

複製程式碼

效果圖：

參考網址：https://github.com/axios/axios https://segmentfault.com/a/1190000009192118