微信扫一扫打赏支持

ES6参考---Promise对象

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>

 

 

 

 
posted @ 2020-03-20 17:02  范仁义  阅读(262)  评论(0)  编辑  收藏  举报