vue使用axios,进行网络请求

 

2.安装:axios(可以npm安装,也可以下载js引入文件)

npm install -g vue-cli

 

npm install axios -S

 

-D 等价于 --save-dev
-S 等价于 --save

 

3.在组件(Hi)中引入axios,并使用axios进行请求 [get请求不同域,有跨域提示]

<template>
    <div>Hi~~{{msg}}--{{data}}
        <button @click="send">发送AJAX请求</button>
    </div>
</template>

<script>
  import axios from 'axios'
  export default {

    name: "Hi",
    data:function(){
      return {
        msg:'wo 返回的值',
        data:'时间'
      }
    },
    methods:{

      send(){
        axios({
          method:'get',
          url:'http://jsonplaceholder.typicode.com/users'
        }).then(function(resp){
          console.log(resp.data);
        }).catch(resp => {
          console.log('请求失败：'+resp.status+','+resp.statusText);
      });
      }
    }


  }
</script>

<style scoped>

</style>

 

4.Hi组件引入都App组件中,最后展示

 

 

可以把axios设置一个全局变量,然后再调用

　　在main.js里面写

import axios from 'axios'   // 1、在这里引入axios

Vue.prototype.$axios = axios;   // 2、在vue中使用axios

然后再组件的methods里面写事件直接使用:

post1:function(){
        this.$axios.get('http://jsonplaceholder.typicode.com/users').then(function (response) {
          console.log(response);
        });

      }