执着于理想,纯粹于当下

目录
Promise
/      

Promise

一、说明

1.理解

  • 异步:操作之间没啥关系,同时进行多个操作;代码更复杂,性能好
  • 同步:同时只能做一件事;代码简单,性能差

2. Promise——消除异步操作

① .用同步一样的方法,来书写异步代码,避免了层层嵌套的回调函数(‘俗称回调地狱’)

② .ES6 的 Promise 是一个构造函数,用来生成 promise 实例

③ .Promise 有三个状态:

  • pending:初始化
  • fulfilled: 完成的状态
  • rejected:失败的状态

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

创建 promise 对象

Let promise = new Promise((resolve, reject) => {
        // 初始化 promise 状态为 pending
        //执行异步操作
           if(异步操作成功) {
               resolve(value);// 修改 promise 的状态为 fullfilled
           } else {
               reject(errMsg);//修改 promise 的状态为 rejected
           }

代码:

  // 创建 promise 对象
       let promise = new Promise((resolve, reject) => {
         // 初始化promise状态,pending:初始化
           console.log('111');
           //执行异步操作,通常是发送ajax请求, 开启定时器
            setTimeout(() => {
                console.log('333');
                // 根据异步任务的返回结果来去修改promise的状态
                // 异步任务执行成功
                // resolve(); // 修改promise的状态为fullfilled:成功的状态
                reject(400); // 修改promise的状态为  rejected    失败的状态
            }, 2000)
       })
       console.log('222');
       promise.then(()=>{ // 成功的回调
           console.log('成功。。。。。')
       },(error)=>{ // 失败的回调
           console.log('失败。。。。。' + error)
       })

二、获取新闻和评论

先获取新闻的数据,再根据其对应的 id 获取其评论

// 定义获取新闻的功能函数
        function getNews(url) {
                let promise = new Promise((resolve, reject) => {
                    // 状态:初始化
                    // 执行异步任务
                    //创建xmLHttp实例对象
                    let xmlHttp = new XMLHttpRequest();
                    // 绑定监听 readyState
                    xmlHttp.onreadystatechange = function () {
                            if (xmlHttp.readyState === 4 ){
                                if (xmlHttp.status === 200){
                                // 修改状态为成功
                                resolve(xmlHttp.responseText);
                                }else{// 请求失败
                                    reject("暂时么有新闻内容");
                                }
                            }
                    }
                    // open 设置请求的方式以及url
                    xmlHttp.open('GET', url);
                    // 发送
                    xmlHttp.send();
                })
                return promise;
        }
 getNews('http://localhost:3000/news?id=2').then((data) => {
            console.log( typeof data);
            console.log( 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)
        }, (error) => {
            console.log(error)
        })