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();

//创建promise对象
    let promise = new Promise((resolve, reject) => {
        //初始化promise状态：pending（初始化）
        console.log('111');
        //执行异步操作，通常是发送ajax请求、开启定时器
        setTimeout(() => {
            console.log('333');
            //根据异步任务的返回结果，去修改promise的状态
            //异步任务执行成功
            // resolve('哈哈');//修改promise的状态为fullfilled（成功状态）
            //异步任务执行失败
            reject('555');//修改promise的状态为rejected（失败状态）
        }, 2000);
    })
    console.log('222');
    promise
        .then((data) => {//成功的回调
            console.log(data, '成功了~~~');
        }, (error) => {//失败的回调
            console.log(error, '失败了~~~');
        });
    */
    // 定义获取新闻的功能函数
    function getNews(url){
        let promise = new Promise((resolve, reject) => {
            // 状态：初始化
            // 执行异步任务
            // 创建xmlHttp实例对象
            let xmlHttp = new XMLHttpRequest();
            console.log(xmlHttp.readyState);
            //绑定readyState监听
            xmlHttp.onreadystatechange = function(){
                if(xmlHttp.readyState === 4){
                    if(xmlHttp.status == 200){//请求成功
                        // console.log(xmlHttp.responseText);
                        //修改状态
                        resolve(xmlHttp.responseText);//修改promise的状态为成功的状态
                    }else{//请求失败
                        reject('暂时没有新闻内容');
                    }
                }
            };
            // open设置请求的方式以及url
            xmlHttp.open('GET', url);
            // 发送
            xmlHttp.send();
        })
        return promise;
    }
    getNews('http://localhost:30001/news?id=2')
        .then((data) => {
            console.log(data);
            // console.log(typeof data);
            // 准备获取评论内容的url
            let commentsUrl = JSON.parse(data).commentsUrl;
            let url = 'http://localhost:3000' + commentsUrl;
            // 发送请求获取评论内容
            return getNews(url);
        }, (error) => {
            console.log(error);
        })
        .then((data) => {
            console.log(data);
        }, () => {
        });