ES6 Promise基本使用，串联，其他API（详解）

关注

原创最新推荐文章于 2026-09-22 16:36:48 发布 548 阅读 AI 写同款· GEO 优化 ›

Promise详解-1：初识Promise 不懂Promise？看这篇教程就够了阅读详情

Promise的基本使用

const pro = new Promise((resolve, reject)=>{
    // 未决阶段的处理
    // 通过调用resolve函数将Promise推向已决阶段的resolved状态
    // 通过调用reject函数将Promise推向已决阶段的rejected状态
    // resolve和reject均可以传递最多一个参数，表示推向状态的数据
})

pro.then(data=>{
    //这是thenable函数，如果当前的Promise已经是resolved状态，该函数会立即执行
    //如果当前是未决阶段，则会加入到作业队列，等待到达resolved状态后执行
    //data为状态数据
}, err=>{
    //这是catchable函数，如果当前的Promise已经是rejected状态，该函数会立即执行
    //如果当前是未决阶段，则会加入到作业队列，等待到达rejected状态后执行
    //err为状态数据
})

细节

未决阶段的处理函数是同步的，会立即执行
thenable和catchable函数是异步的，就算是立即执行，也会加入到事件队列中等待执行，并且，加入的队列是微队列
pro.then可以只添加thenable函数，pro.catch可以单独添加catchable函数
在未决阶段的处理函数中，如果发生未捕获的错误，会将状态推向rejected，并会被catchable捕获
一旦状态推向了已决阶段，无法再对状态做任何更改
Promise并没有消除回调，只是让回调变得可控

在这里插入图片描述

Promise的串联

当后续的Promise需要用到之前的Promise的处理结果时，需要Promise的串联

Promise对象中，无论是then方法还是catch方法，它们都具有返回值，返回的是一个全新的Promise对象，它的状态满足下面的规则：

如果当前的Promise是未决的，得到的新的Promise是挂起状态
如果当前的Promise是已决的，会运行响应的后续处理函数，并将后续处理函数的结果（返回值）作为resolved状态数据，应用到新的Promise中；如果后续处理函数发生错误，则把返回值作为rejected状态数据，应用到新的Promise中。

后续的Promise一定会等到前面的Promise有了后续处理结果后，才会变成已决状态

如果前面的Promise的后续处理，返回的是一个Promise，则返回的新的Promise状态和后续处理返回的Promise状态保持一致。

Promise的其他api

原型成员 (实例成员)

then：注册一个后续处理函数，当Promise为resolved状态时运行该函数
catch：注册一个后续处理函数，当Promise为rejected状态时运行该函数
finally：[ES2018]注册一个后续处理函数（无参），当Promise为已决时运行该函数

构造函数成员（静态成员）

resolve(数据)：该方法返回一个resolved状态的Promise，传递的数据作为状态数据
- 特殊情况：如果传递的数据是Promise，则直接返回传递的Promise对象
reject(数据)：该方法返回一个rejected状态的Promise，传递的数据作为状态数据
all(iterable)：这个方法返回一个新的promise对象，该promise对象在iterable参数对象里所有的promise对象都成功的时候才会触发成功，一旦有任何一个iterable里面的promise对象失败则立即触发该promise对象的失败。这个新的promise对象在触发成功状态以后，会把一个包含iterable里所有promise返回值的数组作为成功回调的返回值，顺序跟iterable的顺序保持一致；如果这个新的promise对象触发了失败状态，它会把iterable里第一个触发失败的promise对象的错误信息作为它的失败错误信息。Promise.all方法常被用于处理多个promise对象的状态集合。
race(iterable)：当iterable参数里的任意一个子promise被成功或失败后，父promise马上也会用子promise的成功返回值或失败详情作为参数调用父promise绑定的相应句柄，并返回该promise对象

async 和 await

async 和 await 是 ES2016 新增两个关键字，它们借鉴了 ES2015 中生成器在实际开发中的应用，目的是简化 Promise api 的使用，并非是替代 Promise。

async

目的是简化在函数的返回值中对Promise的创建

async 用于修饰函数（无论是函数字面量还是函数表达式），放置在函数最开始的位置，被修饰函数的返回结果一定是 Promise 对象。


async function test(){
    console.log(1);
    return 2;
}

//等效于

function test(){
    return new Promise((resolve, reject)=>{
        console.log(1);
        resolve(2);
    })
}

await

await关键字必须出现在async函数中！！！！

await用在某个表达式之前，如果表达式是一个Promise，则得到的是thenable中的状态数据。


async function test1(){
    console.log(1);
    return 2;
}

async function test2(){
    const result = await test1();
    console.log(result);
}

test2();

等效于


function test1(){
    return new Promise((resolve, reject)=>{
        console.log(1);
        resolve(2);
    })
}

function test2(){
    return new Promise((resolve, reject)=>{
        test1().then(data => {
            const result = data;
            console.log(result);
            resolve();
        })
    })
}

test2();