Ajax 发送请求结合 Promise 使用实例

将一个promise对象放在某个常量中，在promise对象里调用 XMLHttpRequest

1. 原生js写法

/**
 * 原生JS发送http请求
 * @param {object} params - 传入的对象
 * @param {string} params.url - 传入对象的 url 属性
 * @param {string} [params.type = 'GET'] - 传入对象的 type 属性
 * @param {*} [params.data] - 传入对象的 data 属性
 * @param {string} [params.contentType] - 传入对象的 contentType 属性: application/json 或者 application/x-www-form-urlencoded
 * @returns {promise} - 返回值是一个promise对象，需要用.then接收
 */
const ajaxPromise = (params) => {
	return new Promise((resolve, reject) => {
		const _contentType = params.contentType || 'application/x-www-form-urlencoded;charset=utf-8'
		const _data = params.data ? JSON.stringify(params.data) : null
		const xhr = new XMLHttpRequest()
		xhr.open(params.type || 'GET', params.url)
		xhr.setRequestHeader('Content-type', _contentType)
		xhr.send(_data)
		xhr.onload = () => {
			if (xhr.status === 200) {
				resolve(JSON.parse(xhr.responseText))
			} else {
				reject(Error(xhr.statusText))
			}
		}
	})
},

2. jQurey写法

const ajaxPromise = (params) => {
	const _token = '你的token'
	const _contentType = 'application/json;charset=utf-8'
	return new Promise((resolve,reject) => {
		$.ajax({
			url: params.url,
			type: params.type || 'get',
			data: params.data,
			// 如果需要携带本地cookie信息
			xhrFields: {
				withCredentials: true,
			},
			// 跨域请求
			crossDomain: true,
			// 发送ajax请求之前向http的head里面加入验证信息
			beforeSend: function (xhr) {
				// 携带token
				xhr.setRequestHeader('token', _token)
				// 携带Content-Type资源的MIME类型
				xhr.setRequestHeader('Content-Type', _contentType)
			},
			// 请求成功后返回值,data:返回的数据，status:状态，xhr：服务器响应的数据
			success: (data, status, xhr) => {
				resolve(JSON.parse(data))
			},
			error: (error) => {
				reject(err)
			}
		})
	})
}