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

laravel 同时被 2 个专栏收录
11 篇文章 0 订阅
5 篇文章 0 订阅

问题:在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对象

然后我们将其展开来看:


也就是说,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;






  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页

打赏作者

Coder_Chang

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值