从零开始的Promise（二）

芒果炒香菜
432 阅读3分钟

从零开始的Promise（一）

从零开始的Promise（三）

3.Promise API

1. Promise 构造函数：Promise(executor) {}

executor 函数：同步执行 (resolve, reject) => {}

resolve 函数：内部定义成功时调用的函数 resove(value)

reject 函数：内部定义失败时调用的函数 reject(reason)

说明：executor 是执行器，会在 Promise 内部立即同步回调，异步操作 resolve/reject 就在 executor 中执行

2. Promise.prototype.then 方法：p.then(onResolved, onRejected)【这个方法属于promise实例对象】

指定两个回调（成功+失败）

onResolved 函数：成功的回调函数 (value) => {}

onRejected 函数：失败的回调函数 (reason) => {}

说明：指定用于得到成功 value 的成功回调和用于得到失败 reason 的失败回调，返回一个新的 promise 对象

3. Promise.prototype.catch 方法：p.catch(onRejected)【这个方法属于promise实例对象】

指定失败的回调

1）onRejected 函数：失败的回调函数 (reason) => {}

说明：这是then() 的语法糖，相当于 then(undefined, onRejected)

new Promise((resolve, reject) => { // excutor执行器函数
 setTimeout(() => {
   if(...) {
     resolve('成功的数据') // resolve()函数
   } else { 
     reject('失败的数据') //reject()函数
    }
 }, 1000)
}).then(
 value => { // onResolved()函数
  console.log(value) // 成功的数据
}
).catch(
 reason => { // onRejected()函数
  console.log(reason) // 失败的数据
}
)

image.png

.catch()作用等于下面，.finally不管成功与否都会执行

image.png

4. Promise.resolve 方法：Promise.resolve(value)【这个方法属于promise函数对象】

value：将被 Promise 对象解析的参数，也可以是一个成功或失败的 Promise 对象

说明：返回一个带着给定值解析过的 Promise 对象，如果参数本身就是一个 Promise 对象，则直接返回这个 Promise 对象。

  1. 如果传入的参数为 非Promise类型的对象, 则返回的结果为成功promise对象
let p1 = Promise.resolve(521);
console.log(p1); // Promise {<fulfilled>: 521}
  1. 如果传入的参数为 Promise 对象, 则参数的结果决定了 resolve 的结果
let p2 = Promise.resolve(new Promise((resolve, reject) => {
    // resolve('OK'); // 成功的Promise，则resolve的结果就是成功的
    reject('Error');// 失败的Promise，则resolve的结果就是失败的
}));
console.log(p2);
//如果传入失败的promise对象会报错，用catch捕获解决
p2.catch(reason => {
    console.log(reason);
})

代码实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise API - resolve</title>
</head>
<body>
    <script>
       //如果传入的参数为 非Promise类型的对象, 则返回的结果为成功promise对象
      let p1 = Promise.resolve(521);
      //如果传入的参数为 Promise 对象, 则参数的结果决定了 resolve 的结果
      let p2 = Promise.resolve(
        new Promise((resolve, reject) => {
          // resolve("OK");
          reject("Error");
        })
      );
      console.log(p1);
      console.log(".........................");
      console.log(p2);
      p2.then((value) => {
        console.log(value);
      }).catch((reason) => {
        console.log(reason);
      });
    </script>
</body>
</html>

image.png

5. Promise.reject 方法：Promise.resolve(reason)【这个方法属于promise函数对象】

reason：失败的原因

说明：返回一个失败的 promise 对象，返回的值为传入的值

let p = Promise.reject(521);
let p2 = Promise.reject('iloveyou');
let p3 = Promise.reject(new Promise((resolve, reject) => {
    resolve('OK');
}));

console.log(p);
console.log(p2);
console.log(p3);

image.png

  • Promise.resolve()/Promise.reject() 方法就是一个语法糖
  • 用来快速得到Promise对象
//产生一个成功值为1的promise对象
new Promise((resolve, reject) => {
 resolve(1)
})
//相当于
const p1 = Promise.resolve(1)

const p2 = Promise.resolve(2)
const p3 = Promise.reject(3)

p1.then(value => {console.log(value)}) // 1
p2.then(value => {console.log(value)}) // 2
p3.catch(reason => {console.log(reason)}) // 3

6. Promise.all 方法：Promise.all(iterable)【这个方法属于promise函数对象】

iterable：包含 n 个 promise 的可迭代对象，如 Array 或 String

说明：返回一个新的 promise，只有所有的 promise 都成功才成功，只要有一个失败了就直接失败

  • Promise.all()所有任务都完成后， 能得到所有结果，得到的结果是一个数组。数组结果的顺序与Promise.all（[数组]）的顺序一致。
let p1 = new Promise((resolve, reject) => {
  resolve('OK');
})
let p2 = Promise.resolve('Success');
let p3 = Promise.resolve('Oh Yeah');

const result = Promise.all([p1, p2, p3]);
console.log(result);
//成功时得到的结果为所有promise对象的成功结果组成的数组

image.png

let p1 = new Promise((resolve, reject) => {
  resolve('OK');
})
let p2 = Promise.reject('Error');
let p3 = Promise.resolve('Oh Yeah');

