ES6学习笔记(4)async的简单实用

async意思是异步

await的意思是等待

这两个关键字是在ES7中新加入的语法,如果要在浏览器中使用考虑到兼容性的问题,我们还是需要使用babel进行转换。七亩地是为了解决js中的异步问题。

现在异步解决方案有三种:

    回调函数

    promise

    async(Generator

因为js的异步机制,我们所有的异步操作都会被放到一个队列中,等到所有的同步的操作执行完毕了,才会去执行异步队列中的程序,回调函数是最基础的处理方案,也就是在某个异步操作操作完成以后对返回的结果进行操作。但是使用回调函数也会有一个问题,就是会产生回调地狱,而且,我们的函数会不好看。有的时候我们就是需要等到异步操作执行完成才能进行后面的操作,这样代码写起了就很难看。

而使用promise虽然能解决回调地狱的问题,但是他看起来还是不像是同步的代码,需要大量的 .then 操作,其实写多了也很烦的。而async就是号称是最终解决方案了。

如果我们需要获取到一个异步请求的数据,我们使用这三种方法应该怎么做呢?

回调函数

```

    getDate(res=>{clg res})

```

promise

```

    getDate.then(res=>{ clg res},res=>{ clg res})

```

async

```

    let res=await getDate()

```

可以看到上面两种都需要函数,虽然promise可以解决回调地狱的问题,但是写起了还是很麻烦的,需要写很多的.then

而async则是一种同步的写法了。

那么怎么写async的回调呢?

首先确定一点,async是基于promise来实现的,

getDate返回的是一个promise对象

例如

```

      request ({ method = 'post', url, data }) {
    let loadingInstance = Loading.service({
      text: '加载中'
    })
    return axios({
      url: url,
      method: method,
      data: data,
      // baseURL: 'http://localhost:8080/api' // test
      baseURL: 'http://localhost:2333/api' // prod
    })
      .then((result) => {
        return result.data
      }).catch((err) => {
        return err
      }).finally(() => {
        loadingInstance.close()
      })

  },

```

这个是请求数据的函数,可以看到是一个promise的函数,不管怎么样,他最后的时候总会返回一个数据,而async是一个前缀,可以这样说,我们给一个函数前面带上了async,那么这个函数就是异步的,可以使用await了,而await后面可以是一promise对象,而async函数返回一个promise对象,所以async函数可以用在另外一个async函数中,也可以当成是一个promise来使用,这里推荐第一种

```

      async getCommonSymptom () {
    let reslut = await util.request(
      {
        url: 'knowledge/getCommonSymptom'
      }
    )
    return reslut

  },

```

```

      async mounted () {
    this.commonSymptomList = (await knowledgeService.getCommonSymptom()).data.symptoms

  }

```

可以看到这样我们的代码看起来就很同步了

为什么要使用async在我看来还有一个作用,我们使用promise总是要去考虑resolve跟reject,这里需要两个函数,但是在现在的接口都是restful风格的情况下,很多时候resolve的结果也不见得就是自己需要的,反正最后都会返回数据进行判断,那我们为什么不直接使用if而非要使用多个函数呢?


总结一下

1、await必须在async里面

2、async作用于函数

3、async返回一个promise对象

4、await后最好跟一个promise函数,当然也可以是同步的,但是这个就没有意义了

猜你喜欢

转载自blog.csdn.net/aboyl/article/details/80561665