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
});
在调用时，回调函数外不要做数据处理即可。
实际上这种方法，虽然可以实现，但代码并不优雅，项目工期需要。如果有更优雅的方式，欢迎共享。
研究不易，转载请注明出处。