ajax二次封装之异步加载

ajax异步加载会导致在数据未加载回来就读取数据,然后出现数据为空的报错。在ajax封装时,将ajax直接改为同步,虽然可以解决报错,但是会导致页面渲染被阻塞,接口反应时间较长后,会极大的影响用户体验。

在做一个展示系统的时候,数据库数据较多,页面报表调用接口较多,倒是页面刷新后需要4-5s去加载,所以将ajax封装的方法做了回调。

框架(vue)

在项目中封装了一个全局方法:ajaxData.js

exports.install = function (Vue, options) {
Vue.prototype.ajaxData = function (type,url,data,callback){
var datas;
$.ajax({
type: type,
url: "http://localhost:9594"+url,
data:data,
dataType: 'text',
async: true,
success: function(result){
datas = $.parseJSON( result );
callback(result);
},
error:function () {
this.$router.push({ path: '/' })
}
});
}
import ajaxData from './assets/js/ajaxData'
Vue.use(ajaxData);

代码中ajaxData 方法插入回调函数callback(),调用该方法时,从接口取回数据后,执行回调函数callback()。在callback()中去处理数据,渲染页面,将不会造成阻塞。

调用:

var that = this;
this.ajaxData1("get","/TDCBJYQ/GetXZCBHXX",{},function (result) {
that.data1 = $.parseJSON(result).CBHXX
});

在调用时,回调函数外不要做数据处理即可。

实际上这种方法,虽然可以实现,但代码并不优雅,项目工期需要。如果有更优雅的方式,欢迎共享。

研究不易,转载请注明出处。

ajax二次封装之异步加载的更多相关文章

  1. 基于layer封装的异步加载分部视图弹出层

    背景:之前一直用的artdialog,但是样式不是很好看,后来偶然看到layer,觉得不错,但是对于.net mvc来说,不能像artdialog一样弹出分部视图是很难受的.所以下面的方法就解决了. ...

  2. IOS学习之路二十三(EGOImageLoading异步加载图片开源框架使用)

    EGOImageLoading 是一个用的比较多的异步加载图片的第三方类库,简化开发过程,我们直接传入图片的url,这个类库就会自动帮我们异步加载和缓存工作:当从网上获取图片时,如果网速慢图片短时间内 ...

  3. JS异步加载的三种方式

    js加载的缺点:加载工具方法没必要阻塞文档,过得js加载会影响页面效率,一旦网速不好,那么整个网站将等待js加载而不进行后续渲染等工作. 有些工具方法需要按需加载,用到再加载,不用不加载,. 默认正常 ...

  4. js的异步加载你真的懂吗

    面试高频之js的异步加载 讲这个问题之前, 我们从另一个面试高频问题来切入, 我们的web页面从开始解析到页面渲染完成都经历了什么 ?  1  ,  创建document对象, 开始解析页面,    ...

  5. 淘宝购物车页面 智能搜索框Ajax异步加载数据

    如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...

  6. Scrapy爬取Ajax(异步加载)网页实例——简书付费连载

    这两天学习了Scrapy爬虫框架的基本使用,练习的例子爬取的都是传统的直接加载完网页的内容,就想试试爬取用Ajax技术加载的网页. 这里以简书里的优选连载网页为例分享一下我的爬取过程. 网址为: ht ...

  7. ASP.NET MVC深入浅出(被替换) 第一节: 结合EF的本地缓存属性来介绍【EF增删改操作】的几种形式 第三节: EF调用普通SQL语句的两类封装(ExecuteSqlCommand和SqlQuery ) 第四节: EF调用存储过程的通用写法和DBFirst模式子类调用的特有写法 第六节: EF高级属性(二) 之延迟加载、立即加载、显示加载(含导航属性) 第十节: EF的三种追踪

    ASP.NET MVC深入浅出(被替换)   一. 谈情怀-ASP.NET体系 从事.Net开发以来,最先接触的Web开发框架是Asp.Net WebForm,该框架高度封装,为了隐藏Http的无状态 ...

  8. ajax异步加载问题

    使用ajax异步加载数据,在之后需要用到这个数据时,应该将之后的js一并写入ajax函数中,否则后面的js不能找到动态拼接的dom节点. 或者将其封装成方法,在ajax动态加载数据的最后调用该方法.

  9. 向上滚动或者向下滚动分页异步加载数据(Ajax + lazyload)[上拉加载组件]

    /**** desc : 分页异步获取列表数据,页面向上滚动时候加载前面页码,向下滚动时加载后面页码 ajaxdata_url ajax异步的URL 如data.php page_val_name a ...

随机推荐

  1. 详细记录sql运行时间(精确到毫秒)

    写程序的人,往往需要分析所写的SQL语句是否已经优化过了,服务器的响应时间有多快,这个时候就需要用到SQL的STATISTICS状态值来查看了. 通过设置STATISTICS我们可以查看执行SQL时的 ...

  2. 客户端负载均衡Feign之三:Feign补充

    在spring Cloud Netflix栈中,各个微服务都是以HTTP接口的形式暴露自身服务的,因此在调用远程服务时就必须使用HTTP客户端.我们可以使用JDK原生的URLConnection.Ap ...

  3. 廖雪峰Java2面向对象编程-3继承和多态-1继承

    1.继承 继承是一种代码复用的方式. Student与Person有相同部分的代码. Student可以从Person继承,这样Student获得了Person的所有功能,只需要编写新增的功能即可.通 ...

  4. win10以上系统设定PPTP自动拨号

    :bohaorasdial adsl 123 123if not %errorlevel% == 0 goto :bohaoexit rasdial adsl 123 123 rasdial是开始拨号 ...

  5. 2012 - AD 验证域控是否成功部署

    1,验证AD DS域服务:AD DS & AD WS 2,验证“默认容器”及“Domain Controller” 3,验证“Default-First-Site-Name" 4,验 ...

  6. 安装MySQL_Python时出现is not a supported wheel on this platform.

    MySQL-Python 数据库驱动安装 pip install mysql_python失败 不支持windows操作系统 解决: 自行下载安装 下载网站 http://www.lfd.uci.ed ...

  7. 解决linux更新apt软件源时报出GPG错误

    今天给树莓派换源,爆出N个这错误: W: GPG error: http://mirrors.neusoft.edu.cn/raspbian/raspbian wheezy InRelease: Th ...

  8. python装饰器(二)

    有参装饰器 def outer(flag): def timer(func): def inner(*args,**kwargs): if flag: print('''执行函数之前要做的''') r ...

  9. Android 支付密码输入框,自定义EditText实现密码输入框功能;

    刚撸出来的密码输入框,注释和逻辑看着挺清晰的,一些属性还没有添加,下个博客把属性添加上去: 看一下图: 直接看代码吧! import android.content.Context; import a ...

  10. Windows Server 2012R2 网络地址转换NAT

    一.NAT概述 网络地址转换NAT(Network Address Translation)可以动态改变通过路由器的IP报文的内容(修改报文的源IP地址和/或目的IP地址).离开路由器的报文的源地址或 ...