ES6之async和await

我们在写项目的时候,常常需要去请求数据,通常为了减少代码量,将请求的函数进行封装,页面加载时,避免页面出现空白,而是谁先加载出来,谁先进行展示,这时候就使用到了async和await

首先,我们要知道的一点是:async和await是generator和promise的语法糖

async

async将一个普通函数转换为异步函数

1.async可以作用于任何方法(回调函数,箭头函数...)前;返回值是一个promise对象

let fn=async function(){}
console.log(fn())//promise对象

2.函数内部return的返回值,会成为then回调函数的参数

let fn=async function(){
  return 11
}
fn().then(res=>{
    console.log(res)//11
})

3.async作用的方法,如果内部出现报错,可以被promise中的catch方法进行捕获; 常规使用,一般都会通过try catch的方法进行捕获

//第一种
let fn=async function(){
  throw new Error('错误')
}
fn.then().catch()
//第二种
let fn=async function(){
 try{///里面放常规的可能报错的代码
  const a=22
  a=33   //语法出现错误
 }catch(e){//进行错误获
  consoe.log(e)
 }
}
fn.then(res=>{})

JS中的错误捕获

不确定自己写的代码是否正确时,使用此方法,可以避免由于代码错误造成下面的代码无法执行

try{///里面放常规的可能报错的代码
 const a=22
 a=33   //语法出现错误
}catch(e){//进行错误获
 consoe.log(e) //打印的是出错的信息
}

await

await将异步转换为同步的过程

• await后面跟着一个promise对象;返回的是promise对象成功后的结果;如果是一个普通值,直接返回这个值

• await只能作用在async修饰的方法中.不能单独使用,如果使用报错

• reject返回的结果,await没有办法进行捕获;可以通过try catch进行捕获

• await会阻塞代码的执行,(要等他后面的promise执行完后,再执行下面的同步操作)

let p1=()=>{
  return new Promie((resolve,reject)=>{
     setTimeOut(()=>{
         resolve('11)
     },2000)
  })
}
                    
//await后面跟的是一个promise对象 
async function f2(){
     let res=await p1()
  }   
f2()    

---

async和await中的串行和并行

说起串行和并行,我们不免想到物理中的串联和并联,除去电流和电压,可以将这两者进行联想

Async的串行

• 先执行p1,等p1执行完后再执行p2,执行完成的时间是 两者之和

let p1=()=>{
 return Promise.resolve('p1')
}
let p2=()=>{
 return Promise.resolve('p2')
}
let fn=async function(){
    let p1val=await p1()  //结合await会阻塞代码的执行,进行理解
    let p2val=await p2()
    console.log( p1val, p2val)
}
fn()

Async 的并行

• 同时执行,执行完成的时间,取较大的那一个

let p1=()=>{
 return Promise.resolve('p1')
}
let p2=()=>{
 return Promise.resolve('p2')
}
let fn=async function(){
    //先使用一个变量,将实例的结果进行接收
    let p1val=p1() //此时的p1Val p2Val已经是promise执行后的结果;
    let p2val=p2()
    let f1=await p1val //此时的await就不必与阻塞进行联想了;
    let f2=await p2val
    console.log( f1, f2)
}
fn()

使用promise.all实现 并行的效果

let p1=()=>{
 return Promise.resolve('p1')
}
let p2=()=>{
 return Promise.resolve('p2')
}
let fn=async function(){
    let pAll=await Promise.all([p1,p2)
                                console.log(pAll)
}

注意:

实现并行

数量较少时,建议使用promise.all来提高性能

数量较多,若使用Promise.all则需要遍历,此时建议采用

let p1val=p1() 先让其执行,再let p1log=await p1Val

---

async和await实现回调地狱

 function getprovince(arg) {
            // console.log(arg);
            return new Promise((resolve, reject) => {
                //请求数据的逻辑
                // console.log(arg);
                let num = arg || 0 //设置默认值
                setTimeout(() => {
                    resolve(num + 1)
                }, 1000)
            })
        }
        async function fn() {
            let num1 = await getprovince(1)
            console.log(num1);
        }
        console.log(fn());

在进行省市区逻辑的请求的时候,完全可以在写定时器的位置,写上请求数据的逻辑,这样就可实现需求了

以上就是对async和await的简单介绍