Promise

作者: 洪锦一 | 来源:发表于2022-09-14 09:40 被阅读0次

    Promise.resolve()

    (1) 参数是一个Promise实例,

    const result= Promise.resolve('成功.');
    // 等同于
    // const result= new Promise((resolve, reject) => resolve('成功.'))
    
    //参数是一个Promise实例
    result.then((res)=>{
       console.log(res);
    })
    

    (2) 参数是一个thenable对象

    //Promise.resolve()方法会将这个对象转为Promise对象,然后就立即执行thenable对象的then( )方法
    let thenable = {
      then: (resolve) => {
        resolve("成功");
      }
    };
    
    thenable.then(res=>{
      console.log(res);
    })
    

    Promise.reject()

    const result= Promise.reject('失败.');
    // 等同于
    // const result= new Promise((resolve, reject) => reject('失败.'))
    
    result.then(null,(err)=>{
       console.log(err);
    })
    

    Promise.finally()

    不管成功还是失败,都会执行 finally 方法

    let p1 = Promise.reject(3);
    
    let p2 = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('p2');
        }, 1000);
    })
    
    Promise.any([p1,p2]).then(res=>{
        console.log("成功",res);
    }).catch(err=>{
        console.log("失败",err);
    }).finally(()=>{
        console.log("执行完成!");             
    })
    
    // 结果:成功 p2
    // 结果:执行完成!
    

    Promise.all()

    所有函数执行完成后在执行Promise.then方法

    let p1 = Promise.resolve(3);
    
    let p2 = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve("1000s");
      }, 1000); 
    })
    
    Promise.all([p1, p2]).then(result => {
      console.log(result)
    }).catch(e => {
      console.log(e)
    });
    

    1秒后输出

    注意:1. 只要有一个 Promise 函数异常,并且没有自己的 catch 方法,就不会走 Promise.all 的 then 方法 ,会进入 Promise.all 的 catch 方法 .

    let p = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject("发生错误")
        }, 1000);
    }).then((res)=>{
        console.log("自己的",res);
    })
    
    let p2 = Promise.resolve('123')
    
    Promise.all([p, p2]).then(res => {
        console.log("成功:", res);
    }).catch((err) => {
        console.log("错误:", err);
    })
    
    // 执行结果:错误: 发生错误
    

    注意:2. 如果有一个 Promise 函数异常, 并且有自己的 catch 方法,会走 Promise.all 的 then 方法

    let p = new Promise((resolve, reject) => {
        setTimeout(() => {
            // reject("hello-err")
            resolve('hello');
        }, 1000);
    }).then((res)=>{
        console.log("执行成功",res);
    }).catch(err=>{
        console.log("执行出错",err);
    })
    
    let p2 = Promise.resolve('123')
    
    
    Promise.all([p, p2]).then(res => {
        console.log("ALL成功:", res);
    }).catch((err) => {
        console.log("ALL错误:", err);
    })
    
    //执行结果:执行成功 hello
    //执行结果:ALL成功: (2) [undefined, '123']
    

    注意:3. 如果 Promise 有自己的 then catch 方法,返回结果不会作为 Promise.all 的返回结果。如果没有会作为 Promise.all 的返回结果

    let p = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('hello');
        }, 1000);
    })
    
    let p2 = Promise.resolve('123')
    
    Promise.all([p, p2]).then(res => {
        console.log("ALL成功:", res);
    }).catch((err) => {
        console.log("ALL错误:", err);
    })
    // 执行结果:ALL成功: (2) ['hello', '123']
    

    Promise.race()

    将多个Promise实例,包装成一个新的Promise实例。与Promise.all不同的是,多个Promise实例,只要有一个率先改变,race方法就跟着改变,并返回那个率先改变的Promise实例的返回值,传递给回调函数。

    let p1 = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('p1');
        }, 1000);
    })
    
    let p2 = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('p2');
        }, 2000);
    })
    
    Promise.race([p1,p2]).then(res=>{
        console.log(res);
    }).catch(err=>{
        console.log(err);
    })
    // 执行结果:p1
    

    注意 : 只要最先执行完成的 promise 函数报错,就会执行 Promise.race 的 catch 方法,如果不报错就会执行 then 方法

    let p1 = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('p1-err');
        }, 1000);
    })
    
    let p2 = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('p2');
        }, 2000);
    })
    
    Promise.race([p1,p2]).then(res=>{
        console.log(res);
    }).catch(err=>{
        console.log(err);
    })
    // 执行结果:p1-err
    

    Promise.race 方法的参数与Promise.all 方法一样,如果不是 Promise 实例,就会先调用下面讲到的Promise.resolve()方法,将参数转为Promise实例,再进一步处理。

    let p1 = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('p1');
        }, 1000);
    })
    
    let p2 = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('p2');
        }, 2000);
    })
    
    let p3 = "我是字符串"
    
    Promise.race([p1,p2,p3]).then(res=>{
        console.log("成功:",res);
    }).catch(err=>{
        console.log("失败:",err);
    })
    //  执行结果:成功: 我是字符串
    

    Promise.any()

    Promise.any 会返回最先拿到的结果,并且是成功(resolve)的状态。不会因第一次拿到错误的结果而中断运行.如果结果都是 reject 状态,会进 Promise.any 的 catch 方法

    let p1 = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('p1');
        }, 1000);
    })
    
    let p2 = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('p2');
        }, 2000);
    })
    
    let p3 = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('p3');
        }, 3000);
    })
    
    Promise.any([p1,p2,p3]).then(res=>{
        console.log("成功",res);
    }).catch(err=>{
        console.log("失败",err);
    })
    
    // 结果:成功 p2
    

    Promise日常用法,链式调用。 resolve 成功方法 , reject失败方法。 then 成功执行 ,catch异常执行 ,finally成功失败都会执行

    <script>
        function test() {
          return new Promise((resolve, reject) => {
            // 成功
            resolve("成功信息")
            // 失败
            // reject("错误信息")
          })
        }
        
        // 方法一
        //  test().then(res=>{
        //    console.log(res);
        //  }).catch(err=>{
        //    console.log(err);
        //  }).finally(()=>{
        //    console.log("执行over");
        //  })
    
        // 方法二
        test().then(res => {
          console.log(res);
        }, (err) => {
          console.log(err);
        }).finally(() => {
          console.log("执行over");
        })
    </script>
    

    相关文章

      网友评论

          本文标题:Promise

          本文链接:https://www.haomeiwen.com/subject/bpjlnrtx.html