Promise的使用大全(请求数据和调用方法--多种写法)

最新推荐文章于 2024-05-01 15:39:40 发布

少年的舟

最新推荐文章于 2024-05-01 15:39:40 发布

阅读量4.8k

点赞数 3

分类专栏： vue 文章标签： vue.js es6

本文链接：https://blog.csdn.net/weixin_46113485/article/details/108595850

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、promise的含义和作用

Promise 异步操作之后会有三种状态
pending:等待状态，比如正在进行网络请求，或者定时器没有到时间
fullfill:满足状态，当我们主动回调了resolve时，就处于该状态，并且会回调.then()
reject：拒绝状态，当我们主动回调了reject时，就处于该状态，并且回调.catch()

二、什么情况会用到promise

一般情况下有一步请求时，使用promise对这个异步操作进行封装
new -> 构造函数（1.保存了一些状态信息 2.执行传入的函数）
在执行传入的回调函数时，会传入两个参数，resolve,reject 本身又是函数

三、promise的基本使用(都在一个html文件下执行，就可以看到效果)

第一种基本写法

new Promise((resolve,reject)=>{
        setTimeout(()=>{
            // 成功时候调用resolve
            // resolve('hello-1')

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

第二种写法，多次异步调用

new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve()
        },1000)   
    }).then(()=>{
        console.log('hello-100');

       return new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve()
            },1000)
        })
    }).then(()=>{
        console.log('hello-200');

        return new Promise((resolve,reject)=>{
            setTimeout(()=>{
            //    resolve()

            reject('error-300')
            },3000)
        })
    }).then(()=>{
        console.log('成功回调');
    }).catch(err=>{
        console.log(err);
    })

第三种写法

 new Promise((resolve,reject)=>{
        setTimeout(()=>{
            // resolve('hello-world')
            reject('error')
        },1000)
    }).then((data)=>{
        console.log(data);
    },(err)=>{
        console.log(err);
    })

四、promise的链式调用

第一种写法

      new Promise((resolve,reject)=>{
          setTimeout(() => {
              resolve('链式调用')
          }, 1000);   
      }).then((data)=>{
             console.log(data + '111');
            
             return new Promise((resolve,reject)=>{
                resolve(data+'222')
             })
      }).then(data1=>{
          console.log(data1);

             return new Promise((resolve)=>{
                 resolve(data1 + '333')
             })
      }).then(data2=>{
          console.log(data2);
      })

第二种写法

new Promise((resolve,reject)=>{
            setTimeout(()=>{
                // 请求成功时的回调
                resolve('哈哈哈')

                // 请求失败时的回调
                // reject('报错')
            })
        }).then((data)=>{
               console.log(data+'111');

               return Promise.resolve(data)
        }).then(data=>{
            console.log(data+'222');

            return Promise.resolve(data)
        }).then(data=>{
            console.log(data + '333');
        }).catch(err =>{
            console.log(err);
        })

第三种写法

new Promise(resolve=>{
            setTimeout(()=>{
               resolve('呵呵呵')
            },1000)
        }).then(data=>{
            console.log(data+'111');

            return data 
        }).then(data=>{
            console.log(data+'222');

            return data 
        }).then(data=>{
            console.log(data+'333');
        })

第四种最简写法–请求失败

new Promise((resolve,reject)=>{
            setTimeout(() => {
                resolve('啊啊啊')
            }, 1000);
        }).then(data=>{
            console.log(data);

            throw 'error-data'
        }).then(data=>{
            console.log(data);

            return new Promise((resolve,reject)=>{
                setTimeout(()=>{
                    resolve(data)
                },1000)
            })
        }).then(data=>{
            console.log(data);
        }).catch(err=>{
            console.log(err);
        })

五、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>
        Promise.all([
            new Promise((resolve,reject)=>{
                setTimeout(() => {
                    resolve('第一次请求')

                    // reject('第一次请求失败')
                }, 2000);
            }),
            new Promise((resolve,reject)=>{
                setTimeout(() => {
                    resolve('第二次请求')

                    // reject('第二次请求失败')
                }, 1000);
            })
        ]).then(result=>{
            console.log(result);  //得出数组结构：["第一次请求", "第二次请求"]
            console.log(result[0]);
            console.log(result[1]);
        }).catch(err => {
            // console.log(err);
            // console.log(err[0]);
            // console.log(err[1]);
        })
    </script>
</body>
</html>

实现的效果图
在这里插入图片描述

少年的舟

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
Promise的使用大全(请求数据和调用方法--多种写法)

一、promise的含义和作用Promise 异步操作之后会有三种状态pending:等待状态，比如正在进行网络请求，或者定时器没有到时间fullfill:满足状态，当我们主动回调了resolve时，就处于该状态，并且会回调.then()reject：拒绝状态，当我们主动回调了reject时，就处于该状态，并且回调.catch()二、什么情况会用到promise一般情况下有一步请求时，使用promise对这个异步操作进行封装new -> 构造函数（1.保存了一些状态信息 2.执行传
复制链接

扫一扫