async 、await、Promise

mygoes

已于 2022-03-20 17:35:37 修改

阅读量225

点赞数

分类专栏： async await promise 文章标签： vue javascript es6 轮询

于 2020-07-23 22:19:32 首次发布

本文链接：https://blog.csdn.net/mygoes/article/details/107549455

版权

async 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

await

1 篇文章 0 订阅

订阅专栏

promise

1 篇文章 0 订阅

订阅专栏

async 和 await 的使用

参考文档：

MDN | async function

作用：

异步代码以同步的方式进行书写。代码本身依旧是异步的。

用法：

例🌰一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>async 和 await 的使用</title>
</head>
<body>
    <button id="btn">模拟登录</button>
</body>
<!-- 导入 axios -->
<script src="./axios.min.js"></script>
<script>
    // 得到按钮
    let btn = document.querySelector('#btn')
    
    // 原本写法：添加点击事件
    btn.onclick = function() {
        // 异步请求（异步书写）
        axios({
            url: 'http://ttapi.research.itcast.cn/app/v1_0/authorizations',
            method: 'POST',
            data: {
                mobile: '13838383838',
                code: '123456'
            }
        }).then(res => {
            console.log(res)
            // 大量的逻辑代码
        })
    }
    // 改进写法：添加点击事件
    btn.onclick = async function() {
        // 异步请求（同步书写）
        let res = await axios({
            url: 'http://ttapi.research.itcast.cn/app/v1_0/authorizations',
            method: 'POST',
            data: {
                mobile: '13838383838',
                code: '123456'
            }
        })
        console.log(res)
    }
</script>
</html>

例🌰二：

<template>
	<div>
		<button @click="login">登录按钮</button>
	</div>
</template>

......

data(){
	return{
		obj:{
			mobile: '13838383838',
			code: '123456',
		}
	}
},
methods:{
	// 原本写法
	login(){
		// 异步请求代码
		apiLogin(this.obj).then(res => {
			console.log(res.data.data)
		}
	}

	// 改进写法
	async login(){
		let res = await apiLogin(this.obj)
		console.log(res.data.data)
	}
}

例🌰三：

var now = Date.now();

// Promise 写法：
Pet.create({
    id: 'g-' + now,
    name: 'Gaffey',
    gender: false,
    birth: '2007-07-07',
    createdAt: now,
    updatedAt: now,
    version: 0
}).then(function (p) {
    console.log('created.' + JSON.stringify(p));
}).catch(function (err) {
    console.log('failed: ' + err);
});

// await 写法：
(async () => {
    var dog = await Pet.create({
        id: 'd-' + now,
        name: 'Odie',
        gender: false,
        birth: '2008-08-08',
        createdAt: now,
        updatedAt: now,
        version: 0
    });
    console.log('created: ' + JSON.stringify(dog));
})();

以上是往数据库中塞一些数据，可见 await 的写法更好一些。

Promise

以轮询为例：

<script>
export default {
  data () {
    return {
      pollingST: null
    }
  },
  methods: {
    // 分页change事件
    pageChange (params) {
      // 清除现有定时器
      clearTimeout(this.pollingST)
      // 调用轮询
      this.polling(params)
    },
    // 请求接口方法
    getData() {
      return new Promise(resolve => resolve({}))
    },
    // 轮询方法
    polling() {
      this.getData().then(res => {
        this.pollingST = setTimeout(() => {
          clearTimeout(this.pollingST)
          this.polling(params)
        }, 10000)
      })
    }
  },
  created () {
    this.polling() // 调用轮询
  },
  destroyed () {
    clearTimeout(this.pollingST)
  }
}
</script>