简单理解Promise, Async, Await的用法

参考视频:https://www.bilibili.com/video/BV1rK4y1J7dm

Promise解决的是将程序的异步执行变成同步的过程

		function one(){
            return "I am one"
        }
        function two(){
            return "I am two"
        }
        function three(){
            return "I am three"
        }
        function run(){
            console.log(one())
            console.log(two())
            console.log(three())
        }
        run();

输出:
在这里插入图片描述
如果function two要对后端发一个请求,发送请求的时候服务器需要进行响应,需要一定的响应时间才能完成,我们用setTimeout模拟一下这个时间

		function one() {
            return "I am one"
        }
        function two() {
            setTimeout(() => { return "I am two" }, 3000)
        }
        function three() {
            return "I am three"
        }
        function run() {
            console.log(one())
            console.log(two())
            console.log(three())
        }
        run();

输出:
在这里插入图片描述
为什么function two变成了undefined?
这是因为我们这个two()里面有一个请求,这个请求还没有完成,但是run()方法中的console.log是不会等到two()方法执行完了之后再执行的。

引出Promise,开发中很多时候都是需要等到请求完成之后再处理(就是异步变成同步)

新建Promise对象基础格式
new Promise((resolve,reject)=>{})

resolve:成果返回…
resolve:失败返回…

修改function two()

		function two() {
            return new Promise((resolve, reject) => {
                setTimeout(() => { resolve("I am two") }, 3000)
            })
        }

输出:
在这里插入图片描述
function two()输出的是一个Promise对象的pending状态

为什么是一个pending的状态?

虽然我们已经把这个two()的方法改成了一个Promise,但是我们在调用这个方法的时候并没有声明:需要等这个Promise完成了之后再继续往下执行。

声明等这个Promise完成了之后再继续往下执行

需要用到 Async, Await
首先需要在function run的前面加上async,表示run()方法下面有Promise的请求的调用
然后在调用Promise方法的前面加上await,表示等two()执行完了之后再继续往下执行

//Promise 异步 变成 同步
        function one() {
            return "I am one"
        }

        function two() {
            return new Promise((resolve, reject) => {
                setTimeout(() => { resolve("I am two") }, 3000)
            })
        }

        function three() {
            return "I am three"
        }
        async function run() {
            console.log(one())
            console.log(await two())
            console.log(three())
        }
        run();

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值