网站精美排版代码,做网站项目后台的,短链接生成方案,抖音企业服务平台Promise是es6引入的异步编程新解决方案#xff0c;Promise实例和原型上有reject、resolve、all、then、catch、finally等多个方法#xff0c;语法上promise就是一个构造函数#xff0c;用来封装异步操作并可以获取其成功或失败的结果#xff0c;本篇文章主要介绍了ES6中的P… Promise是es6引入的异步编程新解决方案Promise实例和原型上有reject、resolve、all、then、catch、finally等多个方法语法上promise就是一个构造函数用来封装异步操作并可以获取其成功或失败的结果本篇文章主要介绍了ES6中的Promise对象与async和await方法创作不易如果能帮助到带大家欢迎收藏关注 哦 文章目录
Promise
promise状态
Promise.prototype.then
Promise.prototype.catch
Promise.prototype.finally
执行次序
示例1
示例2
链式调用
链式传值
catch对调用链的影响
catch处在最后
catch处在中间
async await
async
await
Promise
promise状态
Promise总是处于以下三种状态之一 pending初始状态fulfilled/resolved表示成功rejected表示失败 状态有一些特性 只能通过执行函数修改外部无法读取外部无法修改 Promise.prototype.then 为Promise实例添加处理程序的主要方法接收的两个参数分别表示进入fulfilled/resolved或rejected状态时被调用且二者互斥。两个参数可选但必须是函数类型非函数类型会被忽略。一个Promise实例可以有任意多个处理程序任意多个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相当于是同步执行的
链式调用 then的链式调用是Promise最常见的用法具体方式是每个执行器返回一个Promise实例则后续每个then都会等待前一个落定后再执行即异步的串行化。以此来解决异步的回调地狱难题。 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
*/如果执行函数返回的是一个Promise对象则后续的调用会等待该对象落定后触发通过resolve方式传值如果不是则后续立即触发通过return语句向后传值 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
}name函数名称param要传递给函数的参数的名称statements包含函数主体的表达式可以使用await机制返回值一个Promise这个Promise要么会通过一个由async函数返回的值被解决要么会通过一个从async函数中抛出的或其中没有被捕获到的异常被拒绝 async关键字用于声明异步函数可以用在函数声明、函数表达式、箭头函数、方法上 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
*/一些资料中会说拒绝Promise的异常不被异步函数捕获但在最新版的Chrome95.0.4638.69、Microsoft Edge95.0.1020.40、Firefox93.0都是支持的 async function test() {return Promise.reject(error);
}
test().catch(value {console.log(value)
})
console.log(1)
/**
1
error
*/await
语法 [返回值] await 表达式; 表达式一个Promise对象或者任何要等待的值返回值返回Promise对象的处理结果。如果等待的不是Promise对象则返回该值本身 在用法上await可以单独使用也可以在表达式中使用
async function func(){console.log(await Promise.resolve(foo))
}
func();
/**
foo
*/await只能在async函数内顶层使用不支持嵌套 在使用多个await关注其结果忽视其顺序有时候是个好事因为不同的规范对于await处理Promise是有差异的。 个人简介某大型国企高级前端开发工程师7年研发经验信息系统项目管理师、CSDN优质创作者、阿里云专家博主华为云云享专家分享前端后端相关技术与工作常见问题~ 作 者码喽的自我修养❣️ 专 栏JavaScript深入研究 若有帮助还请 关注➕点赞➕收藏 不行的话我再努努力 更多专栏订阅推荐 前端工程搭建 vue从基础到起飞 ✈️ HTML5与CSS3 ⭐️ uniapp与微信小程序 前端工作常见问题汇总 ✍️ GIS地图与大数据可视化
