Promise用法总结

2021-11-15  本文已影响0人  舞鹤Roc

Promise前置储备知识:

函数对象和实例对象(简称对象)
同步回调和异步回调(异步回调会将要执行代码块放入队列)
异常类型:
ReferenceError引用异常
TypeError类型异常:b?.xxxx避免
RangeError范围错误:function fn(){fn()}; fn();Uncaught RangeError: Maximum call stack size exceeded
SyntaxError语法错误
console.dir(err)打印异常详情

Promise基础:

定义:异步编程的新的解决方案,构造函数,封装一个异步操作并获取其结果。
Promise是函数对象,new Promise()是实例对象
一个 Promise 必然处于以下几种状态之一:

基础用法:

const pr = new Promise((resolve, reject) => {
    setTimeout(() => {
        if(Date.now() % 2 === 0) {
            resolve("succsss");
        } else {
            reject("failed");
        }
    }, 1000)
})

// pr.then 异步方法只会执行一次,then是取执行后的结果
pr.then(
    value => { // onResolved
        console.log("成功回调", value)
    },
    reason => { // onRejected
        console.log("失败回调", reason)
    }
)

链式调用

我们可以用 promise.then(),promise.catch() 和 promise.finally() 这些方法将进一步的操作与一个变为已敲定状态的 promise 关联起来。可以解决回调地狱问题(使用async和await也可)

// 计算(1+2)*2的立方;可将1+2,val*2,val*val*val抽象为异步方法
new Promise(resolve => {
    resolve(1 + 2);
  }).then((val) => {
    return val * 2;
  }).then((val) => {
    return val * val * val;
  }).then(val => {
    console.log("计算结果:", val);
    return val;
  }).catch(err => {
    console.log(err);
  });

静态方法Promise.all 或 Promise.race

Promise.all(iterable) 方法返回一个 promise,这个promise的resolve回调执行是在所有输入的promise的resolve回调都结束,或者输入的iterable里没有promise了的时候。它的reject回调执行是,只要任何一个输入的promise的reject回调执行或者输入不合法的promise就会立即抛出错误,并且reject的是第一个抛出的错误信息。

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values);
});
// expected output: Array [3, 42, "foo"]

Promise.race(iterable) 方法返回一个 promise,一旦迭代器中的某个promise解决或拒绝,返回的 promise就会解决或拒绝。

const promise1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 500, 'one');
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 1000, 'two');
});

Promise.race([promise1, promise2]).then((value) => {
  console.log(value);
  // Both resolve, but promise2 is faster
});
// expected output: "one"
上一篇 下一篇

猜你喜欢

热点阅读