共计 2508 个字符，预计需要花费 7 分钟才能阅读完成。

Promise 是什么

1. 抽象表达：
   • Promise 是一门新的技术（ES6规范）
   • Promise 是JS中进行异步编程的新解决方案（旧方案是单纯使用回调函数）
2. 具体表达：
   • 从语法上来说：Promise 是一个构造函数
   • 从功能上来说：Promise 对象用来封装一个异步操作并可以获取其成功/失败的结果值

为什么要用 Promise

指定回调函数的方式更加灵活

1. 旧的：必须在启动异步任务前指定
2. promise：启动异步任务 => 返回 promise 对象 => 给 promise 对象绑定回调函数（甚至可以在异步任务结束后指定/多个）

支持链式调用，可以解决回调地狱问题

1. 什么是回调地狱： 回调函数嵌套调用，外部回调函数异步执行的结果是嵌套的回调执行的条件

Promise

Promise 工作流程

$('#btn').on('click', function () {
    /* let num = rand(1, 100)
    console.log(num)
    setTimeout(function () {
        if (num > 30) {
            alert('中奖')
        } else {
            alert('再接再厉')

        }
    }, 2000) */



    // resolve 解决 函数类型的数据
    // reject 拒绝 函数类型的数据
    const p = new Promise((resolve, reject) => {
        let num = rand(1, 100)
        console.log(num)
        setTimeout(() => {
            if (num > 30) {
                resolve(num) // 将 promise 对象的状态设置为 成功
            } else {
                reject(num) // 将 promise 对象的状态设置为 失败
            }
        }, 2000)
    })

    // 调用then方法
    // value 值
    // reason 理由
    p.then((value) => {
        alert('恭喜中奖，中奖号码是：' + value)
    }, (reason) => {
        alert('再接再厉，号码是：' + reason)
    })
})

Promise API

1. Promise 构造函数：Promise(excutor) { }
   • excutor 函数：执行器 (resolve, reject) => { }
   • resolve 函数：内部定义成功时调用的函数 value => { }
   • reject 函数：内部定义失败时调用的函数 reason => { }

说明：executor 会在 Promise 内部立即同步调用，异步操作在执行器中执行

2. Promise.prototype.then 方法：(onResolved, onRejected) => { }
   • onResolved 函数：成功的回调函数 (value) => { }
   • onRejected 函数：失败的回调函数 (reason) => { }

说明：指定用于得到成功value的成功回调和用于得到失败 reason 的失败回调，返回一个新的 promise对象

3. Promise.prototype.catch方法：(onRejected) => { }
   • onRejected 函数：失败的回调函数 (reason) => { }
4. Promise.all 方法：(promise) => { }
promise：包含n个 promise 的数组

说明：返回一个新的 promise，只有所有的 promise 都成功才成功，只要有一个失败就失败

let p1 = new Promise((resolve, reject) => {
    resolve('OK')
})
let p2 = Promise.resolve('Success')
let p3 = Promise.resolve('Oh Yeah')
// let p3 = Promise.reject('Error')

const result = Promise.all([p1, p2, p3])
console.log(result)

5. Promise.race 方法：(promise) => { }
promise：包含n个 promise 的数组

说明：返回一个新的promise，第一个完成的promise的结果状态就是最终的结果状态

中断 Promise 链条

let p = new Pormise((resolve, reject) => {
    setTimeout(() => {
        resolve('OK')
    },1000)
})

p.then(value => {
    console.log(111)
    // 中断Promise链条
    return new Promise(() => {})
}).then(value => {
    console.log(222)
}).then(value => {
    console.log(333)
}).catch(reason => {
    console.warn(reason)
})

async 函数

1. 函数的返回值为 promise 对象
2. promise 对象的结果由 async 函数的返回值决定

async function main() {
    /*
    1. 如果返回值是一个非Promise 类型的数据
    return 520
    2. 如果返回值是 Promise 类型的数据
    retrun new Pormise((resolve, reject) => {
        // resolve('OK')
        reject('Error')
    })
    3. 抛出异常
    throw "erro"
    */
}
let result = main()
console.log(result)

await 函数

1. await 右侧的表达式一般为 promise 对象，但也可以是其他的值
2. 如果表达式是promise 对象，await 返回的是 promise 成功的值
3. 如果表达式是其他值，直接将此值作为 await 的返回值

async function main() {
    let p = new Promise((resolve, reject) => {
        // resolve('OK')
        reject('Error')
    })
    // 1. 右侧为 promise 对象的情况
    let res = await p // OK
    // 2. 右侧为其他类型的数据
    let res = await 66 // 66
    // 3. 如果 promise 是失败的状态
    try{
        let rse = await p
    }catch(e){
        console.log(e) // Error
    }
}

main()

1. await 必须写在 async 函数中，但 async 函数中可以没有 await
2. 如果 await 的 promise失败了，就会抛出异常，需要通过 try...catch 捕捉处理