Vue 2.0 入门系列（10）Vue Ajax 的简单使用（with Laravel)

本节将简单介绍如何使用 Ajax 与 Laravel 进行通信。首先，创建一个 Laravel 应用：

$ laravel new ajxa-with-laravel

我们以 Get 请求为例，返回任务列表，简单定义 get 请求的返回：

/routes/web.php
Route::get('tasks', function () {
    return ['编程','家务','编程','购物'];
});

编辑视图文件，引入相关库:

/resources/views/welcome.blade.php



    
    


    


    

    
    
    

Vue 本身并没有路由相关功能，因此我们可以使用第三方的库，这里使用的是 axios,发送一个 get 请求的示例如下:

axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

接下里就可以在 app.js 里面进行创建 Vue 实例了:

var vm = new Vue({
    el:'#root',
    data:{
        tasks:[]
    },
    mounted(){
        axios.get('/tasks')
        .then(function (response) {
            vm.tasks = response.data;
        })
    }
});

使用 then 函数时，this 指向的是全局对象 window，因此不能写成:

this.tasks = response.data;

如果要令其指向 vue 实例，可以使用箭头函数的写法:

mounted(){
    axios.get('/tasks')
        .then(response => this.tasks = response.data);
}

最后，在视图中显示任务列表：

/resources/views/welcome.blade.php

  

      
@{{ task }}
  

为了让 {{ }} 不被解析成 Laravel 的输出标记，需要在前面添加 @。

最后，可以对 axios 进行简单的封装:

/public/js/app.js
Vue.prototype.$http = axios;

var vm = new Vue({
    el:'#root',
    data:{
        tasks:[]
    },
    mounted(){
        this.$http.get('/tasks')
            .then(response => this.tasks = response.data);
    }
});

---

• axios 官方首页

• 函数的扩展 - ECMAScript 6入门