JS异步之promise、async+await基本使用

2019-10-16

所谓同步执行，就是从前往后执行，一句执行完了执行下一句。

而异步执行，则不会等待异步代码执行完，直接执行后面的代码；等异步代码执行完返回结果之后再进行处理。

比如一些耗时操作会使用异步执行的方式，以提高执行效率，最常见的莫过于Ajax网络请求。

以jQuery Ajax为例，假设有这样的需求：

从地址A获取数据a，从地址B获取数据b，然后把数据a和b提交到接口C

ES6：Promise

如何用Promise执行jQuery Ajax请求：

// 用于返回jQuery Ajax的Promise方法，从而简化代码
let promisifyAjaxRequest = function(url, data){
    let method = data ? 'post' : 'get';
    return new Promise(function(resolve, reject){
        $.ajax({
            url: url,
            type: method,
            data: data,
            success: function(res){
                resolve(res);
            },
            error: function(res){
                reject(res);
            }
        });
    });
};
// 显示加载提示
$.showLoading();
// 用于保存请求数据结果
let result = [];
promisifyAjaxRequest('https://example.com/api/a').then(function(data){
    result.push(data);
    return promisifyAjaxRequest('https://example.com/api/b');
}).then(function(data){
    result.push(data);
    return promisifyAjaxRequest('https://example.com/api/c', {
        a: result[0],
        b: result[1]
    });
}).then(function(data){
    $.hideLoading();
    $.toast('请求成功');
}).catch(function(err){
    $.alert('请求失败: ' + err);
    $.hideLoading();
});

可以看到使用Promise之后的代码变得更加简洁和统一。

但是Promise也有不足之处，就是使用起来不是特别直观。

ES7：async+await

在ES7中，提供了async和await关键字，被称为异步的终极解决方案。

这个方案其实也是基于Promise实现的，具体细节就先不展开，还是重点来看使用方式。

使用async+await来实现前面需求：

// 因为基于Promise实现，所以同样需要返回Promise
let promisifyAjaxRequest = function(url, data){
    let method = data ? 'post' : 'get';
    return new Promise(function(resolve, reject){
        $.ajax({
            url: url,
            type: method,
            data: data,
            success: function(res){
                resolve(res);
            },
            error: function(res){
                reject(res);
            }
        });
    });
};
// 函数定义前面加上async关键字
async function ajaxRequests(){
    // promise方法前面加上await关键字，可以接收返回结果
    let a = await promisifyAjaxRequest('https://example.com/api/a');
    let b = await promisifyAjaxRequest('https://example.com/api/b');
    let data = await promisifyAjaxRequest('https://example.com/api/c', {
        a: a,
        b: b
    });
    return data;
}
// 显示加载提示
$.showLoading();
// 执行请求
// 用法同Promsie
ajaxRequets().then(function(data){
    $.hideLoading();
    $.toast('请求成功');
}).catch(function(err){
    $.alert('请求失败: ' + err);
    $.hideLoading();
});

可以看到，async+await的写法更加直观，也更像同步的写法。

作者：黑客与码农链接：https://juejin.im/post/5b699cb36fb9a04f8e145343来源：掘金著作权归作者所有。