const result = Promise.all([p1, p2, p3]);
console.log(result);
//失败时得到的结果是在这个数组中失败的promise对象的结果

image.png

 <script>
        const p1 = Promise.resolve(1)
        const p2 = Promise.resolve(2)
        const p3 = Promise.reject(3)

        const pAll = Promise.all([p1, p2, p3])
        const pAll2 = Promise.all([p1, p2])
        //因为其中p3是失败所以pAll失败
        pAll.then(
            value => {
                console.log('all onResolved()', value)
            },
            reason => {
                console.log('all onRejected():', reason)
            }
        )
        // all onRejected() 3
        pAll2.then(
            values => {
                console.log('all onResolved():', values)
            },
            reason => {
                console.log('all onRejected()', reason)
            }
        )
        // all onResolved() [1, 2]

    </script>

image.png

7. Promise.race方法：Promise.race(iterable)

iterable：包含 n 个 promise 的可迭代对象，如 Array 或 String

说明：返回一个新的 promise，第一个完成的 promise 的结果状态就是最终的结果状态

  • Promise.race()只会得到(打印)第一个返回的结果，但其余结果也会返回(不打印)。 谁先完成就输出谁(不管是成功还是失败)
 <script>
        // 谁先完成就输出谁(不管是成功还是失败)
        const p1 = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(1)
            }, 1000)
        })
        const p2 = Promise.resolve(2)
        const p3 = Promise.reject(3)
        const pRace = Promise.race([p1, p2, p3])
        pRace.then(
            value => {
                console.log('race onResolved()', value)
            },
            reason => {
                console.log('race onRejected()', reason)
            }
        )
                //race onResolved() 2
    </script>

image.png

 <script>
        let p1 = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('OK');
            }, 1000);
        })
        let p2 = Promise.resolve('Success');
        let p3 = Promise.resolve('Oh Yeah');

        //调用
        const result = Promise.race([p1, p2, p3]);
        console.log(result);
    </script>

image.png

8. 总结

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        /*
            1. Promise 构造函数: Promise (excutor) {}
            excutor 函数: 同步执行 (resolve, reject) => {}
            resolve 函数: 内部定义成功时我们调用的函数 value => {}
            reject 函数: 内部定义失败时我们调用的函数 reason => {}
            说明: excutor 会在 Promise 内部立即同步回调,异步操作在执行器中执行

            2. Promise.prototype.then 方法: (onResolved, onRejected) => {}
            onResolved 函数: 成功的回调函数 (value) => {}
            onRejected 函数: 失败的回调函数 (reason) => {}
            说明: 指定用于得到成功 value 的成功回调和用于得到失败 reason 的失败回调
            返回一个新的 promise 对象

            3. Promise.prototype.catch 方法: (onRejected) => {}
            onRejected 函数: 失败的回调函数 (reason) => {}
            说明: then()的语法糖, 相当于: then(undefined, onRejected)

            4. Promise.resolve 方法: (value) => {}
            value: 成功的数据或 promise 对象
            说明: 返回一个成功/失败的 promise 对象

            5. Promise.reject 方法: (reason) => {}
            reason: 失败的原因
            说明: 返回一个失败的 promise 对象

            6. Promise.all 方法: (promises) => {}
            promises: 包含 n 个 promise 的数组
            说明: 返回一个新的 promise, 只有所有的 promise 都成功才成功, 只要有一
            个失败了就直接失败

            7. Promise.race 方法: (promises) => {}
            promises: 包含 n 个 promise 的数组
            说明: 返回一个新的 promise, 第一个完成的 promise 的结果状态就是最终的
            结果状态
            */
        /*
        new Promise((resolve, reject) => {
        if (Date.now()%2===0) {
        resolve(1)
        } else {
        reject(2)
        }
        }).then(value => {
        console.log('onResolved1()', value)
        }).catch(reason => {
            console.log('onRejected1()', reason)
})
*/
        const p1 = Promise.resolve(1)
        const p2 = Promise.resolve(Promise.resolve(3))
        const p3 = Promise.resolve(Promise.reject(5))
        const p4 = Promise.reject(7)
        const p5 = new Promise((resolve, reject) => {
            setTimeout(() => {
                if (Date.now() % 2 === 0) {
                    resolve(1)
                } else {
                    reject(2)
                }
            }, 100);
        })
        p3.catch(reason => {
            // 没有捕获处理，会报错报错了
            console.log(reason);
        })
        const pAll = Promise.all([p1, p2, p5])
        pAll.then(
            values => { console.log('all 成功了', values) },
            reason => { console.log('all 失败了', reason) }
        )
        const pRace = Promise.race([p5, p4, p1])
        const pRace1 = Promise.race([p5, p1, p4])
        pRace.then(
            value => { console.log('race 成功了', value) },
            reason => { console.log('race 失败了', reason) }
        )
        pRace1.then(
            value => { console.log('race 成功了', value) },
            reason => { console.log('race 失败了', reason) }
        )
    </script>
</body>

</html>

image.png

avatar
文章
阅读
粉丝