ES6参考---Promise对象
一、总结
一句话总结：
1、promise代替回调来做异步，回调做异步结构太混乱了，可以把异步函数（定时器、ajax等等）写在promise里面
2、promise可以将异步操作以同步的流程表达出来, 避免了层层嵌套的回调函数(俗称'回调地狱')
* 创建promise对象 let promise = new Promise((resolve, reject) => { //初始化promise状态为 pending //执行异步操作 if(异步操作成功) { resolve(value);//修改promise的状态为fullfilled } else { reject(errMsg);//修改promise的状态为rejected } }) * 调用promise的then() promise.then(function( result => console.log(result), errorMsg => alert(errorMsg) ))
1、promise的作用是什么？
1、promise代替回调来做异步，回调做异步结构太混乱了，可以把异步函数（定时器、ajax等等）写在promise里面
2、promise可以将异步操作以同步的流程表达出来, 避免了层层嵌套的回调函数(俗称'回调地狱')
2、promise的resolve和reject的实质是什么？
改变promise的状态，这样才可以根据状态打印成功或者失败的信息，或者获取成功或者失败的数据
//创建一个promise实例对象 let promise = new Promise((resolve, reject) => { //初始化promise的状态为pending---->初始化状态 console.log('1111');//同步执行 //启动异步任务 setTimeout(function () { console.log('3333'); //resolve('atguigu.com');//修改promise的状态pending---->fullfilled（成功状态） reject('xxxx');//修改promise的状态pending----->rejected(失败状态) },1000) }); promise.then((data) => { console.log('成功了。。。' + data); }, (error) => { console.log('失败了' + error); }); console.log('2222');
3、promise对象的3个状态？
1、pending: 初始化状态
2、fullfilled: 成功状态
3、rejected: 失败状态
4、使用promise基本步骤(2步)？
a、创建promise对象
b、调用promise的then()
//创建一个promise实例对象 let promise = new Promise((resolve, reject) => { //初始化promise的状态为pending---->初始化状态 console.log('1111');//同步执行 //启动异步任务 setTimeout(function () { console.log('3333'); //resolve('atguigu.com');//修改promise的状态pending---->fullfilled（成功状态） reject('xxxx');//修改promise的状态pending----->rejected(失败状态) },1000) }); promise.then((data) => { console.log('成功了。。。' + data); }, (error) => { console.log('失败了' + error); }); console.log('2222');
5、一个网页，200行的新闻，300条评论，评论都要显示，怎么优化？
可以拿到新闻数据之后，再去请求服务器来获取评论数据，这样用户体验好一点
6、promise.then()可以链式调用（promise.then().then()）？
promise的then方法可以链式调用，所以可以成功了又接着发ajax请求，然后返回promise对象，然后接着then
//定义一个请求news的方法 function getNews(url) { //创建一个promise对象 let promise = new Promise((resolve, reject) => { //初始化promise状态为pending //启动异步任务 let request = new XMLHttpRequest(); request.onreadystatechange = function () { if(request.readyState === 4){ if(request.status === 200){ let news = request.response; resolve(news); }else{ reject('请求失败了。。。'); } } }; request.responseType = 'json';//设置返回的数据类型 request.open("GET", url);//规定请求的方法，创建链接 request.send();//发送 }) return promise; } getNews('http://localhost:3000/news?id=2') .then((news) => { console.log(news); document.write(JSON.stringify(news)); console.log('http://localhost:3000' + news.commentsUrl); return getNews('http://localhost:3000' + news.commentsUrl); }, (error) => { alert(error); }) .then((comments) => { console.log(comments); document.write('<br><br><br><br><br>' + JSON.stringify(comments)); }, (error) => { alert(error); })
二、Promise对象
博客对应课程的视频位置：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>11_Promise对象</title> 6 </head> 7 <body> 8 <!-- 9 1. 理解: 10 * Promise对象: 代表了未来某个将要发生的事件(通常是一个异步操作) 11 * 有了promise对象, 可以将异步操作以同步的流程表达出来, 避免了层层嵌套的回调函数(俗称'回调地狱') 12 * ES6的Promise是一个构造函数, 用来生成promise实例 13 2. 使用promise基本步骤(2步): 14 * 创建promise对象 15 let promise = new Promise((resolve, reject) => { 16 //初始化promise状态为 pending 17 //执行异步操作 18 if(异步操作成功) { 19 resolve(value);//修改promise的状态为fullfilled 20 } else { 21 reject(errMsg);//修改promise的状态为rejected 22 } 23 }) 24 * 调用promise的then() 25 promise.then(function( 26 result => console.log(result), 27 errorMsg => alert(errorMsg) 28 )) 29 3. promise对象的3个状态 30 * pending: 初始化状态 31 * fullfilled: 成功状态 32 * rejected: 失败状态 33 4. 应用: 34 * 使用promise实现超时处理 35 36 * 使用promise封装处理ajax请求 37 let request = new XMLHttpRequest(); 38 request.onreadystatechange = function () { 39 } 40 request.responseType = 'json'; 41 request.open("GET", url); 42 request.send(); 43 --> 44 45 <script type="text/javascript"> 46 47 //创建一个promise实例对象 48 let promise = new Promise((resolve, reject) => { 49 //初始化promise的状态为pending---->初始化状态 50 console.log('1111');//同步执行 51 //启动异步任务 52 setTimeout(function () { 53 console.log('3333'); 54 //resolve('atguigu.com');//修改promise的状态pending---->fullfilled（成功状态） 55 reject('xxxx');//修改promise的状态pending----->rejected(失败状态) 56 },1000) 57 }); 58 promise.then((data) => { 59 console.log('成功了。。。' + data); 60 }, (error) => { 61 console.log('失败了' + error); 62 }); 63 console.log('2222'); 64 65 66 //定义一个请求news的方法 67 function getNews(url) { 68 //创建一个promise对象 69 let promise = new Promise((resolve, reject) => { 70 //初始化promise状态为pending 71 //启动异步任务 72 let request = new XMLHttpRequest(); 73 request.onreadystatechange = function () { 74 if(request.readyState === 4){ 75 if(request.status === 200){ 76 let news = request.response; 77 resolve(news); 78 }else{ 79 reject('请求失败了。。。'); 80 } 81 } 82 }; 83 request.responseType = 'json';//设置返回的数据类型 84 request.open("GET", url);//规定请求的方法，创建链接 85 request.send();//发送 86 }) 87 return promise; 88 } 89 90 getNews('http://localhost:3000/news?id=2') 91 .then((news) => { 92 console.log(news); 93 document.write(JSON.stringify(news)); 94 console.log('http://localhost:3000' + news.commentsUrl); 95 return getNews('http://localhost:3000' + news.commentsUrl); 96 }, (error) => { 97 alert(error); 98 }) 99 .then((comments) => { 100 console.log(comments); 101 document.write('<br><br><br><br><br>' + JSON.stringify(comments)); 102 }, (error) => { 103 alert(error); 104 }) 105 </script> 106 107 </body> 108 109 </html>