Skip to content

Promise 保教不会

Promise 是什么,为什么会产生 promise(即讲明相对于以往有什么优势),缺点是什么,更好的方案

  • 是什么?ES6 出的 异步编程的一种解决方案,是为了解决回调地狱问题,使代码可读性更高,便于维护

Promise 具体语法是怎么样,有哪些特征

  • 语法
    • 三种状态 pending 、resolve、reject。状态一旦变更无法修改
    • Promise 传入 executor,有 resolve 和 reject,
  • 特征
    • then、catch、Promise.all、Promise.race
      • then
        • 获得异步变更后的状态
        • 返回的也是一个 promise 对象
      • catch
        • 捕获错误,如果你在 then 中已经对 reject 做过处理,不会再进入 catch
      • Promise.all
        • 传入数组,当所有的 Promsie 的 resolve 回调结束再返回
      • Promise.race
        • 传入数组,取最快的 resolve 的回调函数
    • 链式调用
      • 无论是 then 还是 catch 返回都是 this
        • this 是什么?
          • 词法作用域

Promise 引出 Event Loop

  • 事件循环
    • 宏任务、微任务

什么是 Promise

在了解 Promise 前,先去看看为什么会产生 Promise

JavaScript 的回调函数

javascript
getAsync('fileA.txt', function (error, result) {
    if (error) {
        //  失败时的处理
        throw err;
    }
    // 成功后的处理
});

Node.Js 的规则是在 JavaScript 的回调函数的第一个参数为 Error 对象,这是它的一个惯例

使用 Promise 进行异步处理

javascript
var promise = getAsyncPromise('fileA.txt');
promise
    .then(function (result) {
        // 获取文件内容成功后的处理
    })
    .catch(function (error) {
        // 获取文件内容失败后的处理
    });
// 或者用另一种
promise.then(
    function (result) {
        // 获取文件内容成功后的处理
    },
    function (error) {
        // 获取文件内容失败后的处理
    },
);

看到用 promise 和回调函数的区别没有

promise 更趋于同步的想法——我去调这个行为,等(then)它好了我再执行 XX

综上所述:

promise 是异步编程的一种解决方案,比传统的回调函数和事件更合理和强大

所谓 promise,简单来说就是一个容器,里面保存着某个未来才会结束的行为(通常是一个异步处理)。从语法上讲,promise 是一个对象,从它那可以获取异步操作的消息

实战 Promise

一般用法

之前介绍过,promise 像一个容器,包裹着“成功”或“失败”

javascript
function promise() {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            resolve('成功');
        }, 1000);
    });
}
promise().then(function (value) {
    console.log(value);
});

then

它的使用

then 方法可以接受两个回调函数作为参数,

第一个回调函数是 promise 对象的状态变为 resolved 的时候调用,

第二个回调函数是 promise 对象的状态变为 rejected 时调用

其中第二个函数时可选的,不一定需要提供

它的作用

为 promise 实例添加状态改变时的回调函数

前面说过,then 方法的第一个参数是 resolved 状态的回调函数,第二个参数是 rejected 状态的回调函数(可选)

then 方法返回的是一个新的 promise 实例。注意,不是原来那个 promise 实例,因此可以采用链式写法,即在 then 方法后面再调用另一个 then 方法

注意:then 方法即不会触发回调,也不会将它放到微任务,then 只负责注册回调,由 resolve 将注册的回调放入微任务队列,由事件循环将其取出并执行

执行顺序

面试中常常考的问题

在说这个之前,需要先聊天事件循环的执行顺序

简单来说:XXX

回过头说 promise,promise 新建后就会立即执行,而 then 会被塞到为微任务中,当宏任务执行完后再执行微任务

promise

Promise 是 ES6 新增的语法,解决了回调地狱的问题

可以把 Promise 堪称一个状态机,初始时 pending 状态,通过函数 resolve 和 rejecy,将状态转变为 resolved 和 rejected,状态一旦改变就不会再次变化

阳波 javascript 核心技术开发解密

1.异步与同步

​ 什么是异步?什么是同步?在代码的执行过程中,经常会涉及两个不同的概念,他们就是同步和异步。

​ 同步是值当发起一个请求时,如果未得到请求结果,代码将会等待,直到结果出来,才会执行后面的代码。异步是指当发起一个请求时,不会等待请求结果,而是直接继续执行后面代码。

​ 我们使用 promise 模拟一个发起请求的函数,该函数执行后,会在 1s 之后返回数值 30

javascript
function fn() {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            resolve(30);
        }, 1000);
    });
}

在该函数的基础上,可以使用 async/awaut 语法来模拟同步的效果

javascript
const foo = async function () {
    const t = await fn();
    console.log(t);
    console.log('next code');
};

foo();
// 输出结果
// 1s 之后依次输出
// 30
// nextcode

而一部效果则会有不同的输出结果:

javascript
const foo = function () {
    fn().then(function (res) {
        console.log(res);
    });
    console.log('next code');
};
// 输出结果
// 1s 之后依次输出
// nextcode
// 30

then 方法返回的是一个新的 Promise 实例(注意,不是原来那个 Promise 实例)因此可以采用链式写法,即 then 方法后面再调用另一个 then 方法

实例化 Promise 传入的函数是同步执行的,then 方法本身其实也是同步执行的,但 then 中的回调会先放入微任务队列,等同步任务执行完毕后,再依次取出执行,换句话说只有回调是异步的

在 new Promise 中使用 resolve 或者 reject,相当于变更 promise 的状态,变化后,promise.then 会执行

参考资料