Promise基本使用

// promise是一个构造函数，参数是一个函数，函数里面有俩个形参，一个是 resolve解决,reject拒绝，俩个都是函数类型的数据，promise可以包裹一个异步操作

1
2
3
4
5
6
7
8
9
10
btn.addEventListener('click',function(){
    // promise是一个构造函数，参数是一个函数，函数里面有俩个形参，一个是 resolve解决,reject拒绝，俩个都是函数类型的数据，promise可以包裹一个异步操作
        const p = new Promise((resolve,reject)=>{
            setTimeout(()=>{

            })
        }
                
        )
 })

promise常用API

then 接下来(指定回调)

1
2
3
4
5
6
7
  //调用 then 
p.then(value=>{
    console.log(value.toString());
}, reason=>{
    console.log(reason);
});


chach 捕获（捕获失败的方法，并可以接受一个形参）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
let p = new Promise((resolve, reject) => {
         // ** 同步调用
         // console.log(111);
         //修改 promise 对象的状态
         reject('error');
     });

     // console.log(222);

     //执行 catch 方法
     // p.catch(reason => {
     //     console.log(reason);
     // });
     // 抛出异常

resolve 成功( //如果传入的参数为 非Promise类型的对象,
则返回的结果为成功promise对象
//如果传入的参数为 Promise 对象, 则参数的结果决定了 resolve 的结果)

1
2
3
4
5
6
7
8
9
10
11
12
//
  let p1 = Promise.resolve(521);
  //如果传入的参数为 非Promise类型的对象, 则返回的结果为成功promise对象
  //如果传入的参数为 Promise 对象, 则参数的结果决定了 resolve 的结果
  let p2 = Promise.resolve(new Promise((resolve, reject) => {
      // resolve('OK');
      reject('Error');
  }));
  // console.log(p2);
  p2.catch(reason => {
      console.log(reason);    
  })

reject 失败

1
2
3
4
5
6
7
8
9
//   作用：放回一个失败的原因
//   特点：无轮传入一个什么值，返回的都是一个失败的Promise
  // let p = Promise.reject(521);
        // let p2 = Promise.reject('iloveyou');
        let p3 = Promise.reject(new Promise((resolve, reject) => {
            resolve('OK');
        }));
        
        console.log(p3);

Promise.all方法
作用：返回一个新的promise，全真则真，一假既假

1
2
3
4
5
6
7
8
9
10
11
let p1 = new Promise((resolve, reject) => {
         resolve('OK');
     })
     // let p2 = Promise.resolve('Success');
     let p2 = Promise.reject('Error');
     let p3 = Promise.resolve('Oh Yeah');
     
     //
     const result = Promise.all([p1, p2, p3]);

     console.log(result);

Promise.race（竞赛）方法
说明：放回一个新的promise，第一个完成的promise的结果状态就是他最终的结果

1
2
3
4
5
6
7
8
9
10
11
12
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);

Promise几个关键问题

修改Promise的状态有几种方式
三种方式
在构造函数中直接调用 resolve 函数
在构造函数中直接调用 reject 函数
在构造函数中直接抛出错误：throw Error

1
2
3
4
5
6
7
8
9
10
let p = new Promise((resolve, reject) => {
         //1. resolve 函数
         // resolve('ok'); // pending   => fulfilled (resolved)
         //2. reject 函数
         // reject("error");// pending  =>  rejected 
         //3. 抛出错误
         // throw '出问题了';
     });

     console.log(p);

一个Promise指定多个成功/失败的回调函数，都会调用吗？
都会执行！

1
2
3
4
5
6
7
8
9
10
11
12
13
let p = new Promise((resolve, reject) => {
        // resolve('OK');
    });

    ///指定回调 - 1
    p.then(value => {
        console.log(value);
    });

    //指定回调 - 2
    p.then(value => {
        alert(value);
    });

改变Promise状态和指定回调函数谁先谁后
问题简化：Promise代码运行时，resolve先执行还是then先执行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 两种情况都有可能

// 先改状态再指定回调：
// 执行器中是一个同步操作，那么就先做执行器中的操作再执行then语句即指定回调
// 例如直接在执行器中直接调用 resolve()/reject()
// 执行器中式一个异步操作，延长更长时间才调用then()同样可以达到效果
// 先指定回调再改变状态
// 执行器中式异步操作时，会先执行then，指定回调（但是不执行回调），再回头根据异步操作的顺序进行处理
// 什么时候能够得到数据？

// 如果先改变状态，那么当指定回调时，回调函数就会被调用，得到数据
// 如果先指定回调，那么当状态发生改变时，回调函数才被调用得到数据

    let p = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('OK');
            }, 1000);
        });

        p.then(value => {
            console.log(value);
        },reason=>{
            
        })

then()方法返回的Promise的对象的状态由什么决定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
简单表达：then()方法返回的Promise的对象的状态由什么决定

如果回调函数抛出异常，返回Promise状态为【rejected】
 let p = new Promise((resolve, reject) => {
           resolve('ok');
       });
       let result = p.then(value => {
       throw '出了问题';
       ),reason => {
           console.warn(reason);
       });
 如果then()有返回结果，且结果是非Promise对象，则then()方法返回的Promise对象状态为【resolved】，其值为【返回值】，即521例如
 let p = new Promise((resolve, reject) => {
           resolve('ok');
       });
 let result = p.then(value => {
  //2. 返回结果是非 Promise 类型的对象
       // return 521;
   ),reason => {
       console.warn(reason);
   });
   
   如果then()有返回结果，且结果是Promise对象，例如则其返回的Promise的状态和值由返回的Promise决定
   let p = new Promise((resolve, reject) => {
       resolve('ok');
   });
   let result = p.then(value => {
  /3. 返回结果是 Promise 对象
       // return new Promise((resolve, reject) => {
       //     // resolve('success');
       //     reject('error');
       // });
   ),reason => {
       console.warn(reason);
   });