ajax二次封装之异步加载

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
        });

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

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

 

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