Promise
ES6 语法规范中新增加的内置类，用来处理 JS 中异步编程的，而我们所谓的 promise 设计模式，就是基于 promise 对异步操作进行管理。
对Ajax中的串行、并行导致的回调地狱、其他乱七八糟的事，进行管控。
我的理解：执行Promise的执行器函数executor过程中，如果执行了resolve函数，表示异步操作成功，把PromiseStatus改为fulfilled / resolved，Promise实例的then中执行resolved对应的方法；如果执行了reject函数，表示异步操作失败，把PromiseStatus改为rejected，Promise实例的then中执行rejected对应的方法。
在执行异步操作，等待的过程中，调用 实例.then()，往事件池【不是事件池】中添加 异步成功、失败对应的方法。【 .then()时，还不会执行.then()中的方法，只是把方法加进去。】
异步操作结束后，根据PromiseStatus，执行.then()中对应的方法。
实例.then()：有2个方法，到底执行哪个方法，由当前实例的状态、value决定【value无关】。如果是executor函数，那就看执行resolve 还是 reject；如果不是executor函数，是then()中的函数，就看函数执行有没有报错，不管执行的是then()中的第几个函数。
异步编程中的“回调地狱”，Ajax 的串行、并行
Ajax 的串行
Ajax串行：只有第一个请求成功才能执行第二个，第二个成功才能执行第三个....最后一个请求成功后拿到了每一次请求的所有数据
$.Ajax({
url: '/baseInfo',
method: 'GET',
data: {
name: 'zhanglu'
},
success: result => {
let scoreId = result.scoreId;
$.Ajax({
url: '/scoreInfo',
method: 'GET',
data: {
id: scoreId
},
success: result => {
let chinese = result.chinese;
$.Ajax({
url: '/paiming',
method: 'GET',
data: {
num: chinese
},
success: result => { }
});
}
});
}
});
Ajax 的并行
Ajax 的并行：请求可以同时发送，但是需要等到所有请求都成功才会做一件事
// 三个请求可以同时发送，但是需要等到所有请求都成功才会做一件事
let chi = 100,
eng = 12,
math = 98;
let chiPai,
engPai,
mathPai;
let count = 0;
function func() {
// func虽然被调用3次，但是count >= 3，才会执行if中的代码
if (count >= 3) {
// 处理自己要做的事情
}
}
$.Ajax({
url: '/pai?chi=' + chi,
success: result => {
chiPai = result;
count++;
func();
}
});
$.Ajax({
url: '/pai?eng=' + eng,
success: result => {
engPai = result;
count++;
func();
}
});
$.Ajax({
url: '/pai?math=' + math,
success: result => {
mathPai = result;
count++;
func();
}
});
let p1 = new Promise((resolve, reject) => {
console.log(111)
})
console.log(p1)
let p1 = new Promise((resolve, reject) => {
console.log(111)
resolve()
})
console.log(p1)
Promise基础语法
executor和状态
let PromiseExamp = new Promise(); // => Uncaught TypeError: Promise resolver undefined is not a function
// --------------------------------------
/*
* new Promise([executor]): 第一个执行函数必须传递
* [executor 简称exe]
* 1.exe是Promise类的一个回调函数，exe函数中放的就是当前要处理的异步操作，Promise内部会把它执行。
* new Promise的时候就会把exe执行，创建Promise的一个实例。
* 2.Promise不仅把exe执行，而且还给exe传递两个参数（两个参数也是函数类型）：
* => resolve函数：它执行代表Promise处理的异步操作是成功的，把Promise的状态改为fulfilled。
* => reject函数：它执行代表Promise处理的异步操作是失败的，把Promise的状态改为rejected。
*/
let PromiseExamp = new Promise((resolve, reject) => {
// => 这里一般存放的都是即将要处理的异步任务，任务成功，执行resolve；任务失败，执行reject。当然，写同步的也可以。
// 【executor不报错，还需要在executor中手动调用resolve，才会执行Promise实例的then函数中的完成处理函数；executor报错，不需要在executor中手动调用reject，就会执行Promise实例的then函数中的拒绝处理函数。】
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);
});
js中的异常处理
// js中的异常处理
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); // a is not defined
}
try {
throw new Error('嘻嘻嘻')
} catch (e) {
console.log(e.message); // 嘻嘻嘻
}
try {
throw '哈哈哈'
} catch (e) {
console.log(e); // 哈哈哈
}
let b = 10;
console.log(b);
then、catch、finally
/*
* 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);
}, 100);
});
PromiseExamp.then(result => {
console.log('成功: ' + result);
});
PromiseExamp.catch(error => {
console.log('失败: ' + error);
});
PromiseExamp.finally(x => {
console.log('哈哈');
});
// 使用链式写法，则不会像上面那样：ran < 0.5 时，控制台报错
let PromiseExamp = new Promise((resolve, reject) => {
setTimeout(() => {
let ran = Math.random();
ran < 0.5 ? reject(ran) : resolve(ran);
}, 100);
});
PromiseExamp.then(result => {
console.log('成功: ' + result);
}).catch(error => {
console.log('失败: ' + error);
}).finally(x => {
console.log('哈哈');
});
let p1 = new Promise((resolve, reject) => {
setTimeout(() => {
let ran = Math.random();
ran < 0.5 ? reject(ran) : resolve(ran);
}, 100);
})
p1.then(result => console.log('成功: ' + result));
p1.catch(error => console.log('失败: ' + error));
p1.finally(() => console.log('嘻嘻嘻'));
console.log('-----------------------------')
let p2 = new Promise((resolve, reject) => {
setTimeout(() => {
let ran = Math.random();
ran < 0.5 ? reject(ran) : resolve(ran);
}, 100);
});
p2.then(result => console.log('成功: ' + result))
.catch(error => console.log('失败: ' + error))
.finally(() => console.log('哈哈哈'))
then链
let pro1 = new Promise((resolve, reject) => {
setTimeout(() => {
let ran = Math.random();
console.log(ran)
ran < 0.5 ? reject(ran) : resolve(ran);
}, 100);
});
// 刚开始，pro1【.then】的状态是pedding。当pro1.then中2个方法中的任意一个执行，报错、成功、失败，只要执行的结果没报错，说明是成功的；可能这里又会返回一个异步操作的结果。2个方法中的任意一个执行，只要成功了，都会把pro3的 完成处理函数 执行；反之，则执行拒绝处理函数。第二次then监听的是 这个then的2个回调函数的执行结果
let pro2 = pro1.then(result => {
console.log(`PRO1: SUCCESS`);
}, error => {
console.log(`PRO1: ERROR`)
});
// 当pro2的状态为fulfilled 或 rejected时，执行pro2.then中的某个方法
let pro3 = pro2.then(result => {
console.log(`PRO2: SUCCESS`);
}, error => {
console.log(`PRO2: ERROR`)
});
// ---------------------------------------
// => then(onResolve,onReject)
// 执行then、catch、finally返回的结果是一个全新的Promise实例，所以可以链式写下去；下一个then中哪个方法会被执行，由上一个then中某个方法执行的结果来决定
// 上一个then中某个方法的返回值会传递给下一个then的某个方法中
// 实例.then()：有2个方法，到底执行哪个方法，由当前实例的状态、value决定【alue无关】。如果是executor函数，那就看执行resolve 还是 reject；如果不是executor函数，是then()中的函数，就看函数执行有没有报错，不管执行的是then()中的第几个函数
new Promise((resolve, reject) => {
// resolve(100); // => 把第一个Promise实例的value值改为100/-100
reject(-100);
}).then(result => {
console.log(result);
// then中RETURN的结果相当于把当前这个新的Promise实例中的value值改为返回值
return result * 10;
}, 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;
});
// --------------------------------
// 第一个.then()返回一个新的Promise实例
new Promise((resolve, reject) => {
resolve(100);
}).then(A => {
// => 执行报错，让.then创建的Promise实例变为失败状态，并且把报错的原因作为此Promise的value值
// 【而不是把return 的 A * 10作为返回值，其实这行代码报错，这个then中下面的代码就不会执行了。】
console.log(AAAAA);
return A * 10;
}).catch(B => {
console.log(B); // => ReferenceError: AAAAA is not defined
return '@';
}).then(C => {
console.log(C); // => '@'
});
// --------------------------------
// （1）第一个Promise成功，找第1个then中的第一个函数，没有，不会报错，顺延到下一个成功；（2）第一个catch不代表成功，跳过；（3）找到第2个then中的第一个函数，执行，没报错，成功；（4）第3个then中的第一个函数，执行，没报错，成功；（5）第2个catch不执行；（6）第3个then是成功，第2个catch不执行，所以执行第4个then，报错；（7）执行第3个catch，没东西，顺延；（8）执行最后一个then的拒绝处理函数。
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
});
promise的应用：解决Ajax的串行、并行
< !--解决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: res => resolve(res)
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状态最先处理完（成功或者失败），以最先处理完的为主
});
报错问题
let p1 = new Promise((resolve, reject) => {
setTimeout(() => {
let ran = Math.random();
ran < 0.5 ? reject(ran) : resolve(ran);
}, 1000);
})
p1.then(result => console.log('成功: ' + result))
p1.catch(error => console.log('失败: ' + error))
p1.finally(() => console.log('嘻嘻嘻'))
console.log('-----------------------------')
let p2 = new Promise((resolve, reject) => {
setTimeout(() => {
let ran = Math.random();
ran < 0.5 ? reject(ran) : resolve(ran);
}, 1000);
});
p2.then(result => console.log('成功: ' + result))
.catch(error => console.log('失败: ' + error))
.finally(() => console.log('哈哈哈'))
练习题
let promise1 = Promise.resolve()
.then(res => console.log(1))
.then(res => console.log(2))
let promise2 = new Promise(resolve => {
setTimeout(() => {
console.log(6)
resolve()
})
}).then(res => console.log(3))
async function main() {
console.log(4)
console.log(await Promise.all([promise2, promise1]))
console.log(5)
return { obj: 5 }
}
let promise3 = Promise.resolve()
.then(res => console.log(8))
.then(res => console.log(9))
console.log(typeof main())
// 4
// object
// 1
// 8
// 2
// 9
// 6
// 3
// [ undefined, undefined ]
// 5