js基础之Promises和async/await

MDN地址：

 优雅的异步处理 - 学习 Web 开发 | MDN

 async和await:让异步编程更简单 - 学习 Web 开发 | MDN

Promises

顾名思义，Promise表示一个承诺。承诺未来某个时间会执行某个操作。

Promise主要是为了解决js编程中回调地狱的问题。先看一个旧式的例子：

chooseToppings(function(toppings) {
  placeOrder(toppings, function(order) {
    collectOrder(order, function(pizza) {
      eatPizza(pizza);
    }, failureCallback);
  }, failureCallback);
}, failureCallback);

可以看到，回调函数的多层调用，使代码可读性变差，而且不利于维护。

使用Promise则会变成这样：

chooseToppings()
.then(function(toppings) {
  return placeOrder(toppings);
})
.then(function(order) {
  return collectOrder(order);
})
.then(function(pizza) {
  eatPizza(pizza);
})
.catch(failureCallback);

或者更加简洁：

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

使用promise

我们通过new Promise(func)来实例化一个Promise对象，其中func表示我们事先已经实现的一个函数，这个函数正常有两个参数：resolve, reject。两个参数都是回调函数，分别在当Promise执行成功或失败的时候触发。使用示例：

function test(resolve, reject) {
    console.log(Math.random())
    
    var timeOut = Math.random() * 2;
    console.log('set timeout to: ' + timeOut + ' seconds.');
    setTimeout(function () {
        if (timeOut < 1) {
            console.log('call resolve()...');
            resolve('200 OK');
        } else {
            console.log('call reject()...');
            reject('timeout in ' + timeOut + ' seconds.');
        }
    }, timeOut * 1000);
}


var p = new Promise(test);
p.then(function (result) {
    console.log('成功：' + result);
}).catch(function (reason) {
    console.log('失败：' + reason);
});

当然，then()返回的依旧是一个Promise对象，所以如果有多层回调，我们可以继续这样写：then().then().....

Promise就先简单介绍到这吧。

async/await

顾名思义，async表示异步，await表示异步的等待。

async/await 是配套使用的，他们是对Promise的进一步改良，主要是为了使代码更好看，多层Promise的时候传参更加方便。

async是做了一个规范：使用async修饰的函数或方法，一定返回的是一个Promise对象。

await修饰一个返回值为Promise对象的方法，获取这个Promise执行成功的返回值。await所在的函数或方法必须使用async进行修饰。

示例：

function takeTime(n) {
  return new Promise((resolve) =>
    setTimeout(() => {
      resolve(n + 200);
    }, 1000)
  );
}


var time1 = 300;
async function test() {
    var res = await takeTime(time1);
    console.log(res);
}

test();

至于它好在哪里，明显看到，我们的代码单行编写，只接收了成功的返回值，看起来更加简洁，如果出现多层调用，也更加方便赋值。

注：下班了，实在不想写了。先做个简单的介绍，后面有空，我再把博文补充得详尽一些。