Vue学习六（Promise）

最新推荐文章于 2023-07-18 16:41:49 发布

噫吁嘻嘻嘻嘻

最新推荐文章于 2023-07-18 16:41:49 发布

阅读量552

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/Wu_JingYi0829/article/details/110818038

版权

一、什么是Promise

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

那我们什么时候要用到Promise呢？

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

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

二、定时器的异步事件

我们用一个定时器来模拟异步事件：

假设下面的data是从网络上1秒后请求的数据
console.log就是我们的处理方式

setTimeout(function() {
            let data = 'Hello World';
            console.log(content);
        },1000)

这是我们过去处理方式，我们将它换成Promise代码：

new Promise((resolve, reject) => {
            setTimeout(function() {
                resolve('Hello world');
                reject('Error');
            }, 1000)
        }).then(data => {
            console.log(data);
        }).catch(error => {
            console.log(error);
        })

三、Promise三种状态

首先，当我们开发中有异步操作时，就可以给异步操作包装一个Promise，异步操作之后会有三种状态：

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

四、Promise的链式调用

实现效果：
网络请求：aaa->自己处理10行代码
处理：aaa111 ->自己处理10行代码
处理：aaa111222 ->自己处理

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // wrapped into
        // 网络请求：aaa->自己处理10行代码
        // 处理：aaa111 ->自己处理10行代码
        // 处理：aaa111222 ->自己处理
        new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('aaa')
            }, 1000)
        }).then(res => {
            // 1.自己处理10行代码
            console.log(res, '第一层的10行处理代码');
            // 2.对结果进行第一次处理
            return new Promise((resolve) => {
                resolve(res + '111');
            })
        }).then(res => {
            console.log(res, '第二层的10行处理代码');

            return new Promise(resolve => {
                resolve(res + '222');
            })
        }).then(res => {
            console.log(res, '第二层的10行处理代码');
        })



        // 简写：
        new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('aaa')
            }, 1000)
        }).then(res => {
            // 1.自己处理10行代码
            console.log(res, '第一层的10行处理代码');
            // 2.对结果进行第一次处理
            return Promise.resolve(res + '111');
        }).then(res => {
            console.log(res, '第二层的10行处理代码');

            return Promise.resolve(res + '222');

        }).then(res => {
            console.log(res, '第三层的10行处理代码');
        })




        // 更简写：
        new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('aaa')
            }, 1000)
        }).then(res => {
            // 1.自己处理10行代码
            console.log(res, '第一层的10行处理代码');
            // 2.对结果进行第一次处理
            return res + '111';
        }).then(res => {
            console.log(res, '第二层的10行处理代码');

            return res + '222';

        }).then(res => {
            console.log(res, '第三层的10行处理代码');
        })
    </script>
</body>

</html>

五、Promise.all（）方法的使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 有两个网络请求1/2
        // 两个请求都需要发送过来
        // 这时候我们的做法：
        Promise.all([
            new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve('result1')
                }, 2000);
            }),
            new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve('result2')
                }, 1000);
            })
        ]).then(results => {
            console.log(results[0], results[1])//result1 result2
            console.log(results)
        })
    </script>
</body>

</html>