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>