vue利用axios來完成數(shù)據(jù)的交互

更新時間：2018年03月23日 09:07:02 作者：lily2016n

這篇文章主要介紹了vue利用axios來完成數(shù)據(jù)的交互,本文通過實例代碼給大家講解數(shù)據(jù)交互方法及安裝方法,需要的朋友可以參考下

axios基于 Promise 的 HTTP 請求客戶端，可同時在瀏覽器和 node.js 中使用

現(xiàn)在Vue官方推薦的網(wǎng)絡通信庫不再是vue-resource了，推薦使用axios。所以學習了下，總結如下。

一、功能特性

1、在瀏覽器中發(fā)送 XMLHttpRequests 請求
2、在 node.js 中發(fā)送 http請求
3、支持 Promise API
4、攔截請求和響應
5、轉換請求和響應數(shù)據(jù)
6、自動轉換 JSON 數(shù)據(jù)
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

四、請求實例

點擊獲取數(shù)據(jù)可以取到想要的數(shù)據(jù)

<template>
 <div class="tabbar">
  <p>首頁</p>
  <button v-on:click = 'goback'>獲取數(shù)據(jù)</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的數(shù)據(jù)賦給 item: []中
     console.log(res.data.data.item);
     if (res.data.code == '0') {
      console.log('haha');
     }else{
      alert('數(shù)據(jù)不存在');
     }
    })
    .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>

效果圖：