20190611-对async和await的一点理解

首先看下这段代码：

async function submit(){
    console.log('请求开始！')
    
    let data = await fetch('127.0.0.1:8888')
        .then(res => res.json())
        .then(res => {
            console.log('请求成功！')
            return res
        })
        
    console.log('请求结束')；
}

console.log('请求成功了么？')；

执行这这段代码，你会发现控制板输出的数据顺序

'请求成功了么？'
'请求开始！'
'请求成功！'
'请求结束！'

async

定义

MDN:

async function 声明用于定义一个返回 AsyncFunction 对象的异步函数。异步函数是指通过事件循环异步执行的函数，它会通过一个隐式的 Promise 返回其结果。但是如果你的代码使用了异步函数，它的语法和结构会更像是标准的同步函数。

通俗的讲，就是「异步」。让这个fn支持异步继续，所以首先打印出来的是

'请求成功了么？'

async利用了影藏的promise对象，来控制函数异步进行，所以你在执行async中，console会出来一个promise对象。

同时需要搭配await来阻塞内部异步，来讲操作

await

定义

MDN：

await表达式会暂停当前「async function」的执行，等待Pormise处理完成，若Promise正常处理，则回调的resolve函数作为await表达式的值，继续进行async function。

表达式

一个 Promise 对象或者任何要等待的值。

返回值

返回 Promise 对象的处理结果。如果等待的不是 Promise 对象，则返回该值本身。

所以上面代码，内部的执行顺序是

async function submit(){
    // 开始执行
    console.log('请求开始！')
    
    // 遇到await，等待处理结果
    let data = await fetch('127.0.0.1:8888')
        .then(res => res.json())
        .then(res => {
            // 处理完成，返回处理结果
            console.log('请求成功！')
            return res
        })
    
    // 等待await处理完成后，执行。
    console.log('请求结束')；
}

注意：如果返回值不是Promise，则把该值转换为已经常处理的Promise，等待处理结构（就是抛出该值）

async function f2() {
  var y = await 20;
  console.log(y); // 20
}
f2();

应用场景

await可以阻塞主函数，直到后面的Promise对象处理完成，这就很容易的解决了按顺控制异步操作。

• 当B请求必须要A请求完成后，才能根据A请求的结果，进行是否继续请求B的时候
• 根据所有请求完成后，进行统计请求成功、失败数量等
• 异步操作最后的回调