526互联

promise、async、await

发布时间 2023-06-13 10:51:12作者: 有只小菜猫

一、promise

语法上：promise是一个对象，从它可以获取异步操作的消息

本意上：它是承诺，承诺它过一段时间会给你一个结果

【如果想通过异步方法先后检测用户名和密码，需要先异步检测用户名，然后再异步检测密码的情况下就很适合 Promise】

1、创建

此构造函数包含一个参数和一个带有 resolve（解析）和 reject（拒绝）两个参数的回调

在回调中执行一些操作（例如异步），如果一切都正常，则调用 resolve，否则调用 reject。

var promise = new Promise(function(resolve, reject) {
    // 异步处理
    // 处理结束后、调用resolve 或 reject
});

2、promise的构造函数

Promise 构造函数返回一个 Promise 对象，该对象具有以下几个方法：

  • then：用于处理 Promise 成功状态的回调函数。
    • 可以将参数中的函数添加到当前 Promise 的正常执行序列
    • 传入的函数会按顺序依次执行，有任何异常都会直接跳到 catch 序列：
    • then 块默认会向下顺序执行，return 是不能中断的，可以通过 【throw】 来跳转至 catch 实现中断
  • catch：用于处理 Promise 失败状态的回调函数。
    • 设定 Promise 的异常处理序列
  • finally：无论 Promise 是成功还是失败，都会执行的回调函数。
  • 是在 Promise 执行的最后一定会执行的序列
//不同时间间隔输出三行文本
function print(delay, message) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log(message);
            resolve();
        }, delay);
    });
}

print(1000, "First").then(function () {
    return print(4000, "Second");
}).then(function () {
    print(3000, "Third");
});

3、Promise三种状态

　　pending(等待态)    |     fulfiled(成功态)    |     rejected(失败态)

　　状态一旦改变，就不会再变。创造promise实例后，它会立即执行

二、async await

【基于promise实现，也是非阻塞的异步转同步】

  • 里面的await只能在async函数中使用，await 指令后必须跟着一个 Promise
  • async 内部实现，又返回值 成功返回promise.resolve() ,出错返回promise.reject() 返回值用catch捕获
  • await语句后的Promise对象变成reject状态时，那么整个async函数会中断，后面的程序不会继续执行
  • async函数返回的是一个Promsie对象
//不同时间间隔，输出三行文本
function print(delay, message) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log(message);
            resolve();
        }, delay);
    });
}

async function asyncFunc() {
    await print(1000, "First");
    await print(4000, "Second");
    await print(3000, "Third");
}
asyncFunc();

3、处理异常的机制将用【 try-catch 】块实现

async function asyncFunc() {
    try {
        await new Promise(function (resolve, reject) {
            throw "Some error"; // 或者 reject("Some error")
        });
    } catch (err) {
        console.log(err);
        // 会输出 Some error
    }
}
asyncFunc();

 三、promise|async|await的区别

promise es6语法，promise中包含catch，async需要自己定义catch

promise 提供的方法会多一些，all、race等方法，aync中是没有的