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

1. 什么是promise?
js之promise——以一种优雅的方式处理异步请求_第1张图片
2. 为什么要使用promise?
js之promise——以一种优雅的方式处理异步请求_第2张图片
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);
        })

运行结果:
js之promise——以一种优雅的方式处理异步请求_第3张图片
3. 链式调用
适用与对请求结果链式处理的情况。
js之promise——以一种优雅的方式处理异步请求_第4张图片
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)
        })

js之promise——以一种优雅的方式处理异步请求_第5张图片
如果看完本文还有不理解的可以听下Bi站视频课程,很详细的。

你可能感兴趣的:(前端,js,vue,javascript)