async和await对promise异步方案的改进，以及使用注意事项

async、await相比原生promise的有优势：

1.更加简洁,await一个promise即可,那么会自动返回这个promise的resolve值，无需在then函数的回调中手动取值，彻底解决了回调

//Promise方式
 function f() {
    let promise = new Promise((resolve, reject) => {
        setTimeout(() => resolve('done!'), 1000)
    })
    promise.then((res) => {
        console.log('object :', res);
    })
}
f()

//async、await
async function f() {
    let promise = new Promise((resolve, reject) => {
        setTimeout(() => resolve('done!'), 1000)
    })
    let result = await promise // 直到promise返回一个resolve值（*）
    console.log('object :', result);
}
f()

2.避免了then链式调用的，没有设置失败回调而导致异常被抛出到then链的末端，而导致被忽略,向下面代码一样，如果then没有设置失败回调，那么默认的失败回调会将异常抛给下一个then函数的失败回调，如果末端没有一个catch函数。那么异常就会丢失，问题是如果catch代码中的异常处理代码又有异常抛出呢，那么这个异常只能在下一个then中捕获，这是容易被忽略的错误

//promise
let p = new Promise((resolve, reject) => {
    reject()
})
p.then().then().catch()

async任意一个await出现了异常，await会自动抛出reject，并且程序会被停止,异常统一在try-catch块可以捕获而不会出现捕获链无限延长的问题

//async、await
async function f() {
    let promise = new Promise((resolve, reject) => {
        setTimeout(() => reject('done!'), 1000)
    })
    try {
        let result = await promise // 直到promise返回一个resolve值（*）
    } catch (error) {
        console.log('object :', error);
    }
}
f()

3.then链式流中，数据访问不能很自然的跨层访问

MongoClient.connect(url + db_name).then(db=> {
    return db.collection('blogs');
}).then(coll=> {
    return coll.find().toArray();
}).then(blogs=> {
    console.log(blogs.length);
}).catch(err=> {
    console.log(err);

先连接数据库MongoClient.connect()返回一个Promise，然后在then()方法里获得数据库对象db，然后再获取到coll对象再返回。在下一个then()方法获得coll对象，然后进行查询，查询结果返回，逐层调用then()方法，形成一个Promise链。

这时候我们有一个需求,第三个then(blogs => {})中我们只能获取到查询的结果blogs，而不能使用上面的db对象和coll对象。这个时候，如果要打印出blogs列表后，要关闭数据库db.close()怎么办？

两种处理方式：

1.使用then嵌套

MongoClient.connect(url + db_name).then(db=> {
    let coll = db.collection('blogs');
    coll.find().toArray().then(blogs=> {
        console.log(blogs.length);
        db.close();
    }).catch(err=> {
        console.log(err);
    });
}).catch(err=> {
    console.log(err);

问题:
这会打断Promise链，导致then的回调地狱,而且导致在每一个then中都需要手动捕获异常，因为then没成链，不能自然传递异常

2.每个then()方法里都将db传过来

扫描二维码关注公众号，回复： 3655315 查看本文章

MongoClient.connect(url + db_name).then(db=> {
    return {db:db,coll:db.collection('blogs')};
}).then(result=> {
    return {db:result.db,blogs:result.coll.find().toArray()};
}).then(result=> {
    return result.blogs.then(blogs=> {   //注意这里，result.coll.find().toArray()返回的是一个Promise，因此这里需要再解析一层
        return {db:result.db,blogs:blogs}
    })
}).then(result=> {
    console.log(result.blogs.length);
    result.db.close();
}).catch(err=> {
    console.log(err);

问题:
我们在then方法中，都将db和其他结果合并成一个对象，特别需要注意的是，如果传递的值含有promise，那么还需要多做一层解析，也就是需要单独给予一个then函数进行处理，况且每次都要传递一个多余的对象(对于到达实际使用地方这段路径，这个对象是不需要使用的)

async、await方案:

let getBlogs = async function(){
    let db = await MongoClient.connect(url + db_name);
    let coll = db.collection('blogs');
    let blogs = await coll.find().toArray();
    db.close();
    return blogs;
};
 
getBlogs().then(result=> {
    console.log(result.length);
}).catch(err=> {
    console.log(err);

这里await解决了then链的问题，使得then跨层访问的问题从根本上被解决了，因为await的promise的resolve值被置于同一个作用域，可以随意访问

4.使得原本异步非阻塞的表达方式，变成了更加同步阻塞的代码，这得益于ES6中生成器和迭代器，赋予js函数的魔力，本质上，async、await是生成器和迭代器以及Promise结合的语法糖，它使得promise之前设计缺陷被更好地修正，目前看来，async、await，是异步的终极解决方案之一

async function basicDemo() {
    let result = await Math.random();
    console.log(result);
}

basicDemo();

await由于自动返回了resolve的值，无需then，我们甚至没有感知到异步的存在，他将异步从语法层面上进行了同步化

async、await使用注意事项:

1.await虽然可以像Promise.resolve作用域很多类型的数据，但它的主要意图是用来等待Promise对象被resolved，如果await是非promise值，那么会被立即执行

2.async函数将返回值自动包装成一个promise，就像Promise.resolve一致的行为

3.await必须在async函数上下文，也就是如下代码的区别

// 正常 for 循环
async function forDemo() {
    let arr = [1, 2, 3, 4, 5];
    for (let i = 0; i < arr.length; i ++) {
        await arr[i];
    }
}
forDemo();//正常输出
// 因为想要炫技把 for循环写成下面这样
async function forBugDemo() {
    let arr = [1, 2, 3, 4, 5];
    arr.forEach(item => {
        await item;
    });
}
forBugDemo();// Uncaught SyntaxError: Unexpected identifier

4.小心自己的并行处理，也许不小心就将ajax的并发请求发成了阻塞式同步的操作，理解这句话的核心是: await若等待的是promise,那么程序就会在此处等到promise的resolved，然后继续往下,看下面例子,这里第一个sleep会等待自身resolved完成才会往下，如果我们可以让这些函数并行，同时保持await的特性，那么效率会大大提高

function sleep(second) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('request done! ' + Math.random());
        }, second);
    })
}

async function bugDemo() {
    await sleep(1000);
    await sleep(1000);
    await sleep(1000);
    console.log('clear the loading~');
}

bugDemo();

正确的姿势是:

async function correctDemo() {
    let p1 = sleep(1000);
    let p2 = sleep(1000);
    let p3 = sleep(1000);
    await Promise.all([p1, p2, p3]);//这里单独await每一个promise也是一样的效果
    console.log('clear the loading~');
}
correctDemo();// clear the loading~

async和await对promise异步方案的改进，以及使用注意事项

猜你喜欢