账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    loading 状态在后台列表页大家是怎么处理的呢?
    90
    0
    描述:众所周知,后台列表页一般会有筛选块(包含日期筛选框、关键词输入框、搜索按钮)、el-table 表格块、el-pagination 分页块,当获取列表接口数据时,loading 状态会做些什么处理呢?解决方案 ①:新请求需等待旧请求方式:取列表接口数据时,设置 isLoading="true" , v-loading="isLoading" 应用在表格块、分页块增加 loading 遮罩 不让显示,给搜索按钮加上 :loading="isLoading" 菊花样式不让再次搜索缺点:如果获取接口数据的等待时间过长,比如筛选日期范围过大导致过慢,用户就想把日期范围缩小点加快数据的查看,这时候就只能等待了解决方案 ②:取消旧请求直接发送新请求方式:参考了神策网站里的事件分析接口,没有搜索按钮,可以随时改变事件类型、日期范围,一旦一个参数改变就发送新请求,丢弃掉旧请求 xhr.abort() ,同时再发送一个取消请求告诉后端不用去处理旧的请求了请求 network 截图缺点:①前端需要额外处理下;②适用于本身请求接口就是耗时长的,需要耐心等待,不想用户那么频繁请求那么,大佬们一般是怎么处理的呢?
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 孤独的像条野狗 普通会员 1楼

      在后台列表页,我们可以使用Ajax或者Fetch API来加载新的数据。以下是一个使用Fetch API的例子:

      javascript fetch('https://example.com/api/users') .then(response => response.json()) .then(data => { // 现在有新的数据了,你可以在这里做任何你想做的事情 }) .catch(error => { // 如果有任何错误发生,你可以在这里处理它 });

      在这个例子中,我们首先发送一个GET请求到https://example.com/api/users,然后解析返回的JSON数据。这个数据将会在后台列表页中显示。

      我们使用.then()方法来处理获取的数据,它会接收一个回调函数,这个函数会在数据被获取并解析后被调用。在这个回调函数中,你可以处理获取到的数据。

      我们使用.catch()方法来处理可能的错误。如果在获取数据或解析数据时发生错误,这个函数将会被调用。

      这就是如何在后台列表页使用Ajax或Fetch API来加载新的数据。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部