axios get请求_Vue生命周期和HTTP请求

vue实例的生命周期

Vue 实例对象这一生

1. 什么是生命周期

从 Vue 实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期。

2. 生命周期钩子

就是生命周期事件的别名。

生命周期钩子 = 生命周期函数 = 生命周期事件

3. 主要的生命周期函数

• 创建期间的生命周期函数
• 运行期间的生命周期函数
• 销毁期间的生命周期函数

4. 创建期间的生命周期

• beforeCreate：实例刚在内存中被创建出来，此时还没有初始化好data和methods属性。在这个函数中无法使用data和methods。
• created：实例已经在内存中创建好，此时data和methods已经创建好，但是还没有开始编译模板。在这个函数中可以使用data和methods。
• beforeMount：此时已经在内存中完成了模板的编译，但是还没有挂载到页面中。
• mounted：此时已经将编译好的模板，挂载到了页面指定的容器中显示。

5. 运行期间的生命周期函数

• beforeUpdate：状态更新之前执行此函数，此时data中的状态值是最新的，但是界面上显示的数据还是旧的，因为此时还没有开始重新渲染DOM节点。
• updated：实例更新完毕之后调用此函数，此时data中的状态值和界面上显示的数据，都已经完成了更新，界面已经被重新被渲染。

6. 销毁期间的生命周期函数

• beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
• destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

最后来个官网的生命周期图：

vue-resource 或 axios

两个实现get, post, jsonp请求的第三方库。

vue-resource

1. 进行引用

vue-resource依赖于Vue，所以要先引用vue.js

<script src="./lib/vue-2.4.0.js">script>
<script src="./lib/vue-resource-1.3.4.js">script>

2. 发送get请求

// get 方式获取数据
getInfo() {
  this.$http.get('http://127.0.0.1:8000/api/get_info').then(res => {
    console.log(res.body);
  })
}

3. 发送post请求

post方法接收三个参数：

• 参数1：要请求的URL地址
• 参数2：要发送的数据对象
• 参数3：指定post提交的编码类型为 application/x-www-form-urlencoded

postInfo() {
  var url = 'http://127.0.0.1:8000/api/post_info';
  this.$http.post(url, { name: 'zs' }, { emulateJSON: true }).then(res => {
    console.log(res.body);
  });
}

4. 发送JSONP请求

JSONP形式从服务器获取数据

jsonpInfo() {
  var url = 'http://127.0.0.1:8000/api/jsonp';
  this.$http.jsonp(url).then(res => {
    console.log(res.body);
  });
}

axios

Vue.js 2.0 版本推荐使用axios来完成ajax请求。

1. 进行引用

<script src="https://unpkg.com/axios/dist/axios.min.js">script>

2. 发送get请求

// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 上面的请求也可以这样做
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

3. 发送post请求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

4. 执行多个并发请求

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
  }));