ES6语法之：异步、Promise

女爷i 2023-08-17 16:48 107阅读 0赞

### 首先，为什么要使用异步？ ###

我在[一篇文章][Link 1]中看到这样的说法：

> 在JavaScript的世界中，所有代码都是单线程执行的。由于这个“缺陷”，导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行。

说的更详细点，为什么**单线程**就需要异步呢？比如执行下面三个函数：

fun1();
    fun2();
    fun3();

如果三个函数执行速度都很快，单线程也没关系，顺序执行就是了。问题是，fun2()可能很**耗时**，这时fun3就需要等在那里，等fun2()返回了再执行。

fun3不想等怎么办呢？将fun2()改为异步函数，可以解决**阻塞**的问题。但如果fun3()依赖fun2的返回结果呢？有多重解决方案，所以你看，异步让fun3有了**选择的权利**，可以等待也可以不等待，而同步的话，fun3只能傻等。

### 什么是Promise？ ###

Promise是ES6的语法，Promise作为一个构造函数，可以生成一个Promise实例，[一般这么用][Link 2]：

### Promise的优点？ ###

可以将“回调地狱”的写法改为工整的“.then”写法，[MDN][]举了一个点餐的例子：

//改良前
    chooseToppings(function (toppings) {
        placeOrder(toppings, function (order) {
            collectOrder(order, function (pizza) {
                eatPizza(pizza);
            }, failureCallback);
        }, failureCallback);
    }, failureCallback);

//改良后
    chooseToppings()
    .then(toppings => placeOrder(toppings))
    .then(order => collectOrder(order))
    .then(pizza => eatPizza(pizza))
    .catch(failureCallback);

### 我的例子 ###

Promise一般用于Web API的调用中，我试着举个例子，模拟一下（不一定准确）：

// server
    async function readTest() {
        let a = 123;
        return a;
    }
    
    // client interface
    function apiTest() {
        let data = readTest();
        return data;
    }
    
    // main
    function getA() {
        let result = apiTest();
        console.log(result);
    }
    
    getA();

sever是一个web服务，返回一个Promise；client interface是一个包装的、与服务端交互的接口；main调用这个接口，拿到服务结果123，并打印出来。

在node环境下执行这段代码，你会发现打印的是一个Promise对象，而非123，因为data是个Promise对象。将client interface改为下面的样子：

function apiTest() {
        readTest().then((x) => {
            return x;
        });
    }

x是123了，但getA()并没有拿到123，即没有等待getA()返回结果。

下面Promise对象登场，这样就可以正确打印了：

// server
    async function readTest() {
        let a = 123;
        return a;
    }
    
    // client interface
    function apiTest() {
        return new Promise((resolve, reject) => {
            let data = readTest();
            resolve(data);
        });
    }
    
    // main
    function getA() {
        const promise = apiTest();
        promise.then((result) => {
            console.log(result);
        });
    }
    
    getA();

ES 2017引入了async/await的写法：

// server
    async function readTest() {
        let a = 123;
        return a;
    }
    
    // client interface
    async function apiTest() {
        let data = await readTest();
        return data;
    }
    
    // main
    async function getA() {
        let result = await apiTest();
        console.log(result);
    }
    
    getA();

[Link 1]: https://www.liaoxuefeng.com/wiki/1022910821149312/1023024413276544
[Link 2]: http://es6.ruanyifeng.com/#docs/promise
[MDN]: https://developer.mozilla.org/zh-CN/docs/learn/JavaScript/%E5%BC%82%E6%AD%A5/Promises%E8%AF%AD%E6%B3%95