laravel vue控件通过axios向api发起请求，获取分页实例对象reponse.data.data

问题：在vue中获取分页实例对象中的具体实例对象的时候需要使用reponse.data.data，为什么需要调用两次data呢？请看下文

一、什么是Axios

axios文档链接

在文档中我们可知，Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

其拥有如下特点：

从浏览器中创建XMLHttpRequests

从 node.js 创建http请求

支持PromiseAPI

拦截请求和响应

转换请求数据和响应数据

取消请求

自动转换 JSON 数据

客户端支持防御XSRF

二、在vue中发起请求

首先需要在应用vue的页面中注册axios，比如注册到页面引入的js文件中，注册代码如下：

Vue.prototype.$http = window.axios;

然后就可以在vue中发起请求了：

window.axios.post('api_url').then(function(response){

console.log(reponse);

}

三、api返回数据

$users = User::orderBy('id')->paginate(5);

return $users;

四、处理响应的数据

axios对响应的数据的处理，写在.then方法的闭包函数内，如上文中我们将返回的数据打印输出在控制台。

控制台打印如下：

首先，我们得知这是一个object对象

然后我们将其展开来看：

也就是说，reponse是以json形式返回的，其中包括了响应的各种属性：配置、数据内容（data）、响应头、请求体、响应状态码、响应结果文本、__proto__。

细看data（第一层data）这一个属性，我们可以得知此时其中装了一个obejct

观察发现是我们api返回的分页对象实例。

Laravel文档中提到，”the paginator instances are iterators and may be looped as an array“，也就是说，分页实例对象本身是可以直接参与循环，直接在blade中输出详细内容。

但是此时我们在vue中，需要将具体内容取出来，赋值给变量而非直接渲染输出，就需要准确逐层取值。

paginate实例对象，其属性包含：

{

"total": ,

"per_page": ,

"current_page": ,

"last_page": ,

"first_page_url": "",

"last_page_url": "",

"next_page_url": "",

"prev_page_url": null,

"path": "",

"from": ,

"to": ,

"data":[

{

// Result Object

},

{

// Result Object

}

]

}

因为data属性里面装的是对象数组，我们要获取返回的user对象的数据，就需要取其的data属性（第二层data）：

vm.users = response.data.data;