您的位置:首页 > 其它

Promise基础知识总结

2020-07-30 22:15 579 查看

Promise知识点

常见的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)
}

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: