精华内容
下载资源
问答
  • 今天看别人的单元测试代码的时候碰到了一段代码 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

    展开全文
  • m using Vue components, and in some components I use async/await: <pre><code>javascript methods: { async someMethod() { await this.foo(); } } </code></pre> <p>This always worked fine, but with ...
  • 使用async和await封装vue中的http请求

    千次阅读 2019-03-26 09:13:00
    // let loginInfo = await this.http.post('/api/login/doLogin', this.loginInfo) // const token = loginInfo.data.token // // 提交mutation 保存token // this.$store.commit('updateToken', token) // this....
    • 实际需求中经常会碰到想异步请求代码写的像同步一样简洁,解决回调地狱,这是最近封装的一个。
    // import qs from 'qs';
    import axios from 'axios'
    import utils from './util'
    import { Toast, Dialog } from 'mand-mobile'
    import store from '@/store'
    import config from '../config/index'
    
    let baseUrl = config.baseUrl // 设置你的baseUrl
    
    const CancelToken = axios.CancelToken
    const source = CancelToken.source()
    // 设置token
    function setToken () {
    	if (utils.local.get('token')) {
    		axios.defaults.headers.common['token'] = utils.getLocal('token');
    	}
    }
    
    // 请求验证拦截器
    axios.interceptors.request.use(config => {
        // Toast是示例代码,实际需要根据自己的编写
    	// Toast.loading('加载中...')
    	return config
    })
    axios.interceptors.response.use(res => {
        // 此段为公司的业务代码,可根据自己的实际情况编写
    	// Toast.hide()
    	// const code = res.data.error_code
    	// const msg = res.data.error_msg
    	// if (code !== '0000') {
    	// 	if (code == '1001') {
    	// 		location.href = '/#/login'
    	// 	} else {
    	// 		Dialog.confirm({
    	// 			title: '提示',
    	// 			content: msg,
    	// 			confirmText: '确定',
    	// 			onConfirm: () => console.log('[Dialog.confirm] confirm clicked'),
    	// 		})
    	// 	}
    	// }
    
    	return res.data
    })
    
    //封装请求方法
    function formatReq(type, url, data) {
    	const tempObj = new FormData()
    	for(let i in data) {
    		tempObj.append(i, data[i])
    	}
    	tempObj.append('token', store.state.token)
    	setToken()
    	return new Promise((reslove, reject) => {
    		axios({
    			method: type,
    			url: `${baseUrl}${url}`,
    			// headers: {
    			// 	//这里的请求头与后台商量设置
    			// 	// 'content-Type': 'application/x-www-form-urlencoded'
    			// 	'content-Type': 'application/x-www-from-urlencoded'
    			// },
    			cancelToken: source.token,
    			// data: qs.stringify(data) //java后台用qs转
    			// data:JSON.stringify(data)//PHP后台用JSON转
    			data: tempObj//PHP后台用JSON转
    		})
    		.then(r => {
    			// store.commit('UPDATE_LOADING', false); //隐藏loading
    			//这里可以添加指定对应状态码的处理方式,比如登陆过期,res.data.code === '6666' 路由跳转到login
    			reslove(r);
    		})
    		.catch(e => {
    			// store.commit('UPDATE_LOADING', false); //隐藏loading
    			reject(e.message);
    		});
    	});
    }
    
    const Http = {
    	get: (url, query) => {
    		url = utils.formatUrl(url, query)
    		setToken();
    		return axios.get(`${baseUrl}${url}`, { cancelToken: source.token }).then(r => r);
    	},
    	post: (url, data) => formatReq('post', url, data),
    	put: (url, data) => formatReq('put', url, data),
    	patch: (url, data) => formatReq('patch', url, data),
    	delete: (url, data) => formatReq('delete', url, data)
    };
    
    export default Http;
    
    //处理get请求,传入参数对象拼接
    // let formatUrl = (url, obj) => {
    // 	let params = Object.values(obj).reduce((a, b, i) => `${a}${Object.keys(obj)[i]}=${b}&`, '?');
    // 	return `${url}${params.substring(0, params.length - 1)}`;
    // };
    
    // 使用示例
    // methods: {
    //     async login() {
    //         let loginInfo = await this.http.post('/api/login/doLogin', this.loginInfo)
    //         const token = loginInfo.data.token
    //         // 提交mutation 保存token
    //         this.$store.commit('updateToken', token)
    //         this.cookie.set('token', token)
    //         Toast.succeed('登录成功')
    //         setTimeout(() => {
    //             this.$router.push('/')
    //         }, 300)
    //     }
    // }
    
    

    转载于:https://my.oschina.net/chinahufei/blog/3027742

    展开全文
  • vue await fetch 使用

    千次阅读 2018-08-19 21:38:44
    await/async 是 ES7 最重要特性之一,它是目前为止 JS 最佳的异步解决方案了。 先说一下async的用法,它作为一个关键字放到函数前面,用于表示函数是一个异步函数,因为async就是异步的意思, 异步函数也就意味...

    await/async 是 ES7 最重要特性之一,它是目前为止 JS 最佳的异步解决方案了。


    先说一下async的用法,它作为一个关键字放到函数前面,用于表示函数是一个异步函数,因为async就是异步的意思, 异步函数也就意味着该函数的执行不会阻塞后面代码的执行。

    写一个async 函数

    async function timeout() {
      return 'hello world';
    }

       语法很简单,就是在函数前面加上async 关键字,来表示它是异步的,那怎么调用呢?async 函数也是函数,平时我们怎么使用函数就怎么使用它,直接加括号调用就可以了,为了表示它没有阻塞它后面代码的执行,我们在async 函数调用之后加一句console.log;

    async function timeout() {
        return 'hello world'
    }
    timeout();
    console.log('虽然在后面,但是我先执行');

    fetch 基本使用方法点击 这里

    下边一个小例子说个基本的请求吧

    <template>
      <div id="app">
        <button @click="fetchData()" >fetch 获取数据</button>
        <p>{{text}}</p>
      </div>
    </template>
    
    <script>
    export default {
      name: 'app',
      data () {
        return {
          text:''
        }
      },
      methods:{
        fetchData(){
          // fetch是相对较新的技术,当然就会存在浏览器兼容性的问题,当前各个浏览器低版本的情况下都是不被支持的,因此为了在所有主流浏览器中使用fetch 需要考虑 fetch 的 polyfill 了
    
          async function ff(){
            let data = await fetch('../static/data.json').then(res => res.json());
            console.log(data,'data');
            return data;
          }
          ff().then(res => {
            console.log(res,'res');
            this.text = 'name:'+res.name+',age:'+res.age+'sex:'+res.sex;
          }).catch(reason => console.log(reason.message));
    
        }
      }
    }
    </script>
    
    <style lang="scss">
    
    </style>
    
    展开全文
  • vue async await写法

    2021-01-16 03:14:01
    methods: { // 获取所属地 getLocation(phoneNum) { return axois.post('/location', {phoneNum}); }, // 根据属地获取充值面额列表 getFaceList(province, city) { ... // 采取async await 方式调用.
    methods: {
        // 获取所属地
        getLocation(phoneNum) {
            return axois.post('/location', {phoneNum});
        },
        // 根据属地获取充值面额列表
        getFaceList(province, city) {
            return axois.post('/location', {province, city});
        },
        // 采取async await 方式调用
        async getFaceResult() {
          // 异常需要通过try catch补货  
          try {
              let location = await this.getLocation(this.phoneNum);
              // 程序会等待上一个请求完成才进行下一条的语句执行
              
              if (location.data.success) {
                  let province = location.data.province;
                  let city = location.data.city;
                  let result = await this.getFaceList(province, city);
                  if (result.data.success) {
                      this.faceList = result.data;
                  }
              }
          } catch(err) {
              console.log(err);
          }
        }
    }
    
    展开全文
  • Vue Promise async await

    2020-07-31 10:35:15
    Promise 是什么 * * * * Promise 简单用法 function2(){ // 你的逻辑代码 return Promise.resolve(/* 这里是需要返回的数据*/) ... return Promise.resolve(/* 这里是需要返回的数据*/) ... this.
  • vue: await is a reserved word

    千次阅读 2019-08-05 11:38:22
    vue: await is a reserved word 问题:在vue element组件里面的,组件表单校验成功后,先新增或者编辑一条记录,再刷新列表或者提示错误信息 报错代码: 报错原因: 因为错把async放到createdData上,这里async和...
  • 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-04-03 16:16:42
    vue async/await同步 案例 1.async/await场景 这是一个用同步的思维来解决异步问题的方案,当前端接口调用需要等到接口返回值以后渲染页面时。 2.名词解释 >async async的用法,它作为一个关键字放到函数...
  • vue中async和await

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

    2020-08-17 15:42:16
    vue async/await异步示例 1.async/await场景 这是一个用同步的思维来解决异步问题的方案,当前端接口调用需要等到接口返回值以后渲染页面时。 2.名词解释 async的用法,它作为一个关键字放到函数前面,用于表示函数...
  • vue关于await与async

    2021-04-14 15:32:34
    vue关于await与async 前言:作为一个从小听到老师讲课就犯困的人来说,对我自己学习最好的方法就是自己写代码测试,虽然这样学习时间成本大点,但是对知识的理解与印象肯定高不少,写这篇文章来帮助像我这样的人来理解...
  • 这篇文章主要介绍了vue如何使用async、await实现同步请求,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下以下是vue method的demo:loadTableData : 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 => {...
  • 主要介绍了vue中用 async/await 来处理异步操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue.js await 报错

    2020-07-08 07:39:49
    ErrorCode: 报错代码: 解决方法:
  • 主要介绍了vue中async-await的使用误区,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 要求被装饰的方法必须写成async/await,用起来十分方便,实现彻底被隐藏在了装饰器内部。前两个都是用在ts环境下class写法的vue里的。不过看清楚逻辑后,很容易修改成可以用在js环境中的vue组件...
  • 这篇文章主要介绍了vue如何使用async、await实现同步请求,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下以下是vue method的demo:loadtabledata : async ...
  • 示例: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>vue 钩子函数 使用async await</title> </head> <body>...
  • 主要介绍了vue如何使用async、await实现同步请求,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 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) }

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,548
精华内容 619
关键字:

awaitvue

vue 订阅