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)
    }

}