async/await 的理解和用法

async/await是什么
async/await 是ES7提出的基于Promise的解决异步的最终方案。

async:

• async是一个加在函数前的修饰符，被async定义的函数会默认返回一个Promise对象resolve的值。因此对async函数可以直接then，返回值就是then方法传入的函数。
• 函数的修饰符 控制函数返回promise实例
• 函数内部执行报错,则返回失败的promise实例,值是失败的原因
• 自己返回一个promise实例,以自己返回为主
• 如果函数内部做了异常捕获,则还是成功态

// async基础语法
async function fun0(){
    console.log(1);
    return 1;
}
fun0().then(val=>{
    console.log(val) // 1,1
})

async function fun1(){
    console.log('Promise');
    return new Promise(function(resolve,reject){
        resolve('Promise')
    })
}
fun1().then(val => {
    console.log(val); // Promise Promise
})

await

• await 也是一个修饰符，只能放在async定义的函数内。可以理解为等待。
• await 修饰的如果是Promise对象：可以获取Promise中返回的内容（resolve或reject的参数），且取到值后语句才会往下执行；
• 如果不是Promise对象：把这个非promise的东西当做await表达式的结果。
• 后面应该放置一个promise实例(就算我们在后面写的不是,浏览器也会把其变为promise实例)，await中断函数体中,其下面的代码执行(await表达式会暂停整个async函数的执行进程并出让其控制权)；
• 只有等待await后面的promise实例是成功态之后，才会把之前暂停的代码继续执行。
• 如果后面的promise实例是失败的,则下面的代码就不在执行了；
  await是异步微任务
• 函数体中遇到await,后面代码该咋地咋地,但是下面的代码会暂停执行(把他们当做一个任务，放置在EventQueue的微任务队列中)

async function fun(){
    let a = await 1;
    let b = await new Promise((resolve,reject)=>{
        setTimeout(function(){
            resolve('setTimeout')
        },3000)
    })
    let c = await function(){
        return 'function'
    }()
    console.log(a,b,c)
}
fun(); // 3秒后输出： 1 "setTimeout" "function"

function log(time){
    setTimeout(function(){
        console.log(time);
        return 1;
    },time)
}
async function fun(){
    let a = await log(1000);
    let b = await log(3000);
    let c = log(2000);
    console.log(a);
    console.log(1)
}
fun(); 
// 立即输出 undefined 1
// 1秒后输出 1000
// 2秒后输出 2000
// 3秒后输出 3000

async/await 的正确结合用法

// 使用async/await获取成功的结果

// 定义一个异步函数，3秒后才能获取到值(类似操作数据库)
function getSomeThing(){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('获取成功')
        },3000)
    })
}

async function test(){
    let a = await getSomeThing();
    console.log(a)
}
test(); // 3秒后输出：获取成功