前端JS基础知识复习笔记（17）---Promise+ajax的回调地狱

let promiseExamp = new Promise(); //=>Uncaught TypeError: Promise resolver undefined is not a function


new Promise([executor]):第一个执行函数必须传递
* [executor 简称EXE]
* 1.NEW PROMISE的时候就会把EXE执行，创建PROMISE的一个实例（EXE是PROMISE类的一个回调函数，PROMISE内部会把它执行）
* 2.PROMISE不仅把EXE执行，而且还给EXE传递两个参数（两个参数也是函数类型）：
* =>resolve函数：它执行代表PROMISE处理的异步事情是成功的，把PROMISE的状态改为fulfilled
* =>reject函数：它执行代表PROMISE处理的异步事情是失败的，把PROMISE的状态改为rejected
* 3.EXE函数中放的就是当前要处理的异步操作事情

let promiseExamp = new Promise((resolve, reject) => {
			//=>这里一般存放的都是我们即将要处理的异步任务，任务成功我们执行resolve,任务失败我们执行reject（当然写同步的也可以）
			let ran = Math.random();
			setTimeout(() => {
				if (ran < 0.5) {
					reject(ran);
					return;
				}
				resolve(ran);
			}, 1000);
		});
		promiseExamp.then(result => {
			//=>状态为FULFILLED成功后执行（RESULT：[[PromiseValue]]）
			console.log('成功: ' + result);
		}, error => {
			//=>状态为REJECTED失败后执行
			console.log('失败: ' + error);
		}); 

console.log(a); //=>Uncaught ReferenceError: a is not defined
		let b = 10;
		console.log(b); 

		//=>在JS中当前行代码报错，会中断主线程的渲染（下面代码将不再执行）
		// throw new Error('')：手动抛出一个异常错误，目的就是让后面代码不再执行
		// 如果上面代码报错，不想让期影响后面的代码，我们需要做异常捕获：try catch finally

		try {
			console.log(a);
		} catch (e) {
			//=>错误信息
			// console.log(e.message);
		}
		let b = 10;
		console.log(b); 

 * Promise.prototype
		 *    then:设置成功或者失败后执行的方法（成功或者失败都可以设置，也可以只设置一个）
		 *       pro.then([success],[error])
		 * 		 pro.then([success])
		 *       pro.then(null,[error])
		 *    catch:设置失败后执行的方法
		 *    finally:设置不论成功还是失败都会执行的方法（一般不用）
		
		 let promiseExamp = new Promise((resolve, reject) => {
			setTimeout(() => {
				let ran = Math.random();
				ran < 0.5 ? reject(ran) : resolve(ran);
			}, 1000);
		});
		promiseExamp.then(result => {
			console.log('成功: ' + result);
		});
		promiseExamp.catch(error => {
			console.log('失败: ' + error);
		});
		promiseExamp.finally(x => {
			console.log('哈哈');
		}); 

//=>then(onResolve,onReject)
==>执行THEN/CATCH/FINALLY返回的结果是一个全新的PROMISE实例，所以可以链式写下去；下一个THEN中哪个方式会被执行，由上一个THEN中某个方法执行的结果来决定
==>上一个THEN中某个方法的返回值会传递给下一个THEN的某个方法中

	   new Promise((resolve, reject) => {
			// resolve(100); //=>把第一个PROMISE实例的VALUE值改为100/-100
			reject(-100);
		}).then(result => {
			console.log(result);
			return result * 10; //=>THEN中RETURN的结果相当于把当前这个新的PROMISE实例中的VALUE值改为返回值
		}, err => {
			console.log(err);
			return err / 10;
		}).then(A => {
			console.log('A:' + A);
		}, B => {
			console.log('B:' + B);
		}).then(C => {

		}, D => {

		}); 

