Promise的基本使用

Posted 2022-12-01 芜独独

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Promise的基本使用相关的知识，希望对你有一定的参考价值。

链式编程

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>

<script>
    // 使用setTimeout
    // setTimeout(() => 
    //     console.log("hello world");
    // , 2000)

    // 参数->函数(resolve,reject)
    // resolve,reject本身他又是函数

    // 链式编程
    new Promise((resolve, reject) => 
        // 第一次网络请求的代码
        setTimeout(() => 
            resolve()
        , 1000)
    ).then(() => 
        // 第一次拿到结果的代码
        console.log('hello world');
        console.log('hello world');
        console.log('hello world');
        console.log('hello world');
        console.log('hello world');

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

            return new Promise((resolve, reject) => 
                // 第三次网络请求的代码
                setTimeout(() => 
                    resolve()
                , 1000)
            ).then(() => 
                // 第三次拿到结果的代码
                console.log('hello python');
                console.log('hello python');
                console.log('hello python');
                console.log('hello python');
                console.log('hello python');
            )
        )
    )
</script>

</html>

什么情况下会用到Promise？

一般情况下是有异步操作时，使用Promise对这个异步操作进程封装.

在执行传入的回调函数时，会传入两个参数，resolve，reject，本身又是函数

使用Promise

new Promise((resolve, reject) => 
        setTimeout(() => 
            // 成功的时候调用resolve
            resolve('hello world')

            // 失败的时候调用reject
            reject('error message')
        , 1000)
    ).then((data) => 
        // 在这里处理代码
        console.log(data);
        console.log(data);
        console.log(data);
    ).catch(err =>  //箭头函数只有一个参数时小括号可以不写
        console.log(err);
    )

另一种写法

new Promise((reslove, reject) => 
    setTimeout(() => 
    reslove("hello world");
    // reject("error message")
    , 1000)
).then(data => 
    console.log(data);
   , err => 
      console.log(err);
     )

链式调用

1.网络请求:aaa=>处理10行代码
2.处理:aaa111=>自己处理10行
3.处理: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 => resolve(结果))简写
        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行代码');
        )

更简洁的方式

省略掉Promise.resolve

 // 省略掉Promise.resolve
        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行代码');
        )

注意

如果在执行过程中失败时执行reject则不执行后面的resolve

Promise的all方法

伪代码表示
同时请求成功返回一个results数组

Promise.all([
            new Promise((resolve, reject) => 
                $ajax(
                    url: 'url1',
                    success: function(data) 
                        resolve(data)
                    
                )
            ),
            new Promise((resolve, reject) => 
                $ajax(
                    url: 'url2',
                    success: function(data) 
                        resolve(data)
                    
                )
            ),
        ]).then(results => 
            results[0],
                results[1]
        )

利用setTimeout()模拟一下

 Promise.all([
            new Promise((resolve, reject) => 
                setTimeout(() => 
                    resolve(
                        name: 'JGF',
                        age: '30'
                    );
                , 2000);
            ),
            new Promise((resolve, reject) => 
                setTimeout(() => 
                    resolve(
                        name: 'MGM',
                        age: '26'
                    );
                , 1000);
            ),
        ]).then(results => 
            console.log(results);
        )

以上是关于Promise的基本使用的主要内容，如果未能解决你的问题，请参考以下文章