vue使用axios,進行網絡請求

1.首先自己創建一個組件:

https://www.cnblogs.com/fps2tao/p/9559291.html

 

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組件中,最后展示

 

 

相關閱讀: https://www.cnblogs.com/xuanan/p/7847233.html

 參考:https://blog.csdn.net/it_cgq/article/details/78781422

參考:https://blog.csdn.net/sps900608/article/details/79599121

 

可以把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);
        });

      }