1.什么是promise
Promise是一个许诺器，它是异步编程解决方案之一，Promise里面通常放的是将来要执行的异步代码，这些代码执行完成后会有两种结果：成功或失败，因此Promise有三种状态：pending(初始状态)、fullfilled/resolve(成功状态)、rejected(失败状态)，当在Promise内部调用了成功时的回调函数resolve()时则把Promise的pending初始状态转换成fullfilled/resove成功状态，同时执行定义在then()方法的第一个参数位置定义的成功时的回调函数；当在Promise内部调用了失败时的回调函数reject()时则把Promise的pending初始状态转换成reject失败状态，同时执行定义在then()方法的第二个参数位置或catch()方法中定义的失败时的回调函数；
Promise的特点
1)、Promise对象可以定义多个then()方法，但定义多外catch()方法没有意义；
2)、Promise内部的代码是以同步方式来执行的；
promise详解参考点击下面链接查看
promise解析
2.async 函数
ES2017 标准引入了 async 函数，它是一个关键字，被async修饰的函数称为async函数。
async函数的作用：async也是处理异步的，它是异步编程解决方案之一，async函数是以同步流程表达异步操作，它是对Promise的一种扩展，让异步更加方便，彻底解决回调嵌套
async的特点：
1)、async可以单独使用；
2)、async函数调用完成后返回的是Promise对象；
<script>
function demo() {
}
//console.log(demo(), 666); // undefined
//定义async函数：
async function test() {
}
console.log(test(), 1111); //返回Promise对象
</script>
await的特点 ：【重点】
1)、await不能单独使用，要与async一起使用；
2)、await可以直接处理Promise函数成功时回调函数的结果，不能直接处理Promise函数的失败时回调函数的结果，有两种解决办法：
第一种：在Promise对象后面调用catch()方法，在catch()方法中定义失败时的回调函数，代码如下：
<script>
function mytest() {
return new Promise((resolve, reject) => {
setTimeout(() => {
// console.log('Hello WEB!!');
//需求：返回'Hello WEB!!'
if (0) {
// if (1) {
resolve('Hello WEB!!');
} else {
reject('这是错误信息');
}
}, 3000);
});
}
async function my() {
console.log('开始执行');
let data = await mytest().catch(err => {
console.log(`出错了：${err}`);
});
console.log(`${data} 完成...`);
}
my();
</script>
第二种：在Promise内部不管执行成功还是失败都调用成功时的回调函数resolve()方法，在resolve()方法中返回数组，数组的格式类似于这样：[true/false,结果]，代码如下：
<script>
function mytest() {
return new Promise((resolve, reject) => {
setTimeout(() => {
// console.log('Hello WEB!!');
//需求：返回'Hello WEB!!'
// if (0) {
if (1) {
resolve([true, 'Hello WEB!!']);
} else {
// reject('这是错误信息');
resolve([false, '这是错误信息']);
}
}, 3000);
});
}
async function my() {
console.log('开始执行');
//第一种解决办法：
// let data = await mytest().catch(err => {
// console.log(`出错了：${err}`);
// });
//第二种解决办法：
let [flg, data] = await mytest();
if (flg) {
console.log(`${data} 成功...`);
} else {
console.log(`${data} 失败...`);
}
}
my();
</script>
3.1 async函数基本用法
注意：async函数返回的也是一个promise对象
async语法：【重点】
// 一般写法
async function name( ){
let res1 = await promise异步1
let res2 = await promise异步2
...
}
// 箭头函数写法
async ()=>{
let res1 = await promise异步1
let res2 = await promise异步2
...
}
// 在对象里面的写法
{
async fn(){
let res1 = await promise异步1
let res2 = await promise异步2
...
}
}
// 点击函数写法
bnt.onclick = async ()=>{
let res1 = await promise异步1
let res2 = await promise异步2
...
}
代码案例：
<script>
function demo() {
}
//console.log(demo(), 666); // undefined
//定义async函数：
async function test() {
}
// console.log(test(), 1111); //返回Promise对象
// let prm = test();
// prm.then(d => {
// console.log('成功');
// }).catch(e => {
// console.log('失败');
// });
// function fn() {
// await 123; //await is only valid in async functions and the top level bodies of modules
// }
// fn(); //await不能单独使用，要与async一起使用
async function myfn() {
console.log(`开始`);
let data = await 'Hello';
console.log(`${data} 执行到这里`);
data = await 99;
console.log(`${data} 完成...`);
}
// myfn();
function mytest() {
return new Promise((resolve, reject) => {
setTimeout(() => {
// console.log('Hello WEB!!');
//需求：返回'Hello WEB!!'
// if (0) {
if (1) {
resolve([true, 'Hello WEB!!']);
} else {
// reject('这是错误信息');
resolve([false, '这是错误信息']);
}
}, 3000);
});
}
async function my() {
console.log('开始执行');
//第一种解决办法：
// let data = await mytest().catch(err => {
// console.log(`出错了：${err}`);
// });
//第二种解决办法：
let [flg, data] = await mytest();
if (flg) {
console.log(`${data} 成功...`);
} else {
console.log(`${data} 失败...`);
}
}
my();
</script>
3.2 应用
使用async函数把promise的异步变成真正的同步代码
代码案例：
<script>
function mytest() {
return new Promise((resolve, reject) => {
setTimeout(() => {
// console.log('Hello WEB!!');
//需求：返回'Hello WEB!!'
// if (0) {
if (1) {
resolve([true, 'Hello WEB!!']);
} else {
// reject('这是错误信息');
resolve([false, '这是错误信息']);
}
}, 3000);
});
}
async function my() {
console.log('开始执行');
//第一种解决办法：
// let data = await mytest().catch(err => {
// console.log(`出错了：${err}`);
// });
//第二种解决办法：
let [flg, data] = await mytest();
if (flg) {
console.log(`${data} 成功...`);
} else {
console.log(`${data} 失败...`);
}
}
my();
</script>