js之promise——以一种优雅的方式处理异步请求

最新推荐文章于 2024-09-12 08:30:00 发布

Villero

最新推荐文章于 2024-09-12 08:30:00 发布

阅读量1.1k

点赞数 1

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

本文链接：https://blog.csdn.net/qq_41580831/article/details/104593372

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1. 什么是promise?
在这里插入图片描述
2. 为什么要使用promise？

3. 基础用法
方式一：

<!DOCTYPE html>
<html>

<head></head>

<body>
    <script>
        new Promise((resolve, reject) => {
            setTimeout(() => {  // 模拟请求
                resolve();     // 请求成功时执行该函数
                reject();       //请求失败时执行该函数
            }, 2000)
        }).then(val => {   // val是请求拿到的数据，then里面是resolve函数要执行的代码
            console.log("处理我们请求1到的data数据...");
            console.log("处理我们请求1到的data数据...");
            console.log("处理我们请求1到的data数据...");
            return new Promise((resolve, reject) => { //异步中还有异步
                setTimeout(() => {
                    resolve();
                    reject();
                }, 2000)
            }).then(val => {
                console.log("处理我们请求2到的data数据...");
                console.log("处理我们请求2到的data数据...");
                console.log("处理我们请求2到的data数据...");
            }).catch(err => {
                console.log("请求2出错的错误信息...")
            })
        }).catch(err => {       // catch中是reject函数要执行的代码
            console.log("请求1出错的错误信息...");
        })
    </script>
</body>

</html>

方式二：
在then中传入两个函数，一个为resolve一个为reject

new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve("data1");
                reject("err1");
            })
        }).then(val => {
            console.log("处理我们请求1到的data数据...");
            console.log("处理我们请求1到的data数据...");
            console.log("处理我们请求1到的data数据...");
            console.log(val)
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve("data2");
                    reject("err2");
                })
            }).then(val => {
                console.log("处理我们请求2到的data数据...");
                console.log("处理我们请求2到的data数据...");
                console.log("处理我们请求2到的data数据...");
                console.log(val);
            }, err => {
                console.log(err);
            })
        }, err => {
            console.log("请求1出错的错误信息...");
            console.log(err);
        })

运行结果：
在这里插入图片描述
3. 链式调用
适用与对请求结果链式处理的情况。

4. Promise.all
适用场景：
假如有一个场景我们需要多个接口返回的数据才能完成，但是我们并不知道多个请求什么时候能够全部拿到数据。

Promise.all(
            [ // 传入一个可迭代对象
                new Promise((resolve, reject) => {
                    setTimeout(() => {
                        resolve({
                            "kobe": 18
                        });
                        // reject("err1")
                    }, 2000)
                }),

                new Promise((resolve, reject) => {
                    setTimeout(() => {
                        resolve({
                            "villero": 20
                        });
                        // reject("err2")
                    }, 2000)
                })
            ]
        ).then(results => {        // results是一个数组，results[0]就是第一个resolve中传的值
            console.log(results)
        })