【javaScript】Ajax封装之原生js的xmlHttpRequest的封装，支持回调用法和promise用法，支持自定义请求头，支持REST API风格的八种请求方式

1.代码

/**
* 描述: 原生js的ajax请求封装，支持回调用法和promise用法
* 原文：https://blog.csdn.net/liulinet/article/details/135699830
* @param {String} url 请求地址
* @param {String} method 请求方式
* @param {Object} params get请求的参数
* @param {Object} data post请求的参数
* @param {Object} headers 设置的请求头
* @param {Function} success 成功的回调
* @param {Function} error 失败的回调
*/
const request = ({ url = '', method = 'get', params = {}, data = {}, headers = {}, success, error }) => {
	return new Promise((resolve, reject) => {
		// 创建ajax
		let xhr
		if (window.XMLHttpRequest) xhr = new XMLHttpRequest()	//判断XMLHttpRequest是否存在
		else xhr = new ActiveXObject('MicroSoft.XMLHTTP')	//兼容老版本ie

		// 监听请求完成
		xhr.onreadystatechange = function () {
			// 固定写法 readyState 表示 ajax的状态 
			//ajax的状态总共有（0 1 2 3 4 ）五种状态 状态为4表示请求完成 status === 200表示成功
			if (xhr.readyState == 4) { //请求完成
				if (xhr.status === 200) {	//http请求状态为200 成功
					let res = xhr.responseText;  //接收响应结果 结果是JSON字符串
					// 转化为对象 传给成功的回调
					success && success(JSON.parse(res)) //成功的回调
					resolve(JSON.parse(res)) //promise 成功 返回
				} else { //状态码不为200 失败
					error && error(xhr.status)	//失败的回调
					reject(xhr.status) //promise 失败 返回
				}
			}
		}

		// 用户设置请求头信息的方法
		const setHeader = () => {
			// 设置传入的请求头
			headers && Object.keys(headers).map(key => {
				xhr.setRequestHeader(key, headers[key])
			})
		}
		//构建请求的url
		let reqUrl = url
		if (Object.keys(params).length > 0) reqUrl += '?' + Object.keys(params).map(key => key + '=' + params[key]).join('&') //url拼接请求参数

		// 根据请求方式发送请求
		switch (method.toUpperCase()) {
			case "GET":
			case "DELETE":
			case "OPTIONS":
			case "HEAD":
			case "TRACE":
			case "CONNECT":
				xhr.open(method, reqUrl);
				setHeader()	//设置请求头
				xhr.send() //发送请求
				break
			case "POST":
			case "PUT":
				xhr.open(method, reqUrl);
				setHeader()	//设置请求头
				if (data instanceof FormData) { //如果这是一个表单提交 直接发送
					xhr.send(data)
				}
				else if (Object.keys(data).length > 0) { //普通提交
					xhr.setRequestHeader('Content-Type', 'application/json') //设置请求头为json
					xhr.send(JSON.stringify(data))	//将数据转为json字符串数据 发送请求
				}
				else xhr.send()	//无参请求
				break
		}
	})
}

2.使用

const BASE_URL = 'http://localhost:8080'

/** post请求 promise用法 请求头添加token */
request({
	url: BASE_URL + '/mes/list', //url
	method: 'post',	//请求方式
	headers:{
	  token:'token',
	},
	data: { a: 1, b: { c: 3 } }, //post请求的参数
}).then(res => { //http成功
	console.log(res, 'post promise用法 res');
}).catch(errCode => { //http失败
	console.log(errCode, 'post promise用法 errCode')
})

/** get请求 promise用法 */
request({
	url: BASE_URL + '/mes/list', //url
	method: 'get', //请求方式
	params: { a: 1, b: 2 }, //get请求的参数
}).then(res => { //http成功
	console.log(res, 'get promise用法 res');
}).catch(errCode => { //http失败
	console.log(errCode, 'get promise用法 errCode')
})

/** get请求 回调用法 */
request({
	url: BASE_URL + '/mes/list', //url
	method: 'get', //请求方式
	params: { a: 1, b: 2 },	//参数
	success: (res) => {
		console.log(res, 'get请求 回调用法 成功res')
	},
	error: (errCode) => {
		console.log(errCode, 'get请求 回调用法 失败errCode')
	}
})

/** post请求 回调用法 */
request({
	url: BASE_URL + '/mes/list', //url
	method: 'post', //请求方式
	data: { a: 1, b: 2 }, //参数
	success: (res) => {
		console.log(res, 'post请求 回调用法 成功res')
	},
	error: (errCode) => {
		console.log(errCode, 'post请求 回调用法 失败errCode')
	}
})