其他
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 如何改变 Promise 的状态
let p1 = new Promise((resolve, reject) => {
//1. resolve 函数
// resolve("ok"); // pending => fulfilled (resolved)
//2. reject 函数
reject("error"); // pending => rejected
//3. 抛出错误
// throw "出问题了";
});
// 一个 Promise 指定多个成功/失败回调函数, 都会调用吗？
let p2 = new Promise((resolve, reject) => {
resolve("OK"); //如果注释掉resolve()，那么p的状态就还是pending，即状态未发生改变，不会调用then
});
///指定回调 - 1
p2.then((value) => {
console.log(value);
});
//指定回调 - 2
p2.then((value) => {
console.log(value);
});
// 改变 Promise 状态和指定回调函数谁先谁后？
/*
都有可能, 正常情况下是先指定回调再改变状态, 但也可以先改状态再指定回调
如何先改状态再指定回调?
在执行器中直接调用 resolve()/reject(）
延迟更长时间才调用 then()
什么时候才能得到数据？
如果先指定的回调, 那当状态发生改变时, 回调函数就会调用, 得到数据
如果先改变的状态, 那当指定回调时, 回调函数就会调用, 得到数据
*/
let startTime = Date.now()
console.log("开始记时", startTime)
let p3 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("OK");
let endTime = Date.now() - startTime
console.log("结束记时", endTime)
}, 1000);
});
p3.then(
(value) => {
console.log(value);
},
(reason) => { }
);
// Promise .then()返回的新 Promise 的结果状态由什么决定？
/*
如果onResolved方法返回非Promise对象，
那么Promise .then()返回的新Promise的状态就为成功！
如果onResolved方法为Promise对象，
那么该Promise返回的状态（成功或者失败/resolve或reject）
就决定了Promise .then()返回的新Promise的状态。
*/
let p4 = new Promise((resolve, reject) => {
resolve("ok");
// reject("no");
});
//执行 then 方法
let result = p4.then(
(value) => {
// console.log(value);
//1. 抛出错误 rejected
// throw "出了问题";
//2. 返回结果是非 Promise 类型的对象 fulfilled
// return 521;
//3. 返回结果是 Promise 对象 fulfilled/rejected
return new Promise((resolve, reject) => {
// resolve("success");
reject("error");
});
},
(reason) => {
console.warn(reason);
}
)
console.log(result);
// 这里result返回的依旧是一个Promise，以下是对Promise的成功或失败的处理
result.then((value) => {
console.log(value)
}, (reason) => {
console.log(reason)
})
// Promise 如何串连多个操作任务?
/*
通过 then 的链式调用串连多个同步/异步任务
*/
let p5 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('OK');
}, 1000);
});
p5.then(value => {
return new Promise((resolve, reject) => {
resolve("success");
});
}).then(value => {
console.log(value);
}).then(value => {
//因为上个then没有返回任何东西所以输出undefined
console.log(value);
})
// Promise 异常传透?
/*
当使用 Promise 的 then 链式调用时, 可以在最后指定失败的回调
前面任何操作出了异常, 都会传到最后失败的回调中处理
*/
let p6 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('OK');
// reject('Err');
}, 1000);
});
p6.then(value => {
// console.log(111);
throw '失败啦!';
}).then(value => {
console.log(222);
}).then(value => {
console.log(333);
}).catch(reason => { //用then也可以捕获异常，不过then要传两个参数
console.warn(reason);
});
console.log(p6)
// 如何中断 Promise 链?
/*
当使用 Promise 的 then 链式调用时, 在中间中断, 不再调用后面的回调函数
办法: 在回调函数中返回一个 pendding 状态的 Promise 对象
*/
let p7 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('OK');
}, 1000);
});
let a = p7.then(value => {
console.log(111);
//有且只有一个方式
return new Promise(() => {
});
}).then(value => {
console.log(222);
}).then(value => {
console.log(333);
}).catch(reason => {
console.warn(reason);
});
</script>
</head>
<body>
</body>
</html>
async 和 await
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*
async 函数:
使用async该函数的返回值为 Promise对象
Promise对象的结果由 async 函数执行的返回值决定
*/
async function main() {
//1. 如果返回值是一个非Promise类型的数据 则状态为成功，返回一个成功的promise对象
return 521;
}
async function main1() {
//2. 如果返回的是一个Promise对象 则状态取决于返回结果
return new Promise((resolve, reject) => {
// resolve('OK'); //成功
reject("Error"); //失败
});
}
async function main2() {
// 3. 抛出异常 返回一个失败的promise对象
throw "Oh NO";
}
let result = main();
let result1 = main1();
let result3 = main2();
console.log(result);
console.log(result1);
console.log(result3);
/*
await 表达式：
await 右侧的表达式一般为 Promise对象, 但也可以是其它的值
如果表达式是 Promise对象, await 返回的是 Promise成功的值
如果表达式是其它值, 直接将此值作为 await 的返回值
await 必须写在 async 函数中, 但 async 函数中可以没有 await
如果 await 的 Promise失败了, 就会抛出异常, 需要通过 try…catch 捕获处理
*/
async function main3() {
let p = new Promise((resolve, reject) => {
resolve("OK");
// reject("Error");
});
//1. 右侧为promise的情况
// let res = await p;
//2. 右侧为其他类型的数据
// let res2 = await 20;
//3. 如果promise是失败的状态
try {
let res3 = await p;
console.log(res3)
} catch (e) {
//catch捕获失败状态
console.log(e);
}
}
</script>
</head>
<body>
</body>
</html>
