promise、async、await

一、promise【ES6新增】

语法上: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 失败状态的回调函数。finally:无论 Promise 是成功还是失败,都会执行的回调函数。
    • 设定 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(等待态)    |     resolved (成功态)    |     rejected(失败态)

  初始是 pending 状态,可以通过函数 resolve 和 reject ,将状态转变为 resolved 或者 rejected 状态,状态一旦改变就不能再次变化

二、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中是没有的

 

 

 

 

 

posted @ 2023-06-13 10:42  有只小菜猫  阅读(105)  评论(0)    收藏  举报