Promise

2022-09-14  本文已影响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>
上一篇 下一篇

猜你喜欢

热点阅读