购物车使用promise来进行封装ajax

//使用promise来进行封装ajax
		function ajaxProm(url, type, async = false, data = {}) {
			return new Promise((resolve, reject) => {
				$.ajax({
					url,
					type,
					async,
					data,
					success(res) {
						resolve(res)//把promise的状态更改为成功状态
					},
					error(err) {
						reject(err)//把promise的状态更改为失败的状态
					}
				})
			})
		}
		ajaxProm("data.json", "get", true).then((data) => {
			let bo = document.getElementById("color")
			for (let i = 0; i < data.length; i++) {
				let str = `
				<tr>
					<td>${data[i].types}</td>
					<td><button type="button">添加</button></td>
				</tr>
				`
				bo.innerHTML += str;
				//1.给按钮添加事件
				let btns = document.getElementsByTagName("button") //先获取按钮对象
				let cars = []; //购物车数组
				let shopp = document.getElementById("cars") //获取购物车对象
				let inde = 0; //购物车tr的id
				for (let i = 0; i < btns.length; i++) { //循环按钮对象
					btns[i].onclick = function() { //给按钮添加点击事件
						//2.获取到点击需要添加的产品，父亲的同辈元素的上一个节点文本内容
						let ca = $(this).parent().prev().text(); //按钮自身父亲的同辈元素的上一个节点文本内容
						//3.产品和购物车数据进行对比
						let indexs = cars.findIndex(item => item == ca);
						//4.根据对比的结果进行操作
						if (indexs == -1) { //判断购物车有没有，没有返回-1
							//5.购物车没有这东西，需要添加进去，页面要显示
							cars.push(ca); //在数组末尾添加
							//给每一行添加一个id
							let str = `
									<tr id="rows${inde}">
										<td>${ca}</td>
										<td>1</td>
									</tr>
									` //拼接
							shopp.innerHTML += str //渲染购物车
							inde++; //下标+1
						} else {
							//5.购物车有这东西，需要添加数量
							let cols = document.getElementById("rows" + indexs).cells; //获取到所有表格
							console.log(cols);
							//根据indexs+rows进行拼接获取到添加的产品在购物车表格中的数据
							let numb = parseInt(cols[1].innerHTML); //获取到对应表格的内容
							console.log(numb);
							cols[1].innerHTML = ++numb
						}

					}
				}
			}
		}).catch((err) => {
			console.log(err);
		})

<p>产品</p>
		<table border="0" cellspacing="0" cellpadding="0" id="color">

			<!-- <tr>
				<td>1、华为手机</td>
				<td><button type="button">添加</button></td>
			</tr>
			<tr>
				<td>2、锤子手机 </td>
				<td><button type="button">添加</button></td>
			</tr>
			<tr>
				<td>3、小米手机 </td>
				<td><button type="button">添加</button></td>
			</tr> -->
		</table>
		<p>我的购物车</p>
		<table border="0" cellspacing="0" cellpadding="0" id="cars"></table>

Promise是ES6提供的一种异步编程方案。
Promise 对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）、rejected（已失败）
通过new Promise(function (resolve, reject) { }）
resolve函数将Promise对象的状态从“未完成”变为“成功”                                                                                                                                                                                                                                                                                                                ；
reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”
成功处理使用then()回调函数，失败处理使用catch()回调函数，支持链式调用。
Promise的优点就是可以链式调用，这样就可以用同步的编程方式处理异步的结果，异步获取数据和业务处理分开。

效果图