如果当前PROMISE实例的状态确定后，都会到对应的THEN中找方法，如果THEN中没有对应的这个方法，则会向下顺延

		THEN(onFulfilled)  THEN(null,onRejected)  
		new Promise((resolve, reject) => {
			reject(-100);
		}).then(A => {
			console.log(A);
			return A * 10;
		}).catch(B => {
			console.log(B); //=>-100
			return B * 10;
		}); 

		new Promise((resolve, reject) => {
			resolve(100);
		}).then(A => {
			console.log(AAAAA); //=>执行报错，让.THEN创建的PROMISE实例变为失败状态，并且把报错的原因修改此PROMISE的VALUE值
			return A * 10;
		}).catch(B => {
			console.log(B); //=>ReferenceError: AAAAA is not defined
			return '@';
		}).then(C => {
			console.log(C); //=>'@'
		}); 

		new Promise((resolve, reject) => {
			resolve();
		}).then().catch(x => {
			console.log(1);
		}).then(x => {
			console.log(2); //=>OK
		}).then(x => {
			console.log(3); //=>OK
		}).catch(x => {
			console.log(4);
		}).then(x => {
			console.log('AAA'); //=>OK
			console.log(AAA); //=>报错
		}).catch().then(null, x => {
			console.log(5); //=>OK
		}); 

		 let pro1 = new Promise((resolve, reject) => {
			setTimeout(() => {
				let ran = Math.random();
				ran < 0.5 ? reject(ran) : resolve(ran);
			}, 1000);
		});

		let pro2 = pro1.then(result => {
			console.log(`PRO1:SUCCESS`);
		}, error => {
			console.log(`PRO1:ERROR`)
		});

		let pro3 = pro2.then(result => {
			console.log(`PRO1:SUCCESS`);
		}, error => {
			console.log(`PRO1:ERROR`)
		}); 

解决AJAX回调地狱

		function queryBase() {
			return new Promise(resolve => {
				$.ajax({
					url: '/baseInfo?name=zhanglu',
					success: result => {
						resolve(result);
					}
				});
			});
		}

		function queryScore(scoreId) {
			return new Promise(resolve => {
				$.ajax({
					url: '/score?id=' + scoreId,
					success: result => {
						resolve(result);
					}
				});
			});
		}

		function queryChinese(chinese) {
			return new Promise(resolve => {
				$.ajax({
					url: '/paiming?chin=' + chinese,
					success: result => {
						resolve(result);
					}
				});
			});
		}

queryBase().then(baseInfo => {
			let scoreId = baseInfo.scoreId;
			//=>THEN方法中如果返回的是一个PROMISE实例，则当前返回实例的成功或者失败状态，影响着下一个THEN中哪个方法会被触发执行；如果返回的是非PROMISE实例，则看当前方法执行是否报错，来决定下一个THEN中哪个方法执行；
			return queryScore(scoreId);
		}).then(scoreInfo => {
			let chinese = scoreInfo.chinese;
			return queryChinese(chinese);
		}).then(pai => {
			console.log('排名是:' + pai);
		}); */

 queryBase().then(baseInfo => queryScore(baseInfo.scoreId))
			.then(scoreInfo => queryChinese(scoreInfo.chinese))
			.then(pai => {
				console.log('排名是:' + pai);
			}); */

async function func() {
			let baseInfo = await queryBase();
			let scoreInfo = await queryScore(baseInfo.scoreId);
			let pai = await queryChinese(scoreInfo.chinese);
			//....
		}
		func(); */

解决AJAX并行

		function ajax1() {
			return new Promise(resolve => {
				$.ajax({
					url: '/api1',
					success: resolve
				});
			});
		}

		function ajax2() {
			return new Promise(resolve => {
				$.ajax({
					url: '/api2',
					success: resolve
				});
			});
		}

		function ajax3() {
			return new Promise(resolve => {
				$.ajax({
					url: '/api3',
					success: resolve
				});
			});
		}

 Promise.all([promise1,promise2,...])：ALL中存放的是多个PROMISE实例（每一个实例管理者一个异步操作），执行ALL方法返回的结果是一个新的PROMISE实例"PROA"
		//=>当所有PROMISE实例的状态都为Fulfilled的时候（成功），让PROA的状态也变为Fulfilled，并且把所有PROMISE成功获取的结果，存储为成为一个数组（顺序和最开始编写的顺序一致）“result=[result1,result2,...]”，让PROA这个数组的VALUE值等于这个数组
		//=>都成功（PROA状态是FUFILLED）才会通知THEN中第一个方法执行，只要有一个失败（PROA状态是REJECTED），就会通知THEN中第二个方法或者CATCH中的方法执行
		Promise.all([ajax1(), ajax3(), ajax2()]).then(results => {
			//=>results:[result1,result3,result2]
		});

		Promise.race([ajax1(), ajax3(), ajax2()]).then(result => {
			//=>看哪一个PROMISE状态最先处理完（成功或者失败），以最先处理完的为主
		});