vue利用axios來完成數據的交互

2019-11-19 14:06:59

字體：大中小

來源：轉載

供稿：網友

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>

效果圖：