ES6新增内容 : Promise

呼叫6945

于 2024-08-03 23:18:25 发布

阅读量199

点赞数 6

文章标签：前端 javascript 开发语言 es6

本文链接：https://blog.csdn.net/m0_73890048/article/details/140898348

版权

[学习文档] 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>

呼叫6945

关注

6
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
ES6新增内容 : Promise

Promise 允许你将处理程序与异步操作的最终成功值或失败原因关联起来,这使得异步方法可以像同步方法一样返回值：异步方法不会立即返回最终值，而是返回一个。异步指的是在执行一项任务时等待的空隙中，可以有办法继续执行其它任务。在ES6 中提出 Promise 主要是为了解决异步执行过程中的'' 地狱回调 "问题.是通过链式调用的方式来解决的。" 回调地狱 " 指的是异步任务执行完成后有继续嵌套异步任务执行的逻辑,多层嵌套后对代码的阅读非常困难的。）
复制链接

扫一扫