js异步之async/await

async/await是Javascript的异步流程控制的一种方案,可以在async函数里面用同步的写法来实现异步的操作,使用非常方便

async函数

async函数不同于generator函数和普通函数,总是返回一个promise对象(后文用p表示),如果async函数有返回值,使用p.then来获取,如果async函数有抛出错误,使用p.catch来获取

await表达式

await会“暂停”当前async函数的执行,返回promise处理的结果,然后继续往下执行

await只能在async函数里面执行

举个栗子

async function getBook(url) {
    let book = await rp(url, {json: true});
    if (!book) {
        throw new Error('No book...')
    }
    return book;
}

let gb = getBook('https://api.douban.com/v2/book/isbn/9787115299710');
gb.then(res => {
    // return value;
    console.log(res);
}).catch(err => {
    // throw error
    console.log(err);
});

避免错误使用

在编写代码的时候,使用的是同步的写法,但是其实内部运行还是异步的。举个栗子

function getBook (url) {
    console.log(`sending book url is ${ url }`);
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('book data');
        }, 3000)
    })
}

function getMusic (url) {
    console.log(`sending music url is ${ url }`);
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('music data');
        }, 1000);
    });
}

上面模拟两个异步请求getBook和getMusic,分别是3秒和1秒后返回数据

function getBook (url) {
    console.log(`sending book url is ${ url }`);
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('book data');
        }, 3000)
    })
}

function getMusic (url) {
    console.log(`sending music url is ${ url }`);
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('music data');
        }, 1000);
    });
}

从结果可以看出,从请求到输出耗时4s左右,虽然看起来没什么问题,但是还是可以优化的,因为两个接口无相互依赖,所以可以实现并行请求的,减低请求消耗的时间,改为下面这种写法

async function getData() {
    let gBook = getBook('https://www.baidu.com');
    let gMusic = getMusic('https://tmall.com');
    let music = await(gMusic);
    let book = await(gBook);
}

对比两种写法,第一种获取到book和music所需要的时间是4s左右,第二种只需要3s左右,减少了1s左右的延迟

Promise.all

另外如果要并行请求多个相同url的请求,可以使用Promise.all方法来获取结果,例如

async function getBookByIds (ids) {
    let books = ids.map(async id => {
        // await加不加都一样?
        return await getBookById(id);
    });
    Promise.all(books).then(res => {
        console.log(res);
    });
}

 

标签: javascript

目录

评论

*
*

正在加载验证码......

最新评论

  • 无评论