axios 在vue中基本用法

使用 npm:

$ npm install axios

使用 bower:

$ bower install axios

执行 GET 请求

<template>
  <div class="winter">

      <button @click="getUser">点我1</button>
        <div v-for="item in msg">
        <p>{{item.id}}</p>
        <p>{{item.name}}</p>
        <p>{{item.age}}</p>
         </div>
        
 
  </div>
</template>

<script>
import axios from 'axios'
 export default{
  name:'winter',
  data() {
      return{
          msg:''
      }
  },
  methods:{
      
      getUser(){
          
          axios.get("http://localhost:5000/api/values").then((res)=>{
              console.log(this.msg=res.data)
          })
          .catch((res)=>{alert(1)})
      }
      
  
  }
</script>

执行 POST 请求

<template>
  <div class="winter2">
      <button @click="postWq">点我2</button>
        <p>{{msg2.id}}</p>
        <p>{{msg2.name}}</p>
        <p>{{msg2.age}}</p>
  </div>
</template>

<script>
import axios from 'axios'
 export default{
  name:'winter2',
  data() {
      return{
          msg2:''
      }
  },
  methods:{
      postWq () {
      let ws = {'id': 1, 'name': '你好', 'age': 20}
      axios.post('http://localhost:5000/api/values', ws).then(a => {
        console.log(this.msg2 = a.data)
      }).catch((e) => {
        alert(1)
      })
    }
  }
  }
</script>