vue之axios通信

vue之axios通信

1. 安装：npm install --save axios
2. 引入注册：

import Axios from 'axios'
Vue.prototype.axios = Axios  //注册使用axios模块

3. home中通信

      <div id="app-5">
      <h2> Home Page </h2>
      <el-button type="primary" @click="textAxios()">测试axios调用</el-button>
      </div>
  <script>
    import axios from 'axios'
    
    export default {
    
     data() { return { }; },       
     methods: {
        textAxios(){
             axios.get('http://xxxxxxxxx').then(res => { alert(res.data)})
                   },
             }
     }
  </script>

4. get方法解释
   其中get()和post()分别表示不同的请求方法。get请求有两种方式传递参数。
   then()方法内有一个参数表示响应成功的回调函数。
   catch()方法内有一个参数表示响应失败的回调函数。

5. 对res的理解

   res这个参数可以理解为一个Object。 res.data指服务器返回的内容。res参数还有其他的属性，比如statusCode（指开发者服务器返回的 HTTP 状态码），还有header（指开发者服务器返回的 HTTP Response Header）。
   JQuery ajax中的success:function(data)也类似，只不过这里的data直接就指的是服务器返回的内容。

6. 对alert理解
   弹出警示框，如下：

<button class="button1" onclick="alert('run!')">点击我</button>