async await使用

作者: 白菜_37e2 | 来源:发表于2019-07-04 18:36 被阅读0次

async 函数是什么?一句话,它就是 Generator 函数的语法糖。

async/await是写异步代码的新方式,以前的方法有回调函数和promise

是基于promise实现的,他不能用于普通的回调函数

是非阻塞的,使得异步代码捡起来想同步代码

使用场景常常会遇到,请求完一个接口,拿完值再去请求另外一个接口,我们之前回调callback函数处理,如果很多的情况下,看起来很冗余,这时我们可以用async函数。

比如我们有两个请求,如下,这里用的axios:

function getCode(){

      return axios.get('json/code.json');

  }

 function getlist(params){

      return axios.get('json/person.json',{params})

  }

我们第二个请求获取列表的时候需要使用第一个请求得到的code值,只有code值为0时,才能请求,而且当做参数传进去,那么我们看一下常规的做法吧

function getFinal(){

      console.log("我是getFinal函数")

      getCode().then(function(res){

         if(res.data.code == 0){

               console.log(res.data.code);

                 var params = {

                      code:res.data.code

                  }

               getlist(params).then(function(res){

                    if(res.data.code == 0){

                         console.log(res.data.list);

                       }

                   })

                }

          })

      }

  getFinal();

来一个async await的写法

async function getResult(){

            console.log("我是getResult函数")

            let code = await getCode();

            console.log(code.data.code);

            if(code.data.code == 0){

                var params = {

                    code:code.data.code

                }

                let list = await getlist(params);

                console.log(list.data.list);

            }

        }

getResult();

处理异常,可以加上try catch

async function getResult(){

            console.log("我是getResult函数")

            try{

                let code = await getCode();

                console.log(code.data.code);

                if(code.data.code == 0){

                    var params = {

                        code:code.data.code

                    }

                    let list = await getlist(params);

                    console.log(list.data.list);

                }

            }catch(err){

                console.log(err);

            }

        }

getResult();

基本用法:

返回promise对象

有时,我们希望即使前一个异步操作失败,也不要中断后面的异步操作。这时可以将第一个await放在try...catch结构里面,这样不管这个异步操作是否成功,第二个await都会执行。

async function f() {

  try {

    await Promise.reject('出错了');

  } catch(e) {

  }

  return await Promise.resolve('hello world');

}

f()

.then(v => console.log(v))

// hello world

如果有多个await命令,可以统一放在try...catch结构中。

async function main() {

  try {

    const val1 = await firstStep();

    const val2 = await secondStep(val1);

    const val3 = await thirdStep(val1, val2);

    console.log('Final: ', val3);

  }

  catch (err) {

    console.error(err);

  }

}

相关文章

网友评论

    本文标题:async await使用

    本文链接:https://www.haomeiwen.com/subject/zffdhctx.html