await与wait的用法区别 java await跟wait的区别

转载

blueice 2023-12-19 22:15:40

文章标签 javascript 返回结果异步方法异步操作 文章分类 Java 后端开发

微信小程序学习总结（async，await）

1，async，await和promise

首先是async和await，async和await是async和await两部分组成，async是异步的意思，而await是async wait的简写，所以async用于声名function是一个异步的，await用于等待异步方法执行

async:
async是加在一个function之前的，它的作用是将function变为异步的操作，而这个异步操作的返回值是一个promise对象

async function a1 (){
            return "a1"
        }
        const result = a1()
        console.log(result)
//打印结果
Promise {<fulfilled>: "a1"}
__proto__:Promise
		[[PromiseStatus]]: "fulfilled"
         [[PromiseValue]]: "a1"

所以当写上了async在函数之前时函数内部return 一个直接量的话，async会直接返回一个promise实例

所以直接调用这个a1()方法配合.then方法来拿到a1中return的内容

async function a1 (){
            return "a1"
        }
        const result = a1()
        a1().then(res=>{
            console.log(res) //输出的"a1"
        })

让我们再来看一下promise a1()的返回值如果是一个普通的promise对象时

function a1 (){
            return new Promise((reslove,reject)=>{
                reslove("a1")
            })
        }
        const result = a1()
        a1().then(res=>{
            console.log(res) //输出的"a1"
        })

可见确实是与普通的promise对象无异

但是如果 async中没有返回值会是什么样子的

async function a1 (){
            console.log(1)
        }
        const result = a1()
        a1().then(res=>{
            console.log(res) //输出的"underfind"
        })

可见的是它会返回一个undefined，这时候想一下promise的特点是无需等待所以在没有await的方法下他会立即执行返回promise对象不会阻塞后部分的语句于普通promise无异样

所以，现在让我们来看关键字await

await:
上边说到await是等async的他是等async的完成等的是一个表达式表达式的结果是promise对象或者其他值
以为async函数返回一个promise对象所以await可以用来等待一个async函数的返回值，这也可以说awite是在等待async函数，要记住的是他等待的数一个返回值，await不仅仅用来等待promise对象他可以等任何表达式的结果所以 await后面可以接普通的函数调用或者直接量

function a1 (){
            return "a1"
        }
        async function a2(){
            return Promise.resolve("a2")
        }
        async function ok(){
            const v1 = await a1()
            const v2 = await a2()
            console.log(v1,v2)
        }
        ok()

当await等到了他要等的东西

如果这个东西不是一个promise对象那么awai表达式结果就是他等到的东西

如果等到的是promise对象的话await就会忙起来他会阻塞后面的代码等着promise 的返回值然后得到resolve的值中作为await表达式返回结果

注意：因为await会阻塞代码所以 await会和async一起使用才可以不然浏览器会报错

了解async和await帮我们做了什么
上面说了async会返回一个promise对象而awite会等待这个async的promise完成并将reslove的结果返回出来
模拟：先不用async和await

function a1(){
            return new Promise((resolve,reject)=>{
                setTimeout(() => resolve("a1"), 1000);
            })
        }
        a1().then(res=>{
            console.log("这个是a1:",res)
        })
        //结果是隔了一秒钟 控制台打印“ 这个是a1: a1 ”

接下来用上async和await

function a1(){
            return new Promise((resolve,reject)=>{
                setTimeout(() => resolve("a1"), 1000);
            })
        }
        async function test(){
            const v = await a1()
            console.log("这个是a1":v)
        }
        test()
  //结果是隔了一秒钟 控制台打印"这个是a1: a1"

两种方法的结果可以明显看到并没有太大差异而且 async/awaite还要多了几行代码

async/awaite的优势是什么
async/awaite的优势在于处理.then链

function addtime(n) {
            return new Promise(resolve => {
                setTimeout(() => resolve(n + 200), n);
            })
        }
        function a1 (n){
            console.log("步骤1：：：",n)
            return addtime(n)
        }
        function a2(n){
            console.log("步骤2：：：",n)
            return addtime(n)
        }
        function a3(n){
            console.log("步骤3：：：",n)
            return addtime(n)
        }
        function start(){
            console.time("start")
            const time1 = 300
            a1(time1).then(time2=>a2(time2)).then(time3=>a3(time3)).then(result=>{
                console.log("结果是：：：",result)
                console.timeEnd("start")
            })
        }
        start()
        //返回值
         步骤1：：： 300
 		步骤2：：： 500
 		步骤3：：： 700
		结果是：：： 900
 		start: 1505.947998046875ms

上面这个是利用.then处理的

下面来用async/await来处理

function addtime(n) {
            return new Promise(resolve => {
                setTimeout(() => resolve(n + 200), n);
            })
        }
        function a1 (n){
            console.log("步骤1：：：",n)
            return addtime(n)
        }
        function a2(n){
            console.log("步骤2：：：",n)
            return addtime(n)
        }
        function a3(n){
            console.log("步骤3：：：",n)
            return addtime(n)
        }
        async function start(){
            console.time("start")
            const time1 = 300
            const time2 = await a1(time1)
            const time3 = await a2(time2)
            const result = await a3(time3)
            console.log("结果是：：：",result)
            console.timeEnd("start")
        }
        start()
        //结果：
        test.html:18 步骤1：：： 300
  	    步骤2：：： 500
 	    步骤3：：： 700
  	    结果是：：： 900
 	    start: 1505.614990234375ms

结果可见于 promise还是一样的但是代码的看着特别清晰

更有趣的
改下上面案例的业务需求还是三个步骤每个步骤结束都加上一个步骤结果
先用async/awaite来写

function addtime(n) {
            return new Promise(resolve => {
                setTimeout(() => resolve(n + 200), n);
            })
        }
        function a1 (n){
            console.log("步骤1：：：",n)
            return addtime(n)
        }
        function a2(m,n){
            console.log("步骤2：：：",m,n)
            return addtime(m+n)
        }
        function a3(k,m,n){
            console.log("步骤3：：：",k,m,n)
            return addtime(k+m+n)
        }
        async function start(){
            console.time("start")
            const time1 = 300
            const time2 = await a1(time1)
            const time3 = await a2(time1,time2)
            const result = await a3(time1,time2,time3)
            console.log("结果是：：：",result)
            console.timeEnd("start")
        }
        start()
        //结果 步骤1：：： 300
 			步骤2：：： 300 500
			 步骤3：：： 300 500 1000
			结果是：：： 2000
			:36 start: 2906.759033203125ms

用promise来写

function addtime(n) {
            return new Promise(resolve => {
                setTimeout(() => resolve(n + 200), n);
            })
        }
        function a1(n) {
            console.log("步骤1：：：", n)
            return addtime(n)
        }
        function a2(m, n) {
            console.log("步骤2：：：", m, n)
            return addtime(m + n)
        }
        function a3(k, m, n) {
            console.log("步骤3：：：", k, m, n)
            return addtime(k + m + n)
        }
        async function start() {
            console.time("start")
            const time1 = 300
            a1(time1).then(time2 => {
                return a2(time1, time2).then(time3 => [time1, time2, time3])
            }).then(times => {
                const [time1, time2, time3] = times
                return a3(time1, time2, time3)
            }).then(result => {
                console.log("结果是：：：", result)
                console.timeEnd("start")
            })

        }
        start()
        //结果：
        步骤1：：： 300
 		步骤2：：： 300 500
 		步骤3：：： 300 500 1000
 		结果是：：： 2000
 		start: 2907.22705078125ms

结果也是差不多的但是 promise传参麻烦这里就体现了 async/await的好处了