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

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


一、什么是Axios

axios文档链接

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

其拥有如下特点:

  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换 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对象

然后我们将其展开来看:

laravel vue控件通过axios向api发起请求,获取分页实例对象reponse.data.data_第1张图片

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

细看data(第一层data)这一个属性,我们可以得知此时其中装了一个obejct

laravel vue控件通过axios向api发起请求,获取分页实例对象reponse.data.data_第2张图片

观察发现是我们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;






你可能感兴趣的:(laravel,vue)