ES6——Promise(二)

1. 理解:

• Promise对象: 代表了未来某个将要发生的事件(通常是一个异步操作)
• 有了promise对象, 可以将异步操作以同步的流程表达出来, 避免了层层嵌套的回调函数(俗称'回调地狱')
• ES6的Promise是一个构造函数, 用来生成promise实例

2. 使用promise基本步骤(2步):

• 创建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)
  ))

3. promise对象的3个状态

• pending: 初始化状态
• fullfilled: 成功状态
• rejected: 失败状态

4. 应用:

• 使用promise实现超时处理

• 使用promise封装处理ajax请求
  let request = new XMLHttpRequest();
  request.onreadystatechange = function () {
  }
  request.responseType = 'json';
  request.open("GET", url);
  request.send();

<script type="text/javascript">

    //创建一个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');


    //定义一个请求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);
            })
</script>

09_promise过程分析.png