promise使用和 async和await的使用

【一】promise基本使用(用来处理回调函数)

  • Promise对象代表一个异步操作，有三种状态：Pending（进行中）、Resolved（已完成，又称 Fulfilled）和Rejected（已失败）
  • 现实生活中对应
  • 你跟你女朋友说，5年后等我赚够500w就结婚--》定义函数
    • 1 进行中（努力赚钱，其他代码继续执行）
    • 2 成功（赚够500w---》结婚）
    • 3 失败（没赚够---》分手）

【1】代码模拟

  • 回调函数不会立刻执行
  • 主动抛异常，也是执行失败

image-20240507192739293

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
<script>
    let promise =new Promise((resolve, reject)=>{
        // resolve,reject 是两个函数
        console.log("promise 开始执行")
        // resolve("promise 执行成功")
        reject("promise 执行失败")
        // 主动抛异常，也是执行失败
        // throw new Error("error message")
    })
    console.log('11111')
    // promise.then(
    //     function(value){console.log(`promise中执行了resolve:${value}`)},
    //     function(error){console.log(`promise中执行了reject:${error}`)}
    // )
    promise.then(res=>{
        console.log(res)
    }).catch(err=>{
        console.log(err)
    })
    console.log('222222')

</script>

</html>

【二】async和await的使用

  • async 和 await 是JavaScript中用于处理异步操作的关键字，它们一起构成了异步编程的一种更简洁、更易读的模式，称为异步函数或async/await。
  • async：
    async 是一个函数修饰符，用于声明一个函数为异步函数。异步函数总是返回一个Promise，即使函数中没有显式返回值，也会隐式返回一个解析为 undefined 的Promise。
    当你调用一个异步函数时，它会立即返回一个Promise，而不会阻塞后续代码的执行。这意味着异步函数内部的代码会在后台运行，直到Promise完成或失败。
  • await：
    await 关键字只能在异步函数内部使用，用于等待一个Promise的结果。当遇到 await 关键字时，异步函数的执行会暂停，直到Promise解析（resolve）或拒绝（reject）。
    如果Promise解析，await 后面的表达式会返回Promise的结果；如果Promise拒绝，await 会抛出一个错误，除非在 try/catch 块中捕获。
    结合使用 async 和 await，你可以编写出类似于同步代码的异步代码，这使得代码更易于阅读和理解，因为它们可以按照逻辑顺序书写，而不是使用复杂的回调函数或链式 .then() 方法。
// 1  async标识函数后,async函数的返回值会变成一个promise对象
async function demo01() {
    return new Promise(function (resolve, reject) {
        // resolve,reject 是两个函数
        console.log("promise 开始执行")
        resolve("promise 执行成功")
        // reject("promise 执行失败")
        // 主动抛异常，也是执行失败
        throw new Error("error message")
    })
}

console.log('11111')

// await 关键字，必须写在async修饰的函数中
async function demo02() {
    try {
        let res = await demo01()  // 正常调用，返回promise 对象，加await 调用--》返回正常then的数据
        console.log(res)
    } catch (err) {
        console.log('出错了')
    }

}

demo02()  // 它会等正常执行完成才会调用
console.log('222222')
posted @ 2024-05-08 19:04  -半城烟雨  阅读(46)  评论(0)    收藏  举报