这是我参与「第四届青训营 」笔记创作活动的第2天

（二）promise的理解和使用

Promise—引入

❓为什么会出现promise

⇒ Promise是JS中进行异步变成的新方案，为了完善Ajax。

❓为什么要用promise取代Ajax呢

⇒ Ajax会造成回调地域。

回调地域示例：点击按钮发送请求，如果第一条请求成功了，发送第二条请求，如果第二条请求成功，则发送第三条请求。

btn.click(() => {
    $get('http://127.0.0/hh', { school: 'chenggu' }, (data) => {
        console.log(data);
        $get('http://127.0.0/hh', { school: 'chenggu' }, (data) => {
            console.log(data);
            $get('http://127.0.0/hh', { school: 'chenggu' }, (data) => {
                console.log(data);
            }, 'json');
        }, 'json');
    }, 'json');

})

上面的代码层层嵌套回调函数，就陷入了回调地狱，这是很不好维护的。所以为了解决回调地狱，Promise横空出世！

Promise的理解

从语法来说：Promise是一个内置的构造函数，用new来实例化对象

从功能上来说：Promise的实例化对象用来封装一个异步操作，并可以获得其成功和失败的值

1. Promise不是回调函数，它是一个内置的构造函数，是程序员自己可以利用new出实例化的对象。

2. executor函数：new Promise的时候，参数要传入一个executor回调函数，他是同步的回调，会立即在主线程上执行。

   executor函数会收到2个参数，他们的类型都是函数，分别用形参：resolve。reject接收。

3. 在executor函数中调用resolve函数会：

   （1）让Promise实例状态变成成功（fulfilled）

   （2）可以指定成功的value （形式：resolve（value））

b. 在executor函数中调用reject函数会：

  （1）让Promise实例状态变成失败（rejected）

  （2）可以指定失败的reason（形式：）

1. 每个Promise实例对象都有三种状态：初始化（pending）、成功（fulfill）、失败（rejected）。实例化对象在刚被new出来的那一刻，状态都是pending

Promise的使用

使用1：promise 基本编码流程

代码示例：

<script>
    //第一步：创建 promise 对象
const p = new Promise((resolve, reject) => {
   //第二步： 在executor函数中启动异步任务（定时器函数）
setTimeout(() => {
    const time = Date.now()
    // 3) 根据结果做不同处理
    if (time % 2 === 1) {
        //  如果成功了, 调用 resolve(), 指定成功的 value为'成功的值 '+ time, 实例化对象变为 resolved 状态
        resolve('成功的值 '+ time) } else { 
        // 如果失败了, 调用 reject(), 指定失败的 reason为'失败的值' + time, 实例化对象变为rejected 状态
        reject('失败的值' + time) }
    }, 2000)
})
//第四步： 用then方法指定成功或失败的回调函数来获取成功的 vlaue 或失败的 reason
p.then(
    value => { // 成功的回调函数 onResolved, 得到成功的 vlaue
        console.log('成功的 value: ', value)
    },
    reason => { // 失败的回调函数 onRejected, 得到失败的 reason
        console.log('失败的 reason: ', reason) 
    } 
)
consloe.log(”@”);
</script>

执行步骤： executor函数，是同步回调函数，立刻执行setTimeout方法，立刻指定了一个回调，这个回调，是异步的，所以将其推至队列中。

p.then是程序员自己写的，指定了成功和失败的回调，是放在主线程上的，但里面的成功，失败函数是异步的。

consloe.log(”@”);是放在主线程的，是最先来到控制台上的，先输出，然后等待两秒，使p变成成功的状态，然后调用成功的回调，输出“成功了”,time;