ES6_promise原理详解和练习19-10-17

//创建promise对象
let promise = new promise((resolve, reject) => {
   //初始化promise状态： pending：初始化
   console.log('111');
   //执行异步，通常是发送ajax请求，开启定时器
   setTimeout(()=>{
      console.log('333');
      //根据异步任务的返回结果来修改promise的状态
      //异步任务执行成功
      resolve('哈哈哈'); //修改promise的状态为 fullfilled： 成功的状态
      //异步任务执行失败
      //reject('呜呜呜');//修改promise的状态为 rejected： 失败的状态
   },2000)
});
  cconsole.log('222');
//promise有一个实例方法叫then,then里面有两个回调函数，这里调用then
promise.
      then((data) => {//then的第一个回调，表示成功的回调,这个状态来自resolve(),接收到data值也是resolve()传过来的参数
           console.log(data,'成功了。。。');
           //打印结果： 哈哈哈，成功了。。。
      }, (error) => {//第二个回调，表示失败的回调
           console.log(error,'失败了。。。');
           //打印结果：呜呜呜 失败了。。。
      })

2.promise新闻评论数据请求案例练习

//获取新闻功能函数
function getNews(url) {
   let promise = new Promise((resolve, reject)=>{
       //状态： 初始化
       //执行异步任务
       //创建xmlHttp示例对象
       let xmlHttp = new XMLHttpRequest();
       //绑定监听 ready State    
//当状态码改变的时候会调用onreadystatechange,  调用前三次xmlHttp.readyState分别等于1、2、3，第四次的时候=4，4表示数据接收完毕
       xmlHttp.onreadystatechange = funcion (){
           if (xmlHttp.readyState === 4){
                if(xmlHttp.states == 200){
                    //xmlHttp.readyState === 4 表示数据接收完毕，还不能确定是成功的数据还是失败了
                    //xmlHttp.states == 200 表示成功的数据
                    console.log(xmlhttp.responseText);//打印请求的数据
                     // 修改状态
                    resolve(xmlhttp.responseText);//修改promise的状态为成功状态，把请求的书传送过去
                }eles{
                    reject('暂时没有内容');
               }
           }
       }；
       //open设置请求的方式以及url
         xmlHttp.open('GET', url);
         xmlHttp.send();
   })
    return promise;
}
getNews('http://localhost:3000/news?id=2')
      .then((data)=>{
          console.log(data);//打印获取的数据
          //发送请求获取评论内容准备url  
          //conmensUrl是获得是数据中需要拼接在url后面的评论部分接口数据(例:"commentsUrl": "/comments?newsId=4")
            let comments_url = Json.parse(data).conmensUrl;
            let com_url = 'http://localhost:3000' + comments_url;
            //发送请求，请求评论相关内容
            //  getNews(com_url);
            //发送请求又返回一个promise对象，我们把这个promise对象return出去,因为return出去才可以在下面用.then列式调用
            return  getNews(com_url);
      },(error)=>{
          console.log(error);
      })
      .then((data)=>{ //promise方法的另一个好处是可以列式调用，列式调用的前提是上一个成功回调里面必须要返出一个promise对象。
           console.log(data);//打印出评论内容
       },(error)=>{ 
            console.log(error);
       })