异步

120 阅读2分钟

这是我参与2022首次更文挑战的第18天,活动详情查看:2022首次更文挑战

在这里插入图片描述 7、Promise异步执行 (1)Promise介绍 一个 Promise 是一个等待被异步执行的对象。当它执行成功,状态会变成resolved;执行失败状态会变成rejected

resolved状态说明是正常执行返回的信息,rejected状态相当于抛出错误信息,会被try...catch...捕捉到

什么是异步执行?同步执行? 异步执行,就是执行某项任务时,可以在它完成之前就执行下一个任务 同步执行,就是执行某项任务时,必须等待它完成才能执行下一个任务 (2)代码演示 添加一个promiseTest方法,里面包含Promise对象。然后在test方法中调用promiseTest方法,查看返回的结果

test () { console.log("测试方法运行成功") //调用promiseTest方法 let promise_result = this.promiseTest(3) console.log(promise_result) },

//注意两个方法之间要用逗号间隔 promiseTest (num) { var result = new Promise(function(resolve, reject) {
if (num > 2) { console.log(num的值为${num}) resolve("我执行成功了,状态变成了resolved");
} else { console.log(num的值为${num}) reject("我执行失败了,状态变成了rejected");
} }); return result } 在test方法中调用promiseTest方法时,参数为3,满足>2的条件,会返回resolve执行成功的结果

将参数改为1,不满足>2的条件,会返回reject执行失败的结果

8、async、await异步等待 (1)async、await介绍 async就是异步的意思,会作为一个关键字放到函数前面,用来表示函数是一个异步函数

await是等待的意思,后面常放一个promise对象。await关键字只可以放到async函数里面

(2)代码演示 在test方法前面加上async表明这是一个异步函数,创建setTime方法,里面定义一个延时器,会延时2秒执行程序,方便我们查看效果

async test () { console.log("测试方法运行成功") let result = await this.setTime(1); console.log("await后面的方法执行完成后,才能执行下面的语句"); console.log(result); },

setTime(num) { return new Promise(function(resolve, reject) { setTimeout(function(){ resolve("第" + num + "个延时器"); },2000) }) } 打开控制台,2s 之后,输出结果如下:

(3)代码执行过程 下面我们看看代码的执行过程:

执行test异步函数,遇到了await, await 表示等一下,要等后面的setTime(1)方法执行完才能继续执行下面的代码,现在代码暂停在await这里; 开始执行setTime(1)方法,setTime(1)方法中有一个setTimeout延时器,等待2000毫秒(2秒)之后,执行resolve拿到了返回值----「第1个延时器」; 将这个返回值赋值给result,await这里的暂停结束,代码继续向下执行console.log语句。