精华内容
参与话题
问答
  • await

    千次阅读 2019-11-13 15:55:40
    await 操作符用于等待一个Promise 对象。它只能在异步函数 async function 中使用。(The await operator is used to wait for a Promise. It can only be used inside an async function.) 语法 [return_value] = ...

    await 操作符用于等待一个Promise 对象。它只能在异步函数 async function 中使用。(The await operator is used to wait for a Promise. It can only be used inside an async function.)

    语法

    [return_value] = await expression;
    

    参数

    • expression:一个 Promise 对象或者任何要等待的值。
    • return_value: 返回 Promise 对象的处理结果。如果等待的不是 Promise 对象,则返回该值本身。

    await 表达式会暂停当前 async function 的执行,等待 Promise 处理完成。若 Promise 正常处理(fulfilled),其回调的resolve函数参数 作为 await 表达式的值,接着继续执行 async function。若 Promise 处理异常(rejected),await 表达式会把 Promise 的异常原因抛出。另外,如果 await 操作符后的表达式的值不是一个 Promise,await 会把该值转换为已正常处理的Promise并等待结果返回。(If the value of the expression following the await operator is not a Promise, it’s converted to a resolved Promise.)

    举例一:如果一个 Promise 被传递给一个 await 操作符,await 将等待 Promise 正常处理完成并返回其处理结果

    function resolveAfter2Seconds(x) {
        return new Promise(resolve => {
            setTimeout(() => {
                resolve(x);
            }, 2000);
        })
    }
    
    async function f1() {
        let x = await resolveAfter2Seconds('happy chen');
        console.log(x);
    }
    
    f1();
    console.log(f1());
    console.log(f1);
    //立即输出
    // Promise { <pending> }
    // [AsyncFunction: f1]
    //2s后输出
    // happy chen
    // happy chen
    

    举例二:如果该值不是一个 Promise,await 会把该值转换为已正常处理的Promise并等待结果返回

    async function f1(){
        let x = await 'happy chen';
        console.log(x);
    }
    
    f1();
    console.log(f1());
    console.log(f1);
    
    // Promise { <pending> }
    // [AsyncFunction: f1]
    // happy chen
    // happy chen
    

    举例三:如果 Promise 处理异常,则异常值被抛出

    async function f1() {
        try {
            let x = await Promise.reject('something wrong');
        } catch (e) {
            console.log(e);
        }
    }
    
    f1();
    console.log(f1());
    console.log(f1);
    // Promise { <pending> }
    // [AsyncFunction: f1]
    // something wrong
    // something wrong
    
    展开全文
  • 使用ES6新特性async await进行异步处理

    万次阅读 多人点赞 2018-07-12 15:56:30
    我们往往在项目中会遇到这样的业务需求,就是首先...那是相当恶心的,下面我就来讲一下如何使用ES6的新特性async await进行异步处理,使上述情况就好像写同步代码一样,首先我们先举个例子: 先写上json文件: cod...

    我们往往在项目中会遇到这样的业务需求,就是首先先进行一个ajax请求,然后再进行下一个ajax请求,而下一个请求需要使用上一个请求得到的数据,请求少了还好说,如果多了,就要一层一层的嵌套,就好像有点callback的写法了,那是相当恶心的,下面我就来讲一下如何使用ES6的新特性async await进行异步处理,使上述情况就好像写同步代码一样,首先我们先举个例子:
    先写上json文件:
    code.json:

    {
        "code":0,
        "msg":"成功"
    }
    

    person.json:

    {
        "code":0,
        "list":[
            {
                "id":1,
                "name":"唐僧"
            },
            {
                "id":2,
                "name":"孙悟空"
            },
            {
                "id":3,
                "name":"猪八戒"
            },
            {
                "id":4,
                "name":"沙僧"
            }
        ]
    }
    

    比如我们有两个请求,如下,这里用的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();
    

    个人认为做vue项目的时候,如果对于异常没有特殊处理,可以不加try catch,因为打印出来的错误跟vue自己报的错误是一样的,而且还是黑的字体,不如醒目的红色来的痛快啊!当然如果要对错误进行特殊处理,那么就加上吧

    代码风格是不是简便了许多,而且异步代码变成了同步代码,下面我稍微讲一下后者写法的代码执行顺序

    首先在 function 前面加 async 用来说明这个函数是一个异步函数,当然,async是要和await配合使用的,第一个请求

    let code = await getCode();
    

    await 意思是等一下,等着getCode()这个函数执行完毕,得到值后再赋值给code,然后再用code的值进行下一步操作,就是这么简单!!!赶紧去改代码!!

    展开全文
  • async await

    2021-01-08 10:19:40
    1. async 和 await 在干什么 async 是“异步”的简写,而 await 可以认为是 async wait 的简写。所以应该很好理解 async 用于申明一个 function 是异步的,而 await 用于等待一个异步方法执行完成。 await 只能出现...

    1. async 和 await 在干什么
    async 是“异步”的简写,而 await 可以认为是 async wait 的简写。所以应该很好理解 async 用于申明一个 function 是异步的,而 await 用于等待一个异步方法执行完成。
    await 只能出现在 async 函数中。如果 await 只能出现在 async 函数中,那这个 async 函数应该怎么调用?
    如果需要通过 await 来调用一个 async 函数,那这个调用的外面必须得再包一个 async 函数,然后……进入死循环。

    1.1. async 起什么作用
    这个问题的关键在于,async 函数是怎么处理它的返回值的!
    我们当然希望它能直接通过 return 语句返回我们想要的值,但是如果真是这样,似乎就没 await 什么事了。

      async function testAsync() {
        	return "hello async";
         }
    	const result = testAsync();
    	console.log(result);
    

    看到输出就恍然大悟了——输出的是一个 Promise 对象。

    Promise { 'hello async' }
    

    所以,async 函数返回的是一个 Promise 对象。从文档中也可以得到这个信息。async 函数(包含函数语句、函数表达式、Lambda表达式)会返回一个 Promise 对象,如果在函数中 return 一个直接量,async 会把这个直接量通过 Promise.resolve() 封装成 Promise 对象。

    补充知识点
    Promise.resolve(x) 可以看作是 new Promise(resolve => resolve(x)) 的简写,可以用于快速封装字面量对象或其他对象,将其封装成 Promise 实例。

    1.2. await 到底在等啥
    一般来说,都认为 await 是在等待一个 async 函数完成。不过按语法说明,await 等待的是一个表达式,这个表达式的计算结果是 Promise 对象或者其它值(换句话说,就是没有特殊限定)。
    因为 async 函数返回一个 Promise 对象,所以 await 可以用于等待一个 async 函数的返回值——这也可以说是 await 在等 async 函数,但要清楚,它等的实际是一个返回值。注意到 await 不仅仅用于等 Promise 对象,它可以等任意表达式的结果,所以,await 后面实际是可以接普通函数调用或者直接量的。所以下面这个示例完全可以正确运行

    function getSomething() {
        return "something";
    }
    
    async function testAsync() {
        return Promise.resolve("hello async");
    }
    
    async function test() {
        const v1 = await getSomething();
        const v2 = await testAsync();
        console.log(v1, v2);
    }
    test();
    

    1.3. await 等到了要等的,然后呢
    await 等到了它要等的东西,一个 Promise 对象,或者其它值,然后呢?我不得不先说,await 是个运算符,用于组成表达式,await 表达式的运算结果取决于它等的东西。
    如果它等到的不是一个 Promise 对象,那 await 表达式的运算结果就是它等到的东西。
    如果它等到的是一个 Promise 对象,await 就忙起来了,它会阻塞后面的代码,等着 Promise 对象 resolve,然后得到 resolve 的值,作为 await 表达式的运算结果。
    看到上面的阻塞一词,心慌了吧……放心,这就是 await 必须用在 async 函数中的原因。async 函数调用不会造成阻塞,它内部所有的阻塞都被封装在一个 Promise 对象中异步执行。

    展开全文
  • node异步用await和不用await的区别

    万次阅读 2018-05-10 10:21:37
    新版node异步用的是async/await这两个关键字。我们都知道,一般这两个关键字要成对出现。但是,笔者发现,如果不需要等待返回值的话,await可以不加。那么await加和不加有什么区别呢?百度以及google了大量资料,...

    最近在用node写项目。新版node异步用的是async/await这两个关键字。我们都知道,一般这两个关键字要成对出现。但是,笔者发现,如果不需要等待返回值的话,await可以不加。那么await加和不加有什么区别呢?百度以及google了大量资料,结合评论,最终在实践中弄明白了。下面直接上例子。

    不加await

    async test(ctx,next){
        this.doThing().then(console.log('done Thing'))
        this.doAnotherThing();
        console.log('this way');
      }
    
      async doThing() {
        this.doA();
        this.doB();
      }
      
      doAnotherThing() {
        console.log('do another thing')
      }
      
      async doA() {
        return new Promise(resove => {
          setTimeout(() => {
            console.log('done A')
            resove()
          }, 1000)
        })
      }
      
      async doB() {
        return new Promise(resove => {
          setTimeout(() => {
            console.log('done B')
            resove()
          }, 100)
        })
      }
    

    运行test函数以后,命令行迅速依次打印了如下结果
    这里写图片描述
    我们看到,没有加await,异步函数A,B顺序执行,由于A运行时间较长,所以B先执行完成,整个过程没有阻塞。

    加await

    async test(ctx,next){
        this.doThing().then(console.log('done Thing'))
        this.doAnotherThing();
        console.log('this way');
      }
    
      async doThing() {
        await this.doA()
        await this.doB()
      }
      
      doAnotherThing() {
        console.log('do another thing')
      }
      
      async doA() {
        return new Promise(resove => {
          setTimeout(() => {
            console.log('done A')
            resove()
          }, 1000)
        })
      }
      
      async doB() {
        return new Promise(resove => {
          setTimeout(() => {
            console.log('done B')
            resove()
          }, 100)
        })
      }
    

    运行结果如下 :
    这里写图片描述
    由于加了await,所以要等待异步事件A先完成,然后才会进行事件B。也就是await不会阻塞同步事件的运行,但是异步却是一个一个执行的,其中一个阻塞,下一个异步事件就无法继续。

    总结

    可见,await也并不是每次都要使用。如果不需要返回值的话,在执行的时候,不加await能够加快函数的运行。
    (以上为个人观点,如果错误或者不足,请大家批评指正)

    展开全文
  • axios 进行同步请求(async+await)

    万次阅读 2019-04-27 16:46:56
    一般使用axios进行数据请求就是要使用异步请求,一些需求...如果一定要同步的话,async+await 了解一下? methods: { async funA(){ var res = await axios.post('') //这里的res就是axios请求回来的结果 } } ...
  • Async Await

    2018-11-09 17:52:00
    async/await 规则: async 表示这是一个 async 函数,而 await 只能在这个函数里面使用。 await 表示在这里等待 await 后面的操作执行完毕,再执行下一句代码。 await 后面紧跟着的最好是一个耗时的...
  • 小伙伴们应该对C#中的await/async模式都很熟悉了,对于一个Task或者Task<T>对象,使用await进行异步任务的等待 那么对于一些方法的返回值是Task类型的异步方法呢? 比如说 private Task<int> Foo() {...
  • await表达式

    2019-06-18 15:25:56
    await表达式指定了一个异步执行的任务。由await关键字 和 一个空闲对象(称为任务task)组成。 这个任务可能是一个Task类型的对象,也可能不是。默认情况下,这个任务在当前线程异步运行。 然而实际上,并不需要...
  • ) misunderstood either the precedence issues or contexts in which await is a keyword rather than a possible identifier, but clarification would be good. <p>This is from an issue at ...
  • async和await

    2020-12-20 19:24:20
    文章目录前言一、什么是async和await?二、async和await的使用原始写法promise写法async/await写法 前言 一、什么是async和await? async 定义异步函数 返回值是promise对象 当调用异步函数时,函数返回值会被...

空空如也

1 2 3 4 5 ... 20
收藏数 46,402
精华内容 18,560
关键字:

await