首先我相信很多人都知道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是不是就这样学会怎么使用了,可以理解就是用来把异步函数变为同步函数执行的方法,你学废了吗?

在这里插入图片描述

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