09-promise

最新推荐文章于 2024-10-10 10:50:43 发布

鹿其其鹿

最新推荐文章于 2024-10-10 10:50:43 发布

阅读量75

点赞数

分类专栏： vue 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_45478564/article/details/122041664

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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

什么时候会处理异步事件？

常见的场景就是网络请求
我们封装一个网络请求的函数，因为不能立即拿到结果，所以不能像简单的3+4=7一样将结果返回
所以往往我们会传入另外一个函数，在数据请求成功时，将数据通过传入的函数回调出去
如果只是ig简单的网络请求，那么这种方案不会给我们带来很大的麻烦

但是当网络请求非常复杂时，就会出现回调地狱

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>promise的基本使用</title>
</head>
<body>
    <script>
        //1.使用setTimeout
        // setTimeout(() => {
        //     console.log('Hello World');
        // },1000)

        //参数->函数(resolve,rejevt)
        //resolve和reject本身就是函数

        //链式编程

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

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

                //第三次网络请求代码
                return new Promise((resolve, reject) => {
                    setTimeout(()=>{
                        resolve()
                    },1000)
                }).then(()=>{
                    //第三次处理代码
                    console.log('python');
                    console.log('python');
                    console.log('python');
                    console.log('python');
                })
            })

        })

    </script>
</body>
</html>

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