ES6---Promise 3: Promise状态和状态中转
- 1. JavaScript是单线程，多任务机制
- 2. 理解Promise任务队列
- 3. 真正的理解Promise状态的变化
- 4. Promise状态中转
- 5. 该执行什么方法
- 6. 语法糖
-
7. 模拟多任务的工作
前端作用：给用户一个交互接口访问后端数据
看如下代码和打印出的结果来逐一理解
1.
var p1 = new Promise((resolve, reject) => { }).then(result => { }, error => { }); console.log(p1); //pending
console: pending状态
2.
var p1 = new Promise((resolve, reject) => { resolve('成功'); }).then(result => { }, error => { }); console.log(p1); //resolved
console: resolved状态
3.
var p1 = new Promise((resolve, reject) => { // resolve('成功'); reject('成功'); }).then( null, () => { } );
console:
4.
var p1 = new Promise((resolve, reject) => { // resolve('成功'); reject('成功'); }).then(result => { }, error => { }); console.log(p1);
console:
5.
var p1 = new Promise((resolve, reject) => { // resolve('成功'); reject('成功'); }); var p2 = p1.then( result => { }, error => { } ); console.log(p1); console.log(p2);
console: 可以看出，then也是一个promise
6.
var p1 = new Promise((resolve, reject) => { // resolve('成功'); reject('成功'); }); var p2 = p1.then( result => { }, error => { console.log('aaa'); } ); console.log(p1); console.log(p2);
console:
7.
var p1 = new Promise((resolve, reject) => { // resolve('成功'); console.log('1'); reject('成功');//主线程代码 }); var p2 = p1.then( result => { }, error => { console.log('aaa'); } );//then肃然也是个promise但属于微任务队列 console.log('2'); console.log(p1);//p1执行了吗？答案是执行了，状态是rejected console.log(p2);//p2执行了吗？答案是没有。状态是pending
console: 注意执行顺序
8.
var p1 = new Promise((resolve, reject) => { // resolve('成功'); console.log('1'); reject('成功');//主线程代码 }); var p2 = p1.then( result => { }, error => { console.log('aaa'); } );//then肃然也是个promise但属于微任务队列 console.log('2'); console.log(p1);//p1执行了吗？答案是执行了，状态是rejected //把这个任务丢到任务队列，等1秒，代码继续只能给 setTimeout(() => { console.log(p2);//p2执行了吗？答案-->执行了 }, 1000);
console: 此时p2的状态是resolved, 成功执行了
9.
var p1 = new Promise((resolve, reject) => { // resolve('成功'); console.log('1');//主线程代码 resolve('我成功了');//主线程代码 }); var p2 = p1.then( result => { console.log(result); }, //then会判断p1的状态是resolve,就执行result()代码 //这里result输出的是发通知出来的字符串‘我成功了’ error => { console.log('aaa'); } );
console:
then会判断p1的状态是resolve, 就执行result()代码
这里result输出的是发通知出来的字符串‘我成功了’
所以console打印出来的结果如下：
10.
var p1 = new Promise((resolve, reject) => { resolve('p1 成功'); }).then(null, null); var p2 = new Promise((resolve, reject) => { resolve('p2 成功'); }).then(result => { console.log(result); //p2 成功 }, error => { });
console:
11.
var p1 = new Promise((resolve, reject) => { resolve('p1 成功'); }).then(result => { console.log('微任务的' + result); //微任务的p1成功 }); var p2 = new Promise((resolve, reject) => { resolve('p2 成功'); }).then(result => { console.log('微任务的' + result); //微任务的p2 成功 }, error => { });
console:
12.
var p1 = new Promise((resolve, reject) => { resolve('p1 成功'); }); var p2 = new Promise((resolve, reject) => { resolve(p1);//resolve一个没有then的promise对象，而不是字符串 }).then(result => { console.log('微任务2的:' + result); //微任务的p2 成功 }, error => { });
console:
13.
var p1 = new Promise((resolve, reject) => { resolve('p1 成功'); }).then(() => { }); var p2 = new Promise((resolve, reject) => { resolve(p1); }).then(result => { console.log('微任务2的:' + result); //微任务的p2 成功 }, error => { });
console:
14. 状态中转, 该执行什么方法
var p1 = new Promise((resolve, reject) => { reject('我是promise1 发出拒绝'); });//此时p1的状态是什么？ 答案是rejected var p2 = new Promise((resolve, reject) => { //resolve没有then的promise对象，而不是字符串 console.log(p1); //状态rejected resolve(p1); //考虑p1的状态? rejected失败 }).then(result => { console.log('微任务2-成功:' + result); }, error => { console.log('微任务2-失败:' + error); });
console:
15. 状态一旦确定了，就不可逆
var p1 = new Promise((resolve, reject) => { reject('我是promise1 发出拒绝');//主线程 resolve('我是promise1 发出成功');//主线程 执行了，但有没有用？ console.log('8888'); //主线程 });//此时p1的状态是什么？ 答案是rejected //状态一旦确定了，就不可逆 var p2 = new Promise((resolve, reject) => { //resolve没有then的promise对象，而不是字符串 console.log(p1); //状态rejected resolve(p1); //考虑p1的状态? 失败 }).then(result => { console.log('微任务2-成功:' + result); }, error => { console.log('微任务2-失败:' + error); });
console: 8888打印了，说明resolve()执行了，但是没有用而已
问上面有几个promise?答案是3个promise。可写成这样：
var p1 = new Promise((resolve, reject) => { reject('我是promise1 发出拒绝'); resolve('我是promise1 发出成功'); console.log('8888'); //8888 }); var p2 = new Promise((resolve, reject) => { console.log(p1); //p1状态 rejected resolve(p1); //考虑p1状态=> 失败 }); var p3 = p2.then(result => { console.log('微任务2-成功:' + result); }, error => { console.log('微任务2-失败:' + error); //微任务2-失败：我是promise1 发出拒绝 })
16. 继续看下p1 p2 p3状态
var p1 = new Promise((resolve, reject) => { reject('我是promise1 发出拒绝'); }); var p2 = new Promise((resolve, reject) => { console.log(p1); //p1状态 rejected resolve(p1); //考虑p1状态=> 失败 }); var p3 = p2.then(result => { console.log('微任务2-成功:' + result); }, error => { console.log('微任务2-失败:' + error); //微任务2-失败：我是promise1 发出拒绝 }) //看下p1 p2 p3状态 setTimeout(() => { console.log(p1); console.log(p2); console.log(p3); }, 0);
console:
17.
var p1 = new Promise((resolve, reject) => { console.log(1);//打印1 setTimeout(() => { reject('我是promise1 发出拒绝'); }, 5000);//丢到宏任务，等微任务队列执行完执行代码 }); var p2 = new Promise((resolve, reject) => { console.log(2);//打印2 console.log(p1); //在主线程 打印promise1的状态 resolve(p1); //等p1发出通知（等到主线程全部执行完，执行宏任务）必须等，且确保p1的状态已经确认 }).then(result => { console.log('微任务2-成功:' + result); }, error => { console.log('微任务2-失败:' + error); //最后打印 })
console:
=> 等=> 