promise

最新推荐文章于 2024-11-16 14:11:26 发布

MDR_0820

最新推荐文章于 2024-11-16 14:11:26 发布

阅读量544

点赞数

分类专栏： vue ES6 文章标签： javascript 前端 es6

本文链接：https://blog.csdn.net/MDR_0820/article/details/121490015

版权

ES6 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

vue

2 篇文章 0 订阅

订阅专栏

promise 是异步编程的一种解决方案

Promise对象表示异步操作的最终完成（或失败）及其结果值
promise 三种状态

pending：等待状态，比如正在进行网路请求或者定时器没有到时间
fulfill ：满足状态当我们主动回调了 resolve时就处于该状态并且会回调 .then（）
reject：拒绝状态当我们主动回调reject时就处于该状态并且会回调.catch（）

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        // 使用setTimeout
        setTimeout(()=>{  //异步操作
            console.log('异步操作')
        },1000)


        // 什么情况下用到 promise？
        // 一般情况下 是有异步操作时 使用promise 对这个异步操作进行封装

        //resolve, reject 他们本身又是函数
        //链式编程
        new Promise((resolve, reject) =>{
            //第一次网络请求
            setTimeout(()=>{  //异步操作
                resolve()
            },1000)
            // 处理代码
        }).then(()=>{
            // 第一次拿到结果的处理代码
            console.log('hello')
            console.log('hello')
            console.log('hello')

            return new Promise((resolve, reject)=>{
                // 第二次网络请求代码
                setTimeout(()=>{
                    resolve()
                },1000)
            })
        }).then(()=>{
            // 第二次拿到结果的处理代码
            console.log('hello World')
            console.log('hello World')
            console.log('hello World')

            return new Promise((resolve, reject)=>{
                setTimeout(()=>{
                    resolve()
                },1000)
            })
        });


        new Promise(( resolve, reject)=>{
            setTimeout(()=>{
                // 成功的时候用 resolve
                // resolve('hello')
                // 失败的时候用 reject
                reject('error message')
            },1000)
        }).then(data=>{  // 处理成功的代码
            console.log(data)
            console.log(data)
        }).catch(err=>{   //处理失败的代码
            console.log(err)
            console.log(err)
            console.log(err)
        })


        // promise 另外=>{处理方式
        
        new Promise((resolve, reject)=>{
            setTimeout(()=>{
                // 成功
                // resolve('data')
                // 失败
                reject('err')
            },1000)
        }).then((data)=>{
            console.log(data)
        },err=>{
            console.log(err)
        })
    </script>
</body>
</html>

在这里插入图片描述

方法promise.then()、promise.catch()和promise.finally()用于将进一步的操作与已解决的承诺相关联。
该.then()方法最多接受两个参数；第一个参数是承诺的已解决案例的回调函数，第二个参数是被拒绝案例的回调函数。每个都.then()返回一个新生成的 promise 对象，可以选择性地用于链接；