Promise基础知识总结
Promise知识点
- 常见的JS中Error类型
- Promise是什么?
- Promise状态的改变
- Promise基础
- asyn/await的语法和使用
- JS异步之宏队列与微队列
- 为什么要用Promis
- 回调地狱如下
- 使用promise的链式调用解决回调地狱
- async/await 回调地狱终极解决方案
常见的JS中Error类型
Error: 所有错误的父类型
1、ReferenceError: 引用的变量不存在
2、TypeError: 数据类型不正确的错误
3、RangeError: 数据值不在其所允许的范围内
4、SyntaxError: 语法错误
Promise是什么?
Promise是JS中进行异步编程新的解决方案(旧的是纯回调函数)
1、从语法上来说:Promise是一个构造函数
2、从功能上来说:Promise对象用来封装一个异步操作并可以获取期结果
Promise状态的改变
1、pending 变为 resolved
2、pending 变为 rejected
promise只有2种(resolved和rejected)状态 ,且promise对象只能改变一次,无论改变成功还是改变失败,都会有一个结果数据:成功的结果一般称为value,失败的数据一般称为reason
流程
使用例子:
const p = new Promise((resolve, reject) => {//执行器函数 p.then( value => { }, reason => { } ) })
Promise基础
1、Promise构造函数: Promise (excutor) {}
excutor函数: 同步执行 (resolve, reject) => {}
resolve函数: 内部定义成功时我们调用的函数 value => {}
reject函数: 内部定义失败时我 们调用的函数 reason => {}
说明: excutor会在Promise内部立即同步回调,异步操作在执行器中执行
2、 Promise.prototype.then方法: (onResolved, onRejected) => {}
onResolved函数: 成功的回调函数 (value) => {}
onRejected函数: 失败的回调函数 (reason) => {}
说明: 指定用于得到成功value的成功回调和用于得到失败reason的失败回调返回一个新的promise对象
3、 Promise.prototype.catch方法: (onRejected) => {}
onRejected函数: 失败的回调函数 (reason) => {}
说明: then()的语法糖, 相当于: then(undefined, onRejected)
4. Promise.resolve方法: (value) => {}
value: 成功的数据或promise对象
说明: 返回一个成功/失败的promise对象
5. Promise.reject方法: (reason) => {}
reason: 失败的原因
说明: 返回一个失败的promise对象
6. Promise.all方法: (promises) => {}
promises: 包含n个promise的数组
说明: 返回一个新的promise, 只有所有的promise都成功才成功, 只要有一个失败了就直接失败
7. Promise.race方法: (promises) => {}
promises: 包含n个promise的数组
说明: 返回一个新的promise, 第一个完成的promise的结果状态就是最终的结果状态
asyn/await的语法和使用
mdn文档:
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/await
1. async 函数
函数的返回值为promise对象
promise对象的结果由async函数执行的返回值决定
2. await 表达式
await右侧的表达式一般为promise对象, 但也可以是其它的值
如果表达式是promise对象, await返回的是promise成功的值
如果表达式是其它值, 直接将此值作为await的返回值
3. 注意:
await必须写在async函数中, 但async函数中可以没有await
如果await的promise失败了, 就会抛出异常, 需要通过try…catch来捕获处理
JS异步之宏队列与微队列
宏队列:DOM事件回调,ajax回调,定时器回调
微队列:promise回调,mulation回调
为什么要用Promis
1、指定回调函数的方式更加灵活:
旧的: 必须在启动异步任务前指定
promise: 启动异步任务 => 返回promie对象 => 给promise对象绑定回调函数(甚至可以在异步任务结束后指定)
2. 支持链式调用, 可以解决回调地狱问题
什么是回调地狱?
回调函数嵌套调用, 外部回调函数异步执行的结果是嵌套的回调函数执行的条件。
这样的缺点是:不便于阅读 / 不便于异常处理。
解决方案 —— promise链式调用
终极解决方案—— async/await
回调地狱如下
例一
$.ajax({ url: "./mock/user.json", success(data) { console.log("查询用户:", data); $.ajax({ url: `./mock/user_corse_${data.id}.json`, success(data) { console.log("查询到课程:", data); $.ajax({ url: `./mock/corse_score_${data.id}.json`, success(data) { console.log("查询到分数:", data); }, error(error) { console.log("出现异常了:" + error); } }); }, error(error) { console.log("出现异常了:" + error); } }); }, error(error) { console.log("出现异常了:" + error); } });
例二
doSomething(function(result){ doSomethingElse(result,function(oneResult){ doThirdThing(newReesult,function(finalResult){ console.log(finalResult) },failureCallback) },failureCallback) },failureCallback)
使用promise的链式调用解决回调地狱
doSomething().then(function(result){ return doSomethingElse(oneResult) }).then(function(newReesult){ return doThirdThing(newReesult) }).then(function(finalResult){ console.log(finalResult) }).catch(failureCallback) //异常传递
async/await 回调地狱终极解决方案
async function requst(){ try{ const result = await doSomething() const newReesult = await doSomethingElse(result) const finalResult = await doThirdThing(newReesult) console.log(finalResult) }catch(error){ failureCallback(error) } }
- linux内核基础知识总结
- Android基础知识总结---四大组件之一ContentProvider(一)
- HP实训软件测试第一阶段测试基础知识总结
- 黑马程序员_JavaSE基础知识总结十五:反射
- osg基础知识总结
- javascript基础知识总结
- java基础知识总结-封装、继承、多态、接口、抽象类
- C/C++基础知识总结——数据的共享与保护
- 一万字java基础知识总结
- Java-Java重点基础知识总结
- python基础知识总结(不断更新。。。。)
- python编程中常用的12种基础知识总结
- 硬件解码基础知识总结
- 计算机网络基础知识总结
- 黑马程序员之基础知识总结2
- UIScrollView和UIPageControl的配合使用 - iOS - UI基础知识总结11
- Python编程中常用的12种基础知识总结
- c#基础知识总结学习
- Java基础知识总结(四)
- Java基础知识概括总结一 Java入门