精华内容
下载资源
问答
  • 今天看别人的单元测试代码的时候碰到了一段代码 await Vue.nextTick(),初看起来不是很懂,后来通过查资料弄懂了,记录下来,供以后开发时参考,相信对其他人也有用。 await Vue.nextTick() 我们都用过 Vue.nextTick...

    概述

    今天看别人的单元测试代码的时候碰到了一段代码 await Vue.nextTick(),初看起来不是很懂,后来通过查资料弄懂了,记录下来,供以后开发时参考,相信对其他人也有用。

    await Vue.nextTick()

    我们都用过 Vue.nextTick,但是在用的时候会在里面加一个回调函数的,但是有人直接这么使用:

    await Vue.nextTick();

    这是为什么呢?使用场景又是什么呢?

    Vue.nextTick

    要了解这段代码的含义,我们首先来看 Vue.nextTick() 如果不加回调函数会怎样?

    通过查阅官方文档,可以知道,Vue.nextTick() 里面如果加了回调,则会在下次 DOM 更新循环结束之后执行延迟回调。如果在修改数据之后立即使用这个方法,则可以获取更新后的 DOM。如果没有提供回调且在支持 Promise 的环境中 则会返回一个 Promise!!!

    所以 await Vue.nextTick() 相当于在 await 后面加了一个 Promise。

    await

    await 后面加一个 Promise 又会怎样呢?

    通过查阅资料,我们可以知道,await 后面必须跟 Promise,否则会报错;如果跟了 Promise,那么当执行到这里的时候,会先返回,等 Promise 返回后,再继续执行下面的代码。比如下面这段代码:

    async function f1() {
      console.log('xxxx');
      await new Promise();
      console.log('tttt');
    }

    当执行到 await new Promise(); 时,会先返回,等 Promise resolve 之后再才执行下面的 console.log('tttt');

    示例

    下面是一个简单的示例:

    function genPromise() {
      return new Promise(resolve => {
        console.log('await start');
        setTimeout(() => {
            console.log('await end');
          resolve();
        }, 0);
      });
    }
    
    async function f1() {
      console.log('xxxx');
      await genPromise();
      console.log('should be after await end');
    }
    
    f1();

    最后的打印结果是:

    xxxx
    await start
    await end
    should be after await end

    所以 await Vue.nextTick() 就和这个类似,它会在等 DOM 更新之后再执行后面的代码,其实就相当于把里面的代码拿出来写在后面了(仔细一想,这不就是 await 的常规用法吗?)

    转载于:https://www.cnblogs.com/yangzhou33/p/11432674.html

    展开全文
  • 主要介绍了vue中async-await的使用误区,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue中简单使用async和await

    千次阅读 2020-07-31 17:28:14
    async就是将函数返回值使用Promise.resolve()包裹了下,和then中处理返回值一样,并且await只能配套async使用,这两个名词也不是很陌生了,网上的资料一大把,这里简单说个使用场景和使用案例 场景: 我现在需要...

    前言:

          async就是将函数返回值使用Promise.resolve()包裹了下,和then中处理返回值一样,并且await只能配套async使用, 这两个名词也不是很陌生了,网上的资料一大把,这里简单说个使用场景和使用案例

    场景:

         我现在需要在执行其他方法之前,先请求后台获取数据,这里我不想用函数嵌套了,就可以用这个方法

    具体操作:

    1、先定义函数

     async toReadCard(tit) {
                    let card_no = '';
                    await useCode().then(res=>{
                        if(tit=='add'){
                            this.account.owner.cardID = res.data.card_no;//卡号
                            this.account.owner.bl_card = '00'+this.account.owner.employeeID//卡号展示内容
                        }
                        card_no =  res.data.card_no;
                    }).catch(error=>{
                        this.$Message.error('请先放置卡片!');
                    })
                    return card_no;
                },

       2、在外界调用这个函数

    let  aaa = this.toReadCard();

    3、得到的结果并不是  ‘’  而是我们后台传来的card_no

    结论:

    这个方法简单来说跟函数二次嵌套,在获取完第一个后台中调用第二个后台是一样的呈现效果

        

    展开全文
  • 昨天看了一篇vue的教程,作者用async/ await来发送异步请求,从服务端获取数据,代码很简洁,同时async/await 已经被标准化,也是需要学习一下了。 先说一下async的用法,它作为一个关键字放到函数前面, async ...
  • vue for 循环中使用 await

    千次阅读 2019-07-02 20:55:33
    await 和 async必须成对出现,如果调用await的地方,无法正确匹配到async则会报错,例如:forEach外面写async,forEach中使用await,则无法匹配。 async tidyData(){ item.categorys.forEach(async item2 => {...

    await 和 async必须成对出现,如果调用await的地方,无法正确匹配到async则会报错,例如:forEach外面写async,forEach中使用await,则无法匹配。

    async tidyData(){
        item.categorys.forEach(async item2 => {
            let customModelList = await this.tidyDataCustom(item2)
        })
    }
    

    forEach:

    async tidyData(){
        await Promise.all(
            item.categorys.forEach(async item2 => {
                let customModelList = await this.tidyDataCustom(item2)
            })
        )
    }
    
    

    for:

    async tidyData(){
        for(let item2 of item.categorys){
            // 款式选项数据整理
            let customModelList = await this.tidyDataCustom(item2)
        }
    }

    forEach属于并发操作,所以需要锁定住每一个循环体,而for不是并发操作,所以无需锁定每一次的循环。

    如果需要等待的方法中也去async并且等待里面的耗时操作,可以如下方式:

    tidyDataCustom(item2){
        return new Promise(async resolve => {
            await this.getCategoryStyle(item2)
            resolve()
        })
    }

    返回结果放入到resolve(xx)中,如果没有结果就resolve()

    展开全文
  • vue中异步函数async和await的用法 一,异步函数async 1.1,async作为一个关键字放到函数前面,用于表示函数是一个异步函数,因为async就是异步的意思, 异步函数也就意味着该函数的执行不会阻塞后面代码的执行。 ...

    vue中异步函数async和await的用法

    一,异步函数async

    1.1,async作为一个关键字放到函数前面,用于表示函数是一个异步函数,因为async就是异步的意思, 异步函数也就意味着该函数的执行不会阻塞后面代码的执行。 写一个async 函数。就是在函数前面加上async 关键字,来表示它是异步的,那怎么调用呢?async 函数也是函数,平时我们怎么使用函数就怎么使用。为了表示它没有阻塞它后面代码的执行,我们在async 函数调用之后加一句console.log。

    async timeout() {
        return 'timeout()方法执行。'
    },
    test () {
        this.timeout()
        console.log('虽然我在后面,但是我先执行!')
    }

    执行结果:

    1.2,接下来我们看一看timeout()执行返回了什么? 把上面的 timeout() 语句改为console.log(timeout())。

    async timeout() {
        return 'timeout()方法执行。'
    },
    test () {
        console.log(this.timeout())
        console.log('虽然我在后面,但是我先执行!')
    }

    执行结果:

    1.3, 可以发现原来async 函数返回的是一个promise 对象,如果要获取到promise 返回值,我们应该用then 方法, 继续修改代码。

    async timeout() {
        return 'timeout()方法执行。'
    },
    test () {
        this.timeout().then(res => {
            console.log(res)
        })
        console.log('虽然我在后面,但是我先执行!')
    }

    执行结果:

    1.4,我们获取到了"timeout()方法执行。', ,同时timeout 的执行也没有阻塞后面代码的执行,和我们刚才说的一致。此时你可能注意到控制台中的Promise 有一个resolved,这是async 函数内部的实现原理。如果async 函数中有返回值当调用该函数时,内部会调用Promise.resolve() 方法把它转化成一个promise 对象作为返回,但如果timeout 函数内部抛出异常呢? 那么就会调用Promise.reject() 返回一个promise 对象,继续修改一下timeout 函数。

    async timeout(flag) {
        if(flag) {
            return 'timeout()方法执行。'
        } else {
            throw 'timeout()方法执行失败!'
        }
        },
    test () {
        console.log(this.timeout(true))
        console.log(this.timeout(false))
        // console.log('虽然我在后面,但是我先执行!')
    }

    执行结果:

    如果函数内部抛出错误,promise 对象有一个catch 方法进行捕获。

    async timeout(flag) {
        if(flag) {
            return 'timeout()方法执行。'
        } else {
            throw 'timeout()方法执行失败!'
        }
        },
    test () {
        console.log(this.timeout(true))
        this.timeout(false).then(res => {
            console.log(res)
        })
        // console.log('虽然我在后面,但是我先执行!')
    }

    执行结果:

    二,同步函数await

    1.1,await是等待的意思,代码执行到 await 表示等一下,代码就暂停到这里,不再向下执行了,它等什么呢?等后面的promise对象执行完毕,然后拿到promise resolve 的值并进行返回,返回值拿到之后,它继续向下执行。。注意await 关键字只能放到async 函数里面,在vue中开启Eslint 会检测到。

    calculate (var1) {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
              resolve(1000*var1)
            }, 3000)
          })
        },
    async getCalcResult (params) {
        console.log('等待计算结果中...')
        const result = await this.calculate(params)
        console.log('获取计算结果为:' + result)
    },
    test () {
        this.getCalcResult(10)
    }

    执行结果:

    总结:async 和 await 基于 promise 的。 使用 async 的函数将会始终返回一个 promise 对象。 这一点很重要。

    展开全文
  • var arr = [1,2,3,4,5,] arr.forEach( async (item)=>... await this.test(item) }) async test(item){ var res = await self.axios.post("https://www.baidu.com/",{id:item.id}) console.log(res) }
  • 用async/await 来处理异步 近期项目中大量使用async,从服务器获取数据,解决一些并发传参问题。代码很简单。在此也看了一些博客,现在async/await已经大范围让使用,是时候总结一波啦。 先说一下async的语法,它...
  • vue中async和await

    2020-07-28 18:55:51
    async 可以用在函数的前面,表示这个函数是一个异步的方法。 await 表示可以用于promise方法前。表示等待这个方法返回结果。并且会自动获取promise的成功的回调参数。
  • vue中使用async和await处理异步

    千次阅读 2020-05-27 18:00:59
    然后在进行下一个axios请求,但是此次的请求需要,用到上一次请求返回来的参数,因为axios是异步的,所以可以axios请求嵌套获取,但当数据多的时候,页面会非常的乱,此时就需要用到async和await的使用,使上述情况...
  • vue async/await同步

    千次阅读 2020-04-03 20:18:42
    async created() { await List({}).then((response) => { console.log(response) this.Data = response }) this.change() }, methods: { change() { // 会议选择框选择 c...
  • vue中async和await用法(地狱回调)

    千次阅读 2020-09-29 16:25:00
    } ) } 现在再写一个async 函数,从而可以使用await 关键字, await 后面放置的就是返回promise对象的一个表达式,所以它后面可以写上 doubleAfter2seconds 函数的调用 async function testResult() { let ...
  • 备注:我这里用的vue3 //请求一 const one = async() => { let params = {} const res = await $http(params) return res } //请求二 const two = async() => { let params = {} const res = await $http...
  • Vue中async await的使用示例

    千次阅读 2018-12-21 04:59:46
    想要await按照预期来执行,就必须是promise methods: { getAll() { return new Promise((resolve, reject) => { this.$axios.get(eventApi.getAllUsers).then(response => { let a = respon...
  • vue中async await使用过程

    千次阅读 2018-11-29 18:03:24
    async await就是把异步的请求按同步请求,这是我在项目中用到的 我在created中:
  • 主要介绍了vue如何使用async、await实现同步请求,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • vue使用promise、async、await的一点理解

    万次阅读 2019-02-20 19:35:31
     //await可以阻塞Promise对象,await=async wait,await只能出现在async函数内部      async request(){  var url = this.url  var a = new Promise(resolve=>{  this.axios.post(url,   post...
  • 1、async是否在await的最近的方法的外层 例: async mounted() { this.getSysTime(res => { itime = setInterval(async () => { // 注意这个async才能生效 await this.request(); }, 1000);
  • vue 函数(一):async/await方法同步

    千次阅读 2020-09-22 16:44:00
    如果某些场景对顺序有要求,需要同步(按顺序)执行,可以使用async搭配await实现,await函数不能单独使用。 语法如下: async methodName(params){ let isSuccess = false; await this.$http({ url: URL, ...
  • vue中用async/await 来处理异步

    千次阅读 2019-03-26 10:54:59
    用async/ await来发送异步请求,从服务端获取数据,等待获取数据,然后处理数据。 methods: { async generateData (){ let _result = await getProductslist() this.datalist = _result.data let _arr = this...
  • script type="text/javascript" src="../lib/vue-2.4.0.js"></script> <script type="text/javascript" src="../lib/vue-resource-1.3.4.js"></script> <div id="app"> <input type...
  • vue中使用async/await处理异步请求

    千次阅读 2020-02-25 15:53:55
    vue使用axios向后端发送请求。默认是异步发送请求。 例如: handleSubmitTest(systemId) { fetchGetProjectInfoBySystemId(systemId).then(response => { const projectObj = response.data.dat...
  • vue.js await 报错

    2020-07-08 07:39:49
    ErrorCode: 报错代码: 解决方法:
  • VUE用JS ES6特性 async await 处理请求接口数据 增 删 改 created() { this.getRoleList() this.getCompanyInfo() }, methods: { async getRoleList() { const { total, rows } = await getRoleList(this....
  • Vue 循环中使用 await

    2021-11-06 21:01:22
    await this.b() } b() { return new Promise((resolve, reject) => { setTimeout(() => { resolve('成功') }, 1000) }) } forEach 外面写 async forEach 中使用 await 匹配不到 async ...
  • vue中async await请求处理

    千次阅读 2020-04-13 10:38:31
    (async () => { await Promise.all([wait(3000), wait(1000), wait(2000)]) // 依次打印:wait 1000ms wait 2000ms wait 3000ms })() 问题:接口B需要接口A返回的数据,如果同时请求,控制不了返回速度,会出现B快于...
  • Vue3.2setup 到 顶层 await

    2021-12-08 10:38:07
    1.setup直接挂再script <script setup lang="ts"> </script> 2.defineProps // props 改为defineProps // ... 顶层 await 如果使用await setup前面会自动加一个async const data = await fetch("") 6. 限制使用scr导入

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 29,497
精华内容 11,798
关键字:

awaitvue

vue 订阅