jquery ajax请求封装 (promise)

在进入正文前先来一段小插曲：

封装ajax请求主要的目的在于减少冗余代码，而ajax请求的主要作用就是数据请求，那么数据处理就尤为重要了，那么怎样在封装的请求里面实现针对不同业务逻辑、不同数据结构等的数据的处理呢。有两种方法，第一种就是将所有的ajax请求参数及数据处理函数全部传入封装好的ajax请求中，再次不做介绍，相信大家应该能够明白。

第二种就是利用promise，那么什么是promise呐，借用廖雪峰大神的解释就是：

古人云：“君子一诺千金”，这种“承诺将来会执行”的对象在JavaScript中称为Promise对象。

 可以将它理解为是一个构造函数，就是一个函数，而这个函数有一个参数，参数同样是一个函数，所以创建一个promise就像这样

var promise = new Promise(function(resove,reject) {});

参数resove，reject对象为必填参数，resove参数用来返回一个新的promise，同时返回请求的数据，所以就可以链式调用，使用promise对象上面的方法了，同时可以在外部进行对数据进行操作，那么promise对象上到底有什么方法呐：

then方法在请求成功时执行，而catch方法在失败时执行。简单说了下promise，不懂的可以看这篇文章，写的不错。

那么接下来，进入正题：

关于ajax，其实就是参数的传递，数据的操作，那么封装思路就是最大灵活度的将请求参数从外部传递，再使用promise返回请求的数据，在外部操作，所以就不多说了，直接上代码：
 

var jrequest = (function() {
	return {
		_request(url,method,contentType,params) {
			return new Promise((resolve,reject) => {
				$.ajax({
					headers: {
						authorization: ''
					},
					contentType:contentType,
					dataType:"json",
					data:params,
					url:`http://这里是IP地址${url}`,
					type:method,
					success: function(res,textStatus,request) {
						// console.log(request.getResponseHeader("X-Total-Count"))
						let data = { // 对请求回来的数据进行操作，修改数据格式
							data: res,
							total: request.getResponseHeader("X-Total-Count")
						}
						resolve(data)
					}
				})
			})
		},
		get(url,params) {
			return new Promise((resolve,reject) => {
				this._request(url,"get","application/json", params).then(res => {
					if (res) {
						resolve(res)
					}
				})
			})
		},
		post(url,params) {
			return new Promise((resolve,reject) => {
				this._request(url,"post","application/x-www-form-urlencoded", params).then(res => {
					if (res) {
						resolve(res)
					}
				})
			})
		},
		put(url,params) {
			return new Promise((resolve,reject) => {
				this._request(url,"put","application/x-www-form-urlencoded", params).then(res => {
					if (res) {
						resolve(res)
					}
				})
			})
		},
		delete(url,params) {
			return new Promise((resolve,reject) => {
				this._request(url,"delete","application/json", params).then(res => {
					if (res) {
						resolve(res)
					}
				})
			})
		}
	}
}())

那么在调用的时候，首先将封装ajax的文件引入要使用的当前文件中，然后直接调用：

jrequest.get("接口地址",this.data.chartsQueryData).then(res => {
      console.log("接口数据")
      // 数据操作
    })