promise(让异步变的同步)

promise是什么？

1、主要用于异步计算
2、可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果
3、可以在对象之间传递和操作promise，帮助我们处理队列

为什么会有promise？

在实际的使用中，有非常多的应用场景我们不能立即知道应该如何继续往下执行。最常见的一个场景就是ajax请求。通俗来说，由于网速的不同，可能你得到返回值的时间也是不同的，这个时候我们就需要等待，结果出来了之后才知道怎么样继续下去。

// 简单的ajax原生实现
var url = 'data.php';
var result;

var XHR = new XMLHttpRequest();
XHR.open('GET', url, true);
XHR.send();

XHR.onreadystatechange = function() {
    if (XHR.readyState == 4 && XHR.status == 200) {
        result = XHR.response;
        console.log(result);
    }
}

在ajax的原生实现中，利用了onreadystatechange事件，当该事件触发并且符合一定条件时，才能拿到想要的数据，之后才能开始处理数据。

这样做看上去并没有什么麻烦，但如果这个时候，我们还需要另外一个ajax请求，这个新ajax请求的其中一个参数，得从上一个ajax请求中获取，这个时候我们就不得不等待上一个接口请求完成之后，再请求后一个接口。如下：

var url = 'data.php';
var result;

var XHR = new XMLHttpRequest();
XHR.open('GET', url, true);
XHR.send();

XHR.onreadystatechange = function() {
    if (XHR.readyState == 4 && XHR.status == 200) {
        result = XHR.response;
        console.log(result);

        // 伪代码
        var url2 = 'http:xxx.yyy.com/zzz?ddd=' + result.someParams;
        var XHR2 = new XMLHttpRequest();
        XHR2.open('GET', url, true);
        XHR2.send();
        XHR2.onreadystatechange = function() {
            ...
        }
    }
}

当出现第三个ajax(甚至更多)仍然依赖上一个请求时，我们的代码就变成了一场灾难。这场灾难，往往也被称为回调地狱。

因此我们需要一个叫做Promise的东西，来解决这个问题。

创建Promise对象

new Promise(
  function (resolve, reject) {
    // 一段耗时的异步操作
    resolve('成功') // 数据处理完成
    // reject('失败') // 数据处理出错
  }
).then(
  (res) => {console.log(res)},  // 成功
  (err) => {console.log(err)} // 失败
)

一、 Promise对象有三种状态，他们分别是：

上面的resolve和reject都为一个函数，他们的作用分别是将状态修改为resolved和rejected
pending: 等待中，或者进行中，表示还没有得到结果
resolved(Fulfilled): 已经完成，表示得到了我们想要的结果，可以继续往下执行
rejected: 也表示得到结果，但是由于结果并非我们所愿，因此拒绝执行

二、 Promise对象中的then方法

Promise对象中的then方法，可以接收构造函数中处理的状态变化，并分别对应执行。then方法有2个参数，第一个函数接收resolved状态的执行，第二个参数接收reject状态的执行。

function fn(num) {
    return new Promise(function(resolve, reject) {
        if (typeof num == 'number') {
            resolve();
        } else {
            reject();
        }
    }).then(function() {
        console.log('参数是一个number值');
    }, function() {
        console.log('参数不是一个number值');
    })
}

fn('hahha');
fn(1234);

then方法的执行结果也会返回一个Promise对象。因此我们可以进行then的链式执行，这也是解决回调地狱的主要方式。

举个例子
现在需要这些方法 同步执行 执行完上一个再执行下一个

    function delayDo(time, content) {
            return new Promise((resolve, reject) => {
                // 异步操作
                setTimeout(() => {
                    resolve(content)
                }, time)
            })
        }


        delayDo(1000, "我是第一层").then(data => {
            console.log(data);

            return delayDo(1000, "我是第二层");
        }).then(data1 => {
            console.log(data1);

            return delayDo(1000, "我是第三层")
        }).then(data2 => {
            console.log(data2);

            return delayDo(1000, "我是第四层")
        }).then(data3 => {
            console.log(data3);

        })

后来为了让成功和错误分开 then 渐渐的用来表示成功之后执行的函数
错误方法用catch来捕获

pro.catch((msg) => {
           console.log(msg)
      })