🌈🌈文章目录
Promise
promise状态
Promise总是处于以下三种状态之一：
状态有一些特性：
Promise.prototype.then
Promise.prototype.catch
等价于Promise.prototype.then(null,onRejected)
Promise.prototype.finally
无论状态是fulfilled/resolved还是rejected都会执行，但无法得知具体的状态（状态无关），一般主要用于清理工作
执行次序
示例1
const p = new Promise(resolve => {
console.log('1. excute promise');
setTimeout(() => {
console.log('3. before resolve')
resolve();
console.log('4. after resolve')
}, 100);
})
p.then(() => {
console.log('5. execute resolve')
}).then(()=>{
console.log('6. then2')
}).then(()=>{
console.log('7. then3')
}).finally(()=>{
console.log('8. finally')
});
console.log('2. sync then')
/**
result:
1. excute promise
2. sync then
3. before resolve
4. after resolve
5. execute resolve
6. then2
7. then3
8. finally
*/
示例2
const p = new Promise(resolve => {
setTimeout(() => {
resolve();
}, 100);
})
p.then(()=>{
console.log('then1')
}).then(()=>{
console.log('then2')
}).then(()=>{
console.log('then3')
}).then(()=>{
console.log('then4')
}).then(()=>{
console.log('then5')
});
console.log('async then')
/**
result:
async then
then1
then2
then3
then4
then5
*/
这个示例中then1、then2、then3、then4、then5相当于是同步执行的
链式调用
es6规范不支持Promise终止与进度查询，原因是这样会使得Promise变得过于复杂。
链式传值
const p = new Promise(resolve => {
setTimeout(() => {
resolve(100);
}, 100);
})
p.then(value => {
console.log(value)
return value + 1;
}).then(value => {
console.log(value)
return new Promise(resolve => {
setTimeout(() => {
resolve(value + 1)
}, 3000);
});
}).then(value => {
console.log(value)
return value + 1;
}).then(value => {
console.log(value)
return value + 1;
}).then(value => {
console.log(value)
return value + 1;
});
/**
100
101
102 等待3秒
103
104
*/
catch对调用链的影响
catch处在最后
const p = new Promise(resolve => {
setTimeout(() => {
resolve(100);
}, 100);
})
p.then(value => {
console.log(value)
return value + 1;
}).then(value => {
console.log(value)
return new Promise((resolve, reject) => {
setTimeout(() => {
reject('fail')
}, 3000);
});
}).then(value => {
console.log(value)
return value + 1;
}).then(value => {
console.log(value)
return value + 1;
}).then(value => {
console.log(value)
return value + 1;
}).catch(err => {
console.log('catch', err);
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(400)
}, 3000);
});
});
/**
100
101
catch fail
*/
当catch处在调用链最后的时候，则reject后续的then将不会被触发
catch处在中间
const p = new Promise(resolve => {
setTimeout(() => {
resolve(100);
}, 100);
})
p.then(value => {
console.log(value)
return value + 1;
}).then(value => {
console.log(value)
return new Promise((resolve, reject) => {
setTimeout(() => {
reject('fail')
}, 3000);
});
}).then(value => {
console.log(value)
return value + 1;
}).catch(err => {
console.log('catch', err);
return 500;
}).then(value => {
console.log(value)
return value + 1;
}).then(value => {
console.log(value)
return value + 1;
});
/**
100
101
catch fail
*/
catch处在调用链中间，如果返回的不是一个Promise对象，后续的then将不会被触发
async & await
async
语法：
async function name([param[, param[, ... param]]]) {
statements
}
async function foo() {}
let bar = async function () {}
let baz = async () => {}
class Person{
async say(){}
}
异步函数如果使用return关键字返回了值，则这个值会被Promise.resolve()包装成一个Promise对象：
async function test() {
return 2;
}
test().then(value => {
console.log(value)
})
console.log(1)
/**
1
2
*/
如果函数体中抛出了异常，可以用catch处理：
async function test() {
const result = 100 / a;
return result;
}
test().catch(value => {
console.log(value)
})
console.log(1)
/**
1
ReferenceError: a is not defined
*/
async function test() {
return Promise.reject('error');
}
test().catch(value => {
console.log(value)
})
console.log(1)
/**
1
error
*/
await
语法：
在用法上，await可以单独使用，也可以在表达式中使用：
async function func(){
console.log(await Promise.resolve('foo'))
}
func();
/**
foo
*/