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>