[学习文档] https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise
Promise对象
首先明白同步与异步是什么:
同步是指每项任务依次完成，前一项任务未结束无法执行后一项任务；异步指的是在执行一项任务时等待的空隙中，可以有办法继续执行其它任务。
同步异步代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//同步
console.log('开始...');
console.log('......');
console.log('结束...');
/*
*打印结果
*开始...
*......
*结束...
*/
</script>
<script>
console.log('开始...')
// 回调函数,是异步执行函数
setTimeout(() => {
console.log('定时任务.........')
}, 0)
console.log('结束...')
/*
*打印结果
*开始...
*结束...
*定时任务.........
*/
</script>
</body>
</html>Promise 是一个对象,ES6 中新增，Promise 用于处理异步任务逻辑，可代表未来执行的结果。
在ES6 中提出 Promise 主要是为了解决异步执行过程中的'' 地狱回调 "问题.是通过链式调用的方式来解决的
" 回调地狱 " 指的是异步任务执行完成后有继续嵌套异步任务执行的逻辑,多层嵌套后对代码的阅读非常困难的
Promise 允许你将处理程序与异步操作的最终成功值或失败原因关联起来,这使得异步方法可以像同步方法一样返回值：异步方法不会立即返回最终值，而是返回一个 promise，以便在将来的某个时间点提供该值。
一个 Promise 必然处于以下几种状态之一：
- 待定（pending）：初始状态(等待中)，既没有被兑现，也没有被拒绝。
- 已兑现（fulfilled）：意味着操作成功完成。
- 已拒绝（rejected）：意味着操作失败。
Promise API
实例方法
const promise = new Promise(executor) //构造函数
//最多接受两个参数,onFulfille是在此 Promise 对象被兑现时异步执行的函数。onRejected 在此 Promise 对象被拒绝时异步执行的函数,它们的返回值将成为 then() 返回的 Promise 对象的兑现值
//then() 调用后会继续返回 Promise 对象，可链式继续调用 Promise 的方法
Promise.prototype.then(onFulfilled, onRejected?)
//catch() 方法调用时来专门处理 Promise 执行失败后继续完成的任务
Promise.prototype.catch(onRejected)
//无论结果如何最终都会执行的函数
Promise.prototype.finally(onFinally)promise对象使用实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
console.log('开始............')
/**
* 执行器函数，通常会在函数体内部包含异步任务逻辑。
* 参数 resolve 与 reject 都是函数。
* resolve() 的作用是将 Promise 对象的状态修改为 fulfilled 成功状态。
* reject() 的作用是将 Promise 对象的状态修改为 rejected 失败状态。
* 在异步任务执行成功时，通常会携带成功的返回数据，调用 resolve() 时，传递
* 成功的数据作为其的参数，即 resolve(data)。
* 执行异步任务失败时，通常会携带失败的错误原因，调用 reject() 时，传递失败
* 的原因作为其参数，即 reject(error)。
*/
const executor = function(resolve, reject) {
setTimeout(() => {
const random = Math.random()
console.log('产生随机数字:', random)
// 异步任务执行完成后，修改 Promise 对象的状态
if (random > 0.5) { // 异步任务执行成功
resolve('成功的数据:' + random)
} else { // 异步任务执行失败
reject('失败的错误原因: 产生的随机数字太小 - ' + random)
}
}, 200)
}
// 创建 Promise 对象，创建出的新 Promise 对象初始状态为 pending 状态
const promise = new Promise(executor)
// 调用 then() 方法，串联处理执行结果
promise.then(
function onFulfilled(data) {
// 在 Promise 状态为 fulfilled 时执行的回调函数.
// data 参数表示成功时携带返回的数据
console.log('执行成功, 返回数据:', data)
},
// function onRejected(reason) {
// // 在 Promise 状态为 rejected 时执行到的回调函数
// // reason 参数表示失败时携带返回的错误原因
// console.log('执行失败, 错误原因:', reason)
// },
).catch(
function onRejected(reason) {
// 在 Promise 状态为 rejected 时执行到的回调函数
// reason 参数表示失败时携带返回的错误原因
console.log('在 catch 方法中, 执行失败, 错误原因:', reason)
},
).finally(
function() {
console.log('最终都会执行到的代码逻辑...')
}
)
// promise.then().catch()
</script>
<script>
const str = 'Hello World!'
const result = str.split('').reverse().join('')
</script>
</body>
</html>