zoukankan      html  css  js  c++  java
  • vue 中的 async await 异步 等待 按顺序执行

    async/await场景:

    这是一个用同步的思维来解决异步问题的方案,当前端接口调用需要等到接口返回值以后渲染页面时。

    async

    async的用法,它作为一个关键字放到函数前面,用于表示函数是一个异步函数,因为async就是异步的意思, 异步函数也就意味着该函数的执行不会阻塞后面代码的执行,async 函数返回的是一个promise 对象,可以使用then方法添加回调函数。当函数执行的时候,一旦遇到await就会先返回,等到异步操作完成,再接着执行函数体内后面的语句。

    await

    await的含义为等待。意思就是代码需要等待await后面的函数运行完并且有了返回结果之后,才继续执行下面的代码。这正是同步的效果。

    简单案例:

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

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

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

    我们获取到了"hello world',  同时timeout 的执行也没有阻塞后面代码的执行,和 我们刚才说的一致。

    await 是等待的意思,那么它等待什么呢,它后面跟着什么呢?其实它后面可以放任何表达式,不过我们更多的是放一个返回promise 对象的表达式。

    注意 await 关键字只能放到async 函数里面

    例子:现在写一个函数,让它返回promise 对象,该函数的作用是2s 之后让数值乘以2:

    // 2s 之后返回双倍的值
    function doubleAfter2seconds(num) {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(2 * num)
            }, 2000);
        } )
    }

    就这一个函数,我们可能看不出async/await 的作用,如果我们要计算3个数的值,然后把得到的值进行输出呢?

    async function testResult() {
        let first = await doubleAfter2seconds(30);
        let second = await doubleAfter2seconds(50);
        let third = await doubleAfter2seconds(30);
        console.log(first + second + third); // 220
    }

    现在调用testResult 函数,6秒后,控制台输出220, 我们可以看到,写异步代码就像写同步代码一样了,再也没有回调地域了。

    Vue项目案例

    async getTopicList() {
          let resp = await axios.get(`/topic`)
          if (resp.data.status === 1) {
            this.topicList = resp.data.data.data
          }
    }

    按顺序执行函数:

    async created() {
        await this.province()
        await this.city()
        await this.country()
    }

    上面会按顺序执行:省 市 县

    实例:

    data() {
        return {
            topicList: []
        }
    },
    created() {
        this.getTopicList()
        console.log(this.topicList)
    },
    methods: {
        async getTopicList() {
          let resp = await axios.get(`/topic`)
          if (resp.data.status === 1) {
            this.topicList = resp.data.data.data
          }
        }
    }

    可以看到打印出来的是空数组。因为这时候调用接口返回的数据还没有被赋值。

    修改下:

    data() {
        return {
            topicList: []
        }
    },
    async created() {
        await this.getTopicList()
        console.log(this.topicList)
    },
    methods: {
        async getTopicList() {
          let resp = await axios.get(`/topic`)
          if (resp.data.status === 1) {
            this.topicList = resp.data.data.data
          }
        }
    }

    刷新页面,可以看到打印出来的是已经被赋值的数组。

  • 相关阅读:
    洛谷P2664 树上游戏(点分治)
    洛谷P3366 【模板】最小生成树(Boruvka算法)
    loj#2312. 「HAOI2017」八纵八横(线性基 线段树分治)
    noi.ac#309 Mas的童年(子集乱搞)
    loj#6041. 「雅礼集训 2017 Day7」事情的相似度(SAM set启发式合并 二维数点)
    Windows phone应用开发[22]-再谈下拉刷新
    Windows phone应用开发[21]-图片性能优化
    Windows phone应用开发[20]-禁止Pivot手势
    Windows phone应用开发[19]-RSA数据加密
    Windows phone应用开发[18]-下拉刷新
  • 原文地址:https://www.cnblogs.com/joe235/p/15238208.html
Copyright © 2011-2022 走看看