微信扫一扫打赏支持

ES6参考---promise对象结构分析

ES6参考---promise对象结构分析

一、总结

一句话总结：

promise对象本事是一个构造函数，这个构造函数里面需要传一个回调函数做参数，这个回调函数的两个参数又是构造函数里传回的回调函数

 

1、为什么Promise这个构造函数的参数是一个回调函数，并且这个回到函数的两个参数（resolve和 reject）都可以当做方法来运行？

因为外部是一个回调函数传进来，而这个回调函数里面又是两个回调函数作为参数传出去

 

|||-begin

function f(callback) {
  callback(function () {
      console.log('这是a');
  },function () {
      console.log('这是b');
  });
}

//外部
f(function (a,b) {
  a();
  b();
});

|||-end

 

    //创建一个promise实例对象
    let promise = new Promise((resolve, reject) => {
        //初始化promise的状态为pending---->初始化状态
        console.log('1111');//同步执行
        //启动异步任务
        setTimeout(()=>{
            console.log('3333');
            //resolve('成功了传过去的数据');//修改promise的状态pending---->fullfilled（成功状态）
            reject('失败了传过去的数据');//修改promise的状态pending----->rejected(失败状态)
        },2000);
    });
    console.log(promise);
    promise.then((data) => {
        console.log('成功了：' + data);
    }, (error) => {
        console.log('失败了：' + error);
    });
    console.log('2222');

 

 

 

二、promise对象结构分析

博客对应课程的视频位置：

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>promise对象</title>
 6 </head>
 7 <body>
 8 <!--
 9 promise
10 英 /ˈprɒmɪs/  美 /ˈprɑːmɪs/
11 n. 许诺，允诺；希望
12 vt. 允诺，许诺；给人以…的指望或希望
13 vi. 许诺；有指望，有前途
14 
15 Promise对象: 代表了未来某个将要发生的事件(通常是一个异步操作)
16 
17 promise对象
18 将异步操作以同步的流程表达出来, 避免了层层嵌套的回调函数(俗称'回调地狱')
19 本质是状态机，通过设定不同的状态来执行不同的操作
20 
21 promise对象使用操作流程
22 ES6的Promise是一个构造函数, 用来生成promise实例
23 
24 a、创建promise对象
25     let promise = new Promise((resolve, reject) => {
26         //初始化promise状态为 pending
27       //执行异步操作
28       if(异步操作成功) {
29         resolve(value);//修改promise的状态为fullfilled
30       } else {
31         reject(errMsg);//修改promise的状态为rejected
32       }
33     })
34 b、调用promise的then()
35     promise.then(function(
36       result => console.log(result),
37       errorMsg => alert(errorMsg)
38     ))
39 
40 
41 promise对象的3个状态
42 promise对象的本质是状态机，那么promise对象有哪些状态
43 1、pending: 初始化状态
44 2、fullfilled: 成功状态
45 3、rejected: 失败状态
46 
47 promise中如何设置状态
48 可以在promise的构造函数的参数对应的回调函数中设置，
49 如果异步操作成功，可以通过resolve方法设置为成功状态（fullfilled）
50 如果异步操作失败，可以通过rejected方法设置为失败状态（rejected）
51 
52 promise中如何接收设置的状态
53 用promise.then()方法可以来接收成功或者失败的状态，
54 promise.then()的参数是两个回调函数，
55 一个是操作成功的回调函数，一个是操作失败的回调函数
56 
57 
58 promise对象异步操作应用
59 使用promise实现超时处理
60 使用promise封装处理ajax请求
61 
62 
63 -->
64 <script>
65     //创建一个promise实例对象
66     let promise = new Promise((resolve, reject) => {
67         //初始化promise的状态为pending---->初始化状态
68         console.log('1111');//同步执行
69         //启动异步任务
70         setTimeout(()=>{
71             console.log('3333');
72             //resolve('成功了传过去的数据');//修改promise的状态pending---->fullfilled（成功状态）
73             reject('失败了传过去的数据');//修改promise的状态pending----->rejected(失败状态)
74         },2000);
75     });
76     console.log(promise);
77     promise.then((data) => {
78         console.log('成功了：' + data);
79     }, (error) => {
80         console.log('失败了：' + error);
81     });
82     console.log('2222');
83 
84 
85     // function f(callback) {
86     //     callback(function () {
87     //         console.log('这是a');
88     //     },function () {
89     //         console.log('这是b');
90     //     });
91     // }
92     // f(function (a,b) {
93     //     a();
94     //     b();
95     // });
96 </script>
97 </body>
98 </html>

 

 

 

 

 

 

 
posted @ 2020-05-02 02:07  范仁义  阅读(423)  评论(0)  编辑  收藏  举报