浅谈Promise

最新推荐文章于 2024-04-07 16:08:17 发布

奔波儿灞...

最新推荐文章于 2024-04-07 16:08:17 发布

阅读量327

点赞数 1

文章标签：前端 javascript es6

本文链接：https://blog.csdn.net/mrszhang111/article/details/126879669

版权

1.什么是promise

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。

所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。

Promise的出现主要是为了帮助我们解决回调地狱的问题，其本身也是一个构造函数。

创建一个promise实例

  let pro=new Promise((resolve,reject)=>{
            // 测试异步
            setTimeout(() => {
                console.log("第一");
                resolve('123')
            }, 1000);
     })
         console.log("第二");

其执行过程是：首先执行了一个同步操作输出“第二”，然后执行了一个异步操作，也就是setTimeout，2秒后，输出“第一”，并且调用resolve方法。

2.Promise的特点是什么？

Promise对象有以下两个特点。

（1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。

（2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

什么时候状态为pending（进行中）

写一个promise的空实例对象

    let pro=new Promise((resolve,reject)=>{
             
     })
        console.log(pro);

可以看出promise的状态是pending

什么时候是 fulfilled（已成功）的状态？

  let pro=new Promise((resolve,reject)=>{
             resolve("promise状态为成功")
     })
        console.log(pro);

可以看出promise的状态已经转化为fulfilled（成功状态了）并且PromiseResult的已经被赋值。

什么时候状态为失败呢？

  let pro=new Promise((resolve,reject)=>{
             reject("promise状态为失败")
     })
        console.log(pro);

可以看出promise的状态已经变为rejected（失败）

那么当promise的状态为fulfilled（成功）时我们能够做什么

  let pro = new Promise((resolve, reject) => {
            resolve("promise状态为成功")
        }).then((val) => {
            console.log(1);
            console.log(val);
        }).then(() => {
            console.log(2);
        }).then(val => {
            console.log(3);

        })
        console.log(pro);

可以看出当 promise的状态为fulfilled时候执行了.then方法，then方法是一个函数接受一个参数是接受resolve返回的数据这事就输出了‘要返回的数据可以任何数据例如接口返回数据’，并且then执行的是一个回调也是一个promise实例对象，并且then的参数已经成功赋值给了[[PromiseResult]]

那么当promise的状态为rejieted（失败）时？

  let pro = new Promise((resolve, reject) => {
            reject("promise状态为失败")
        }).then((val) => {
            console.log(1);
            console.log(val);
        }).then(() => {
            console.log(2);
        }).then(val => {
            console.log(3);

        }).catch(()=>{
             console.log("失败");
        })

在then的链式调用中只要有一个出现问题，后面的都不执行，而是执行了catch方法

catch方法的作用：1 捕获.then链式调用中的错误（状态为rejected）。2.处理 promise对象的已经拒绝的状态

then方法

then方法的作用就是1.当peomise的处理状态变为已接受的状态时的方法2.获取p中[[PromiseResult]]的赋值3.实参二：处理已拒绝状态的业务（不常用）

优势：支持链式调用

弊端：then 停不下来

  let p = new Promise((resolve,reject)=>{
            resolve(123)
            // reject()
        })

  let p1 =  p.then((res)=>{
            console.log(res);
            return '给p1.[[PromiseResult]]赋值'
        },()=>{
            console.log('reject');
        })
        console.log(p1);

从上面代码中可以看出

then 回调函数的形参作用是什么？是获取p.[[PromiseResult]]的值

then的返回值是什么？是给[[PromiseResult]]赋值的。

then中回调函数的作用是什么？是当promise的状态为成功状态时，要执行的业务

then 回调函数return的作用是什么？是p.then() 的返回值

catch方法

与Promise对象方法then方法并行的一个方法就是catch,与try catch类似，catch就是用来捕获异常的，也就是和then方法中接受的第二参数rejected的回调是一样的。

Promise.all方法

Promise.all()方法用于将多个 Promise 实例，包装成一个新的 Promise 实例对象

作用：

可以同时触发多个promise，用于处理并发任务，等多个异步都结束的在执行下一个任务

 let p = new Promise((resolve,reject)=>{
            console.log('第一个异步任务开始了');
            setTimeout(() => {
                resolve('第一次异步结果')
            }, 1000);
        })
        let p2 = new Promise((resolve,reject)=>{
            console.log('第二个异步任务开始了');
            setTimeout(() => {
                resolve('第二次异步结果')
                // reject()
            }, 2000);
        })
        let p3 = new Promise((resolve,reject)=>{
            console.log('第三个异步任务开始');
            setTimeout(() => {
                resolve('第三次异步结果')
            }, 3000);
        })
  Promise.all([p,p2,p3]).then(arr=>{
            // arr 数组
            // 数组元素：对应的promise对象.[[PromiseResult]]
            console.log('三个异步都结束了');
            console.log(arr);
      
        }

可以看出当promise的状态为成功时全部调用了then方法

那么当promise中有一个状态为rejected时会发生什么？

 let p = new Promise((resolve,reject)=>{
            console.log('第一个异步任务开始了');
            setTimeout(() => {
                resolve('第一次异步结果')
            }, 1000);
        })
        let p2 = new Promise((resolve,reject)=>{
            console.log('第二个异步任务开始了');
            setTimeout(() => {
               
                reject(“状态失败啦”)
            }, 2000);
        })
        let p3 = new Promise((resolve,reject)=>{
            console.log('第三个异步任务开始');
            setTimeout(() => {
                resolve('第三次异步结果')
            }, 3000);
        })
  Promise.all([p,p2,p3]).then(arr=>{
            // arr 数组
            // 数组元素：对应的promise对象.[[PromiseResult]]
            console.log('三个异步都结束了');
            console.log(arr);
      
        }.catch(()=>{
               console.log("有一个失败了")
            })