Es6 之async await

使用异步方法async await时,在函数前面需要加上async，代表要进行异步操作 await是等待执行

一.基础写法

function loading(num){
        //resolve 接收成功
        //reject 接收失败
        let promise = new Promise((resolve,reject)=>{
        setTimeout(() => {
            if(num<5){
                resolve(`${num}小于5`)      
            }
                reject(`${num}大于5`) 
        }, num*10);
    })
    return promise   //必须要返回
}

async function Fun(){
    let num  = Math.ceil(Math.random()*10); //生成1-10的随机数
    let result = await loading(num).then((val)=>{
        //这里接收loading异步回调中成功的返回
        console.log(val)   //1小于5
        return val

    }).catch((val)=>{
        //这里接收loading异步回调中成错误的返回
        console.log(val)  //9大于5
        return val

    })
    console.log(result)   //这里result是不管是成功还是失败的返回值
    
}
Fun()

//正常情况下，await命令后面是一个 Promise 对象，
//返回该对象的结果。如果不是 Promise 对象，就直接返回对应的值

async function fun(){
    return await "555"
}
fun().then(v=>console.log(v))  //555```

二.传统Promise写法和await写法比较

 function loadingStep(n){
     return new Promise(res=>{    //执行一步方法，并返回结果
         setTimeout(() => {
             res(n+200)   //每次n+200  300+200  500+200 700+200
         }, n);
     })
 }  

 function step1(n) {
    console.log(`step1 with ${n}`);   //n == 300
    return loadingStep(n); //在这里调用loadingStep函数
}

function step2(n) {
    console.log(`step2 with ${n}`);  //n == 500
    return loadingStep(n);
}

function step3(n) {
    console.log(`step3 with ${n}`);  //n == 700
    return loadingStep(n);
}

1.Promise

 let asyncStpe = (()=>{
      let time = 300;
      console.log(time)    //首先执行
      step1(time) //这里执行第一个step1函数
      .then(time2=>step2(time2))    //这里接收第一次执行的loadingStep方法中的返回time2为返回值并在传入step2
      .then(time3=>step3(time3))    //这里接收第二次执行的loadingStep方法中的返回time3为返回值并往下执行
      .then(result =>{  //这里执行的是最后一步
        console.log(`result is ${result}`)
      })

  })
  asyncStpe()

2.async await写法 与上面的写法效果一致

async function asyncStpe(){
     let time = 300;
      console.log(time)    //首先执行
     const time1 = await step1(time)
     const time2 = await step2(time1)
     const result = await step3(time2)
     console.log(`result is ${result}`)
}

  asyncStpe()

输出结果：
300
index.html:23 step1 with 300
index.html:28 step2 with 500
index.html:33 step3 with 700
index.html:44 result is 900

错误处理

如果await后面的异步操作出错，那么等同于async函数返回的 Promise 对象被reject。

    async function f() {
        await new Promise(function(resolve, reject) {
            throw new Error('出错了')
        })
    }
    f().then(v => {
        console.log(e)

    }).catch(e => {
        console.log(`这里抛出${e}`) // 这里抛出Error: 出错了
    })

防止出错的方法，也是将其放在try…catch代码块之中