异步处理 async & await & promise 解析

2020-04-22  本文已影响0人  _luchao

promise

promise 用来处理异步回调;
优点:代码风格清晰明了 ,不需要层层嵌套callback

promise的3种状态

待定:初始状态,既未实现也不被拒绝。
完成:表示操作成功完成。
拒绝:表示操作失败。

promise只有两条路
待定------->完成
待定------->拒绝
当状态改变的时候 ,出发then();

promise 的两个参数 resolve,rejuect

Promise数据处理成功叫给resolve处理;
Promise会自动捕获内部异常,并交给rejected响应函数处理。

假设有三个这样接口方法,我们要获取到最后的age属性,用promise 可以这样写:

getId(){//获取id 的接口
   return new Promise(resolveFun=>{
     setTimeout(()=>{
       resolveFun('37092119910201')
     },3000)
   })
 }
 getName(id){//通过id 查找 Name
   return new Promise(resolveFun=>{
     setTimeout(()=>{
       resolveFun('LuChao')
     },3000)
   })
 }
 getAge(Name){//通过偶Name 查找Age
   return new Promise(resolveFun=>{
     setTimeout(()=>{
       resolveFun('18')
     },3000)
   })
 }

这样调用:

 getId().then(id=>{
    // console.log("id----->",id)
    getName(id).then(name=>{
        // console.log("name----->",name);
        getAge(name).then(age=>{
          console.log('age------>',age)
        })
    })
  })

async 和 await

async , await 其实就是promise的语法糖,实际上 async 和await 在编译后 ,会转化成promise
上述这种实现 用 async 和 await 会更简洁更清晰

 async getInfo(){
  let id = await this.getId();
  let name = await this.getName();
  let age = await this.getAge()
  console.log(age)
 }
getInfo()//18

这样的代码 可读性更强了。 变得更像是同步代码,简单清晰;


promise.all

我们修改一下 这个3个接口 ,修改成 后面2个接口 都可以通过id 获取到name,age;我们最后的需求是获取到 name,age;

getId(){//获取id 的接口
   return new Promise(resolveFun=>{
     setTimeout(()=>{
       resolveFun('37092119910201')
     },3000)
   })
 }
 getName(id){//通过id 查找 Name
   return new Promise(resolveFun=>{
     setTimeout(()=>{
       resolveFun('LuChao')
     },3000)
   })
 }
 getAge(Name){//通过偶id 查找Age
   return new Promise(resolveFun=>{
     setTimeout(()=>{
       resolveFun('18')
     },3000)
   })
 }
getId().then(id=>{
     Promise.all([getAge(id),getName(id)]).then(resArr=>{
       console.log(resArr)
     })
   })

Promise.all() 接收一个数组(一些异步方法,且以promise为返回值);
Promise.all 会将这些promise方法,组合成一个大的promise,返回值是一个数组(resArr),
resArr包含了所有promise 的返回值;
当所有的子Promise都完成,该Promise完成,返回值是全部值得数组
有任何一个失败,该Promise失败,返回值是第一个失败的子Promise结果

上一篇下一篇

猜你喜欢

热点阅读