用 async/await 来处理异步

本文介绍了如何使用async/await处理异步请求,以更简洁的方式替代传统的Promise链式调用。通过一个模拟的电话号码充值场景,展示了在Vue中利用axios发送异步请求获取省市区信息和充值面值的过程。利用async函数改造getFaceResult方法,使得代码更加清晰,避免了回调地狱。同时,文章还提及了异常处理,通过try/catch捕获并处理请求过程中可能出现的错误。
摘要由CSDN通过智能技术生成

git地址:https://gitee.com/minedy/async
用async/ await来发送异步请求,从服务端获取数据。

先说一下async的用法,它作为一个关键字放到函数前面,只有一个作用, 它的调用会返回一个promise 对象。调用一下,看看就知道了,怎么调用?async 函数也是函数,所以它的调用和普通函数的调用没有什么区别,直接加括号调用就可以了,为了看结果,console.log 一下。

在这里插入图片描述
在这里插入图片描述

async函数(timeout)的调用,确实返回promise 对象,并且Promise 还有status和value,如果async 函数中有返回值 ,当调用该函数时,内部会调用Promise.solve() 方法把它转化成一个promise 对象作为返回, 但如果timeout 函数内部抛出错误呢?

在这里插入图片描述

就会调用Promise.reject() 返回一个promise 对象,那么要想获取到async 函数的执行结果,就要调用promise的then 或catch 来给它注册回调函数,

在这里插入图片描述

如果async 函数执行完,返回的promise 没有注册回调函数,比如函数内部做了一次for 循环,你会发现函数的调用,就是执行了函数体,和普通函数没有区别,唯一的区别就是函数执行完会返回一个promise 对象。

在这里插入图片描述

async 关键字差不多了,最重要的就是async函数的执行会返回一个promise 对象,并且把内部的值进行promise的封装。

如果promise对象通过then或catch方法又注册了回调函数,async函数执行完以后,注册的回调函数就会放到异步队列中,等待执行。如果只是async, 和promise 差不多,但有了await就不一样了, await 关键字只能放到async 函数里面,await是等待的意思,那么它等待什么呢,它后面跟着什么呢?其实它后面可以放任何表达式,不过我们更多的是放一个返回promise 对象的表达式,它等待的是promise 对象的执行完毕,并返回结果。

现在写一个函数,让它返回promise 对象,该函数的作用是2s 之后让数值乘以2

在这里插入图片描述

现在再写一个async 函数,从而可以使用await 关键字, await 后面放置的就是返回promise对象的一个表达式,所以它后面可以写上 doubleAfter2seconds 函数的调用。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值