Java登陆第四十一天——Promise、async关键字、await关键字
在学习axios之前，需要学习ES6提供的Promise对象。
普通函数和回调函数
学习Promise的预备知识，回调函数
普通函数
普通函数: 正常调用的函数,普通函数执行完毕后才会继续执行下一行代码。
按照编码顺序执行。
function f1() {
console.log("普通函数f1执行");
}
function f2() {
console.log("普通函数f2执行");
}
f1();
f2();
控制台输出
普通函数f1执行
普通函数f2执行
回调函数
回调函数: 一些特殊的函数,表示未来才会执行的一些功能,后续的代码不会等待该函数执行完毕。
不一定按照编码顺序执行。
function f1() {
console.log("普通函数f1执行");
}
function f2() {
console.log("普通函数f2执行");
}
function other() {
//JS原生的定时器就是一个回调函数 setTimeout(回调函数,毫秒)
setTimeout(function () {
console.log("回调函数执行")
},2000);
console.log("other函数内其他代码")
}
other();//尽管回调函数第一个运行。
f1();
f2();
控制台输出
other函数内其他代码
普通函数f1执行
普通函数f2执行
回调函数执行
从结果不难发现，other方法内部的回调函数最后才输出。
Promise对象
前端中的异步编程技术，类似Java中的多线程+线程结果回调。
一图了解Promise
Promise在英语中，就是承诺的意思。
-
所谓Promise：
-
简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。
-
从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。
-
Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。
-
语法
//使用构造函数，创建Promise实例。
new Promise(function(resolve,reject){})
new Promise( (resolve,reject)=>{} )
//传参 resolve，是一个函数，设置当前Promise对象的状态为已完成
resolve()
resolve("可以传递参数")
//传参 reject，是一个函数，设置当前Promise对象的状态为已失败
reject()
reject("可以传递参数")
Promise类常用函数。
| 函数 | 描述 |
|---|---|
| Promise.then(f1,f2) | 用于处理Promise状态的回调函数。f1是成功，f2是失败 |
| Promise.then(回调函数) | 专门处理Promise成功状态的回调函数。 |
| Promise.catch(回调函数) | 专门处理Promise失败状态的回调函数。 |
若then只有一个回调函数，那就专门处理Promise成功状态。
以上函数返回值都是Promise对象，所以可以链式调用。
Promise.then(...).catch(...);
Promise.then()举例
function f1() {
console.log("普通函数f1执行");
}
function f2() {
console.log("普通函数f2执行");
}
let promise = new Promise((resolve, reject) => {
console.log("回调函数运行中---");
resolve();//设置状态为已完成
})
promise.then(
function success(data) {//data可省，主要看resolve()有没有传递参数
console.log("Promise状态是已完成" + data)
},
function fail(data) {//data可省，主要看reject()有没有传递参数
console.log("Promise状态是已失败" + data)
}
)
console.log("then在这里会等待promise中的运行结果,但是不会阻塞代码继续运行")
f1();
f2();
控制台输出
回调函数运行中---
then在这里会等待promise中的运行结果,但是不会阻塞代码继续运行
普通函数f1执行
普通函数f2执行
Promise状态是已完成undefined
async和await关键字
ES6同时提供了async和await关键字，可以更方便操作Promise对象。
被async关键字声明的方法，称为异步函数。
await关键字必须在异步函数内使用。
如果钩子函数调用的是异步函数，也需要使用async关键字。
//异步函数，从后端获取schedule数据
async function checkList() {
}
//注意这里也需要使用async关键字
onMounted(async function () {
checkList()
});
一句话了解async和await
异步函数专门生成Promise对象。
await专门接收Promise对象的值。
语法
/*
*/
async function fun(){}
/*
*/
await Promise();
async特点
被async关键字声明的方法，称为异步函数。
异步函数的返回值，必然是promise对象。
-
如果返回值是一个promise对象，该promise对象的状态就是异步函数返回的promise对象状态。
-
如果返回值是一个异常，异步函数会返回一个已失败的promise对象
-
如果返回值是一个非promise对象，异步函数会返回一个已完成的promise对象，该promise对象的值就是这个非promise对象。
await特点
await关键字必须在异步函数内使用
await必须修饰一个Promise对象。
-
await默认返回的promise对象已完成的值
-
后续代码会等待await的执行结果
-
若await修饰的promise对象是已失败状态，就会抛出异常
async和await关键字举例
function f1() {
console.log("普通函数f1执行");
}
function f2() {
console.log("普通函数f2执行");
}
/*等价于
function pro(){
let promise = new Promise((resolve, reject) => {
resolve(10);//设置状态为已完成
})
return promise;
}
*/
async function pro() {
console.log("pro1开始执行")
return 10;//详情async第三点。
}
async function pro2() {
console.log("pro2开始执行")
let numberPromise = await pro();//取出成功状态的promise的值，详情await第一点。
console.log("await下面的代码会等待await的执行结果")
console.log("pro已执行完毕，await关键字取出promise对象的值为" + numberPromise);
}
pro2();
f1();
f2();
控制台输出
pro2开始执行
pro1开始执行
普通函数f1执行
普通函数f2执行
await下面的代码会等待await的执行结果
pro已执行完毕，await关键字取出promise对象的值为10
