对jquery的ajax进行二次封装

代码如下（欢迎文明交流，留下宝贵建议，个人思路，不喜勿喷）

function ajax(opt){
	var defaultSettings = {
		data: {},
		type: 'get',
		dataType: 'json',
		headers:{'Authorization': getStore('token')},
		beforeSend: function(){
			openLoad('loading.gif')
		},
		complete:function(){  
			closeLoad();
		},
   		error: function(xhr){
   			if(xhr.status == 401){
   				showTips('您未登录')
   			}else if(xhr.status == 403){
   				showTips('您没有权限')
   			}else if(xhr.status == 500){
   				showTips('服务器发生错误，请稍后刷新页面')
   			}else｛
   				showTips('未知错误')
   			｝
   		}
	}
	for(var key in opt){
		defaultSettings[key] = opt[key]
		if(key == 'url')
			defaultSettings[key] = '/api/' + opt[key] + '?format=json&time=' + new Date().getTime()
	}
	if(arguments[1]){ //如果是图片上传,需要传递第二个参数，必须内容
		defaultSettings.traditional = true
		defaultSettings.processData = false
		defaultSettings.contentType = false
	}
	return $.ajax(defaultSettings)
}

function showTips(msg){
	var tipsEl = $('<div></div>').text(msg).css({
		"text-align":"center",
		"line-height":"40px",
		"height":'40px',
		"background":'rgba(0,0,0,0.5)',
		'position':'fixed',
		"left":'50%',
		"top":'50%',
		"transform":'translate(-50%,-50%)',
		"z-index":999999,
		'padding':'15px 30px',
		"box-sizing":'border-box',
		"display":'none',
		"font-size":'14px'
	})

	tipsEl.appendTo($('body')).fadeIn(500).delay(1000).fadeOut(500,function(){
		tipsEl.remove()
	})
}
function getStore (name) {
	if (!name) return;
	return window.localStorage.getItem(name);
}
function openLoad( src ){
	var loadEl_icon = $('<i></i>').css({
		"width":'50px',
		"height":'50px',
		"margin":'auto',
		"background":'url(' + src + ') no-repeat center center',
		'background-size':'cover'
	})
	var lodeEl_inner = $('<div class="ui-loading-inner"></div>').css({
		"width":'200px',
		"height":'200px',
		"margin":'auto',
		"border-radius":'5px',
		"background":'rgba(0,0,0,0.5)',
		"display":'flex'
	}).append(loadEl_icon)
	var loadEl_wrap = $('<div class="ui-loading-mask"></div>').css({
		"position":'absolute',
		"left":0,"top":0,"bottom":0,"right":0,
		"background":'rgba(255,255,255,0.01)',
		"z-index":999999,
		"display":'flex'
	}).append(lodeEl_inner).appendTo($('body'))
}

function closeLoad(){
	$('.ui-loading-mask').remove()
}

在封装里默认进行了error函数的判断，也提供了页面消息提示框，调用方式如下：

ajax(formData,true) //上传图片
ajax(opt)//普通调用

参数opt的设置：

var opt = {
	url:'do_login',
	type:'post',//如果是post需要传递type，如果是get可以不传递
	data:{usrname,password},
	success(r){
		//your code here or callback(r)
	}

}

如果需要多次回调，可以这样来调用：

ajax(opt).then((r)=>{
	console.log(r)
)

看网上有许多大神都封装成了面向对象的方式，这里没有采用的原因是，ajax在一个项目中会多次使用，面向对象封装或许要采用单例模式，否则会增加程序开销，但是发现网上大多数的封装都没有注意这个问题，另外，将loading组件和提示组件放进一个对象里，可能增加代码的耦合性，单独使用不方便。

另外，代码里所有的css都应该在 .css 样式文件里定义好，这样直接创建一个元素就不用设置样式了，这里为了方便表达所以才写在了js里，用的时候可以单独拆分出来，所以这里的代码只提供一个思路，具体可以结合业务进行相应改动。