一个简单的实例帮你彻底学会async和await的用法
一个简单的实例帮你彻底学会async和await的用法,但是接口请求并没有返回我们需要的数据,console.log(333333)正常执行,最后在我们异步执行完成后执行了console.log(222222),所以我们的代码并没有等异执行完在执行下面的同步操作,而是先执行了所有同步任务,最后执行了异步操作,这下明白了吗。,再来看看不加await输出结果。我们声明一个普通函数getDatas,这个
首先我相信很多人都知道async和await,并且知道他们可以解决异步问题,比如请求一个接口,我们下面的同步操作需要等这个接口的返回值做判断,一般我们就直接写在成功的回调里面,但是如果请求接口很多,那就成了回调地狱,而async+await很好的解决了这个问题,直接把异步变同步,按顺序执行,接下来看实例
第一步:
我们声明一个async开头的函数getData,为什么这样写,可以去百度。这里只讲怎么使用,不讲底部原理,非要问为什么,那就是规定就是这样写
第二步:
我们声明一个普通函数getDatas,这个函数里面写了一个异步请求,用来获取后台数据
第三步:
在async getData() 函数里使用 await this.getDatas()方式调用getDatas函数,看看输出结果
可以看到我们的代码是按同步顺序输出的,这里的异步也被视为同步执行了,那么如果我们不加await是什么结果呢,就是调用 this.getDatas时这样写使用常规的异步调用, let res = this.getDatas();,再来看看不加await输出结果
很明显了把,console.log(11111)正常执行,console.log(res)正常执行,但是接口请求并没有返回我们需要的数据,console.log(333333)正常执行,最后在我们异步执行完成后执行了console.log(222222),所以我们的代码并没有等异执行完在执行下面的同步操作,而是先执行了所有同步任务,最后执行了异步操作,这下明白了吗
async getData() {
console.log(11111)
let res = await this.getDatas();
console.log(res)
console.log(333333)
if(res.data.status === '0') {
// 逻辑
}else if(res.data.status === '1') {
// 逻辑
}
},
getDatas() {
return new Promise((resolve,reject)=>{
this.$c.api.ConfirmOrderEnterpriseAndPersonal.treeMobileExpress({
flag: 0,
}).then((res) => {
console.log(222222)
resolve(res)
});
})
},
小结:其实有些东西并不是我们表面看到的那么复杂,当你花时间去了解他之后,其实你会发现不过如此,往往真正容易让人犯错的地方都是一些简单而经常出现的问题,都是因为太马虎,async+await是不是就这样学会怎么使用了,可以理解就是用来把异步函数变为同步函数执行的方法,你学废了吗?
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
所有评论(0)