ES6课程---11、promise对象实例
一、总结
一句话总结：
promise使用的时候将异步函数（比如ajax）放在Promise对应的构造函数中，并且通过resolve和reject回调函数设置promise状态并且传递异步操作数据，可以用promise的实例的then方法来接收resolve和reject回调函数传递过来的异步数据
//定义一个请求news的方法 function getNews(url){ //获取新闻信息，并且设置状态 let promise=new Promise(function (resolve, reject) { //启动异步任务 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; } let btn = document.getElementById('btn'); btn.onclick=()=>{ getNews('http://api.com/api/news') .then((news) => { console.log(news); document.write(JSON.stringify(news)); }, (error) => { alert(error); }) };
1、如果想在异步操作1后接着做异步操作2，用promise如何做？
在异步操作1的then方法的回调函数中执行异步操作2，这样即可通过链式的调用then方法来达到以同步的方式来书写异步操作
<button id="btn">获取新闻</button> <div id="news"></div> <script> //将原生的ajax函数用promise对象封装一下 function ajax_fun(url){ //获取ajax数据，并且设置promise状态 let promise=new Promise(function (resolve, reject) { //启动异步任务 let request = new XMLHttpRequest(); request.onreadystatechange = function () { if(request.readyState === 4){ if(request.status === 200){ //ajax请求数据成功 let data = request.response; resolve(data); }else{ //ajax请求数据失败 reject('请求失败了。。。'); } } }; request.responseType = 'json';//设置返回的数据类型 request.open("GET", url);//规定请求的方法，创建链接 request.send();//发送 }); return promise; } document.getElementById('btn').onclick=()=>{ ajax_fun('http://api.com/api/news') .then((data)=>{ console.log(data); let news=data['news']; console.log(news); let str=''; news.forEach(function (value) { //console.log(value); str+=`<div style="font-weight: 600;font-size: 18px;margin-top: 30px;">${value['title']}</div>`; str+=`<div>${value['content']}</div>`; }); document.getElementById('news').innerHTML=str; //获取新闻的评论数据 //获取第一条评论的id let first_id=news[0]['id']; console.log(first_id); return ajax_fun('http://api.com/api/news_comment/'+first_id); },(error)=>{ alert(error); }) .then(function (data) { console.log(data); },function () { }); }; </script>
二、promise对象实例
博客对应课程的视频位置：11、promise对象实例
https://www.fanrenyi.com/video/24/212
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>promise对象实例</title> 6 </head> 7 <body> 8 <!-- 9 10 promise使用的时候将异步函数（比如ajax）放在Promise对应的构造函数中， 11 并且通过resolve和reject回调函数设置promise状态并且传递异步操作数据， 12 可以用promise的实例的then方法来接收resolve和reject回调函数传递过来的异步数据 13 14 15 2、 16 如果想在异步操作1后接着做异步操作2，用promise如何做 17 在异步操作1的then方法的回调函数中执行异步操作2， 18 这样即可通过链式的调用then方法来达到以同步的方式来书写异步操作 19 20 21 //测试api 22 获取新闻的url：http://api.com/api/news 23 获取新闻评论的url：http://api.com/api/news_comment/1 24 25 --> 26 <button id="btn">获取新闻</button> 27 <div id="news"></div> 28 29 <script> 30 //将原生的ajax函数用promise对象封装一下 31 function ajax_fun(url){ 32 //获取ajax数据，并且设置promise状态 33 let promise=new Promise(function (resolve, reject) { 34 //启动异步任务 35 let request = new XMLHttpRequest(); 36 request.onreadystatechange = function () { 37 if(request.readyState === 4){ 38 if(request.status === 200){ 39 //ajax请求数据成功 40 let data = request.response; 41 resolve(data); 42 }else{ 43 //ajax请求数据失败 44 reject('请求失败了。。。'); 45 } 46 } 47 }; 48 request.responseType = 'json';//设置返回的数据类型 49 request.open("GET", url);//规定请求的方法，创建链接 50 request.send();//发送 51 }); 52 return promise; 53 } 54 55 document.getElementById('btn').onclick=()=>{ 56 ajax_fun('http://api.com/api/news') 57 .then((data)=>{ 58 console.log(data); 59 60 let news=data['news']; 61 console.log(news); 62 63 let str=''; 64 news.forEach(function (value) { 65 //console.log(value); 66 str+=`<div style="font-weight: 600;font-size: 18px;margin-top: 30px;">${value['title']}</div>`; 67 str+=`<div>${value['content']}</div>`; 68 }); 69 70 document.getElementById('news').innerHTML=str; 71 72 //获取新闻的评论数据 73 //获取第一条评论的id 74 let first_id=news[0]['id']; 75 console.log(first_id); 76 return ajax_fun('http://api.com/api/news_comment/'+first_id); 77 78 },(error)=>{ 79 alert(error); 80 }) 81 .then(function (data) { 82 console.log(data); 83 84 },function () { 85 86 }); 87 }; 88 89 90 </script> 91 </body> 92 </html>
