ES6中的基础知识点 — Promise

最新推荐文章于 2024-09-13 23:32:49 发布
最新推荐文章于 2024-09-13 23:32:49 发布
阅读量282 收藏 1
点赞数
分类专栏： # ES6 文章标签： es6 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/matcha_ice_cream/article/details/126450899
版权

ES6基础知识点 — Promise

1、Promise的简单介绍和基本使用

Promise是异步编程的一种解决方案。

why需要引入Promise
在开发项目的过程中，我们可能需要发送网络请求，由于网络请求是一个异步事件，不能立即拿到结果，所以我们会封装一个网络请求函数，并传入一个回调函数，当数据请求成功时，将数据通过传入的函数回调出去。这种方案虽然也能拿到我们想要的数据，但是一旦网络请求非常复杂时，就会出现回调地狱，导致代码的可读性很差。而使用promise就能很好的解决地狱回调的问题。

这里使用简单的例子来说明：
以setTimeout来模拟异步请求，如果不使用promise，则

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Promise的基本使用</title>
</head>
<body>

<script>
  // 1.发送第一次请求
  setTimeout(() => {
    console.log('first, 我是第一次请求!!!');
    console.log('first, 我是第一次请求!!!');
    console.log('first, 我是第一次请求!!!');
    console.log('first, 我是第一次请求!!!');

    // 2.发送第二次请求
    setTimeout(() => {
      console.log('second, 我是第二次请求!!!');
      console.log('second, 我是第二次请求!!!');
      console.log('second, 我是第二次请求!!!');
      console.log('second, 我是第二次请求!!!');
      console.log('second, 我是第二次请求!!!');

      // 3.发送第三次请求
      setTimeout(() => {
        console.log('third, 我是第三次请求!!!');
        console.log('third, 我是第三次请求!!!');
        console.log('third, 我是第三次请求!!!');
        console.log('third, 我是第三次请求!!!');
        console.log('third, 我是第三次请求!!!');
        console.log('third, 我是第三次请求!!!');
        console.log('third, 我是第三次请求!!!');
      }, 3000)
    }, 2000)
  }, 1000)
</script>

</body>
</html>

显示效果：

在这里插入图片描述

在使用过程中，我们发现，代码嵌套真的是太严重了，如果有多个请求，那么代码的可读性是很差的，so，我们可以使用promise来进行异步请求的处理

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Promise的基本使用</title>
</head>
<body>

<script>
  new Promise((resolve, reject) => {
    // 1.发送第一次请求
    setTimeout(() => {
      resolve();
    }, 1000)
  }).then(() => {
    // 处理第一次请求
    console.log('first, 我是第一次请求!!!');
    console.log('first, 我是第一次请求!!!');
    console.log('first, 我是第一次请求!!!');
    console.log('first, 我是第一次请求!!!');

    // 2.发送第二次请求
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve();
      }, 2000)
    }).then(() => {
      // 处理第二次请求
      console.log('second, 我是第二次请求!!!');
      console.log('second, 我是第二次请求!!!');
      console.log('second, 我是第二次请求!!!');
      console.log('second, 我是第二次请求!!!');
      console.log('second, 我是第二次请求!!!');

      // 3.发送第三次请求
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve();
        }, 3000)
      }).then(() => {
        // 处理第三次请求
        console.log('third, 我是第三次请求!!!');
        console.log('third, 我是第三次请求!!!');
        console.log('third, 我是第三次请求!!!');
        console.log('third, 我是第三次请求!!!');
        console.log('third, 我是第三次请求!!!');
        console.log('third, 我是第三次请求!!!');
        console.log('third, 我是第三次请求!!!');
      })
    })
  })
</script>

</body>
</html>

显示效果：

在这里插入图片描述

简单介绍一下Promise
在执行Promise时，会传入两个参数：resolve, reject。而它们本身又是函数
Promise是一种链式编程，下面以一个例子展示Promise的使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Promise的基本使用</title>
</head>
<body>

<script>
  new Promise((resolve, reject) => {
    // 模拟发送网络请求
    setTimeout(() => {
      // 1.请求成功时调用 resolve()
      resolve('hello, success. YiBo');

      // // 2.请求失败时调用 reject()
      // reject('err, you are wrong')
    }, 1000)
  }).then((data) => {
    // 获取到resolve中传入的数据
    console.log(data);
  }).catch((err) => {
    // 获取到reject中的数据
    console.log(err);
  })

</script>

</body>
</html>

显示效果：

在这里插入图片描述

请求失败时的代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Promise的基本使用</title>
</head>
<body>

<script>
  new Promise((resolve, reject) => {
    // 模拟发送网络请求
    setTimeout(() => {
      // 1.请求成功时调用 resolve()
      // resolve('hello, success. YiBo');

      // 2.请求失败时调用 reject()
      reject('err, you are wrong')
    }, 1000)
  }).then((data) => {
    // 获取到resolve中传入的数据
    console.log(data);
  }).catch((err) => {
    // 获取到reject中的数据
    console.log(err);
  })

</script>

</body>
</html>

显示效果：

在这里插入图片描述

2、Promise的三种状态

Promise有三种状态：

  • pending：等待状态。eg：比如正在进行网络请求，或者定时器没有到时间
  • fulfilled：当调用resolve()，成功，状态会由 pending 转换为 fulfilled 状态
  • rejected：当调用reject()，失败，状态会由 pending 转换为 rejected 状态

3、Promise的另外处理方式

在Promise的.then()中，也可以处理请求失败的数据信息。下面以例子进行简单的介绍。

请求成功：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Promise的另外请求方式</title>
</head>
<body>

<script>
  new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('hello, YiBo!!!');
      // reject('oh my god, you missed me');
    })
  }).then((res) => {
    console.log(res);
  }, (err) => {
    console.log(err);
  })
</script>

</body>
</html>

显示效果：

在这里插入图片描述

请求失败：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Promise的另外请求方式</title>
</head>
<body>

<script>
  new Promise((resolve, reject) => {
    setTimeout(() => {
      // resolve('hello, YiBo!!!');
      reject('oh my god, you missed me');
    })
  }).then((res) => {
    console.log(res);
  }, (err) => {
    console.log(err);
  })
</script>

</body>
</html>

显示效果：

在这里插入图片描述

4、Promise的链式调用

这里以一个例子展示Promise的链式调用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Promise链式调用</title>
</head>
<body>

<script>
  /*
  业务需求：发送网络请求，传输数据: one, 自己进行处理
  处理完成后，在数据后面拼接：111, 然后自己处理数据
  处理完成后，在数据后边拼接：222, 然后自己处理数据
   */

  new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('one');
    }, 1000)
  }).then((res) => {
    console.log(res, '第一层处理10行代码');
    return new Promise((resolve, reject) => {
      resolve(res + '111');
    })
  }).then((res) => {
    console.log(res, '第二层处理10行代码');
    return new Promise((resolve, reject) => {
      resolve(res + '222');
    })
  }).then((res) => {
    console.log(res, '第三层处理10行代码');
  })
</script>

</body>
</html>

在这个例子中，我们发现，每次数据的拼接都新 new了一个 Promise对象，但是在这个过程中，我们并没有异步请求。对于这种情况，我们可以不使用 new Promise来进行处理，可以直接使用 Promise.resolve() 来进行数据的处理。

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Promise链式调用</title>
</head>
<body>

<script>
  /*
  业务需求：发送网络请求，传输数据: one, 自己进行处理
  处理完成后，在数据后面拼接：111, 然后自己处理数据
  处理完成后，在数据后边拼接：222, 然后自己处理数据
   */

  new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('one');
    }, 1000)
  }).then((res) => {
    console.log(res, '第一层处理10行代码');
    return Promise.resolve(res + '111');

  }).then((res) => {
    console.log(res, '第二层处理10行代码');
    return Promise.resolve(res + '222');

  }).then((res) => {
    console.log(res, '第三层处理10行代码');
  })
</script>

</body>
</html>

显示效果：

在这里插入图片描述

虽然使用 Promise.resolve() 来进行数据拼接的操作已经比较简洁了，但是我们也可以直接return 来进行数据拼接操作。在进行return操作时，其实promise内部会帮我们进行一些包装，实际上也是以Promise.resolve的形式进行数据的拼接操作。
代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Promise链式调用</title>
</head>
<body>

<script>
  /*
  业务需求：发送网络请求，传输数据: one, 自己进行处理
  处理完成后，在数据后面拼接：111, 然后自己处理数据
  处理完成后，在数据后边拼接：222, 然后自己处理数据
   */

  new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('one');
    }, 1000)
  }).then((res) => {
    console.log(res, '第一层处理10行代码');
    return res + '111';

  }).then((res) => {
    console.log(res, '第二层处理10行代码');
    return res + '222';

  }).then((res) => {
    console.log(res, '第三层处理10行代码');
  })
</script>

</body>
</html>

显示效果：

在这里插入图片描述

当我们发送数据失败时，会进入.catch() 处理后续的信息
代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Promise链式调用</title>
</head>
<body>

<script>
  /*
  业务需求：发送网络请求，传输数据: one, 自己进行处理
  处理完成后，在数据后面拼接：111, 然后自己处理数据
  处理完成后，在数据后边拼接：222, 然后自己处理数据
   */

  new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('one');
    }, 1000)

  }).then((res) => {
    console.log(res, '第一层处理10行代码');
    return new Promise((resolve, reject) => {
      resolve(res + '111');
    })

  }).then((res) => {
    console.log(res, '第二层处理10行代码');
    return new Promise((resolve, reject) => {
      // resolve(res + '222');
      reject('err!!! you are wrong!!!')
    })

  }).then((res) => {
    console.log(res, '第三层处理10行代码');

  }).catch((err) => {
    console.log(err);
  })
</script>

</body>
</html>

显示效果：

在这里插入图片描述

由于在这里也没有使用异步操作，所以也可以不用 new 一个Promise，可以使用***Promise.reject()***实现 reject()的操作。
代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Promise链式调用</title>
</head>
<body>

<script>
  /*
  业务需求：发送网络请求，传输数据: one, 自己进行处理
  处理完成后，在数据后面拼接：111, 然后自己处理数据
  处理完成后，在数据后边拼接：222, 然后自己处理数据
   */

  new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('one');
    }, 1000)

  }).then((res) => {
    console.log(res, '第一层处理10行代码');
    return Promise.resolve(res + '111');

  }).then((res) => {
    console.log(res, '第二层处理10行代码');
    return Promise.reject('err!!! you are wrong!!!');

  }).then((res) => {
    console.log(res, '第三层处理10行代码');

  }).catch((err) => {
    console.log(err);
  })
</script>

</body>
</html>

显示效果：

在这里插入图片描述

除了使用 promise.reject()，也可以使用 throw来抛出错误信息
代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Promise链式调用</title>
</head>
<body>

<script>
  /*
  业务需求：发送网络请求，传输数据: one, 自己进行处理
  处理完成后，在数据后面拼接：111, 然后自己处理数据
  处理完成后，在数据后边拼接：222, 然后自己处理数据
   */

  new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('one');
    }, 1000)

  }).then((res) => {
    console.log(res, '第一层处理10行代码');
    return Promise.resolve(res + '111');

  }).then((res) => {
    console.log(res, '第二层处理10行代码');
    throw('err!!! you are wrong!!!');

  }).then((res) => {
    console.log(res, '第三层处理10行代码');

  }).catch((err) => {
    console.log(err);
  })
</script>

</body>
</html>

显示效果：

在这里插入图片描述

5、Promise中all方法的使用

all方法需要使用的场景：
在实际项目开发过程中，我们可能需要同时接受多个请求，接受了多个请求之后才能够对数据进行处理，这个时候，我们可以使用Promise中的all方法，同时获取多个请求的数据。

Promise.all([])      //all中传递的是一个可迭代对象

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Promise中all方法的使用</title>
</head>
<body>

<script>
  Promise.all([
      new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve({name: 'YiBo', age: 18});
        }, 2000)
      }),
      
      new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve({name: '哈尔', age: 18});
        }, 1000)
      })

  ]).then(results => {
    console.log(results[0]);
    console.log(results[1]);
  })

</script>

</body>
</html>

显示效果：

在这里插入图片描述

Matcha_ice_cream
关注
专栏目录
setTimeout模拟请求，使用async和await改写的一些注意地方
weixin_41033048的博客
03-18 3667
通过定时器模拟异步数据请求并引入promise处理的方法过程。 一、依次输出1,2,3 setTimeout(() => { console.log(1); setTimeout(() => { console.log(2); setTimeout(() => { console.log(3); }, 1000)
【ES6知识点】——Promise对象
m0_50785976的博客
08-25 620
Promise对象
Promise的使用
qq_39792789的博客
11-19 282
Promise是异步编程的一种解决方案，它是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。
setTimeout、Promise、Async/Await 的详解和区别
Br不二
04-03 737
`setTimeout`、`Promise`和`async/await`在JavaScript中各自扮演着不同的角色，它们主要用于处理异步操作，但具体实现和用法上存在一些区别。
期约（Promise）与异步函数（一）
dropout的博客
01-19 1191
文章目录前言Promise是什么？常用的方法构造函数方法Promise.resolve()Promise.reject()Promise.all()Promise.race()Promise.allSettled()实例方法Promise.then()Promise.catch()Promise.finally()注意事项Promise的应用异步加载图片Promise面试题 本篇文章是学完Promise后自己的查漏补缺，因此知识点并不全面。 前言 先了解一下异步函数，看以下异步函数代码： functio
Promise的基本使用
qq_40526866的博客
07-09 136
Promise是ES6引入的异步编程的新解决方案。语法上Promise是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果。 Promise 构造函数：Promise (excutor) {} Promise.prototype.then 方法 Promise.prototype.cath 方法 // 实例化Promise const Pro = new Promise((resolve, reject) => { setTimeout(() => {
ES6常用知识点学习总结
12-10
压缩包包含了ES6中比较常用的知识点代码总结，这是博主自学过程中存下来的，包括，le&const，变量的解构，模块化，函数参数默认值，箭头函数，字符与对象的拓展，class类，try/catchz异常处理，promise等等，请放心...
ES6基础知识点总结
gsblyy的博客
02-15 400
先浅复习一下es6 let与const 作⽤域 全局作⽤域 局部作⽤域 块级作⽤域 let ⽤法：声明⼀个变量 特点： ​ 只在声明的代码块内有效 在同⼀作⽤域内不允许重复声明 没有变量提升 暂时性死区 用法：声明一个只读的变量(可理解为常量) 特点：同let命令 简单类型如字符串、数字和布尔值，值就保存在变量指向的内存地址。而复杂类型的数据如对象、数组和函 数，变量指向的内存地址，实际上是保存了指向实际数据的指针。所以const 只能保证指针是固定的，至于指针指向的数据结构变不变就
ES6中的Promise代码详解
08-29
在JavaScript的世界里，ES6（ECMAScript 2015）引入了许多新特性，其中Promise是解决异步编程复杂性的一个重要工具。...Promise是现代JavaScript异步编程的基础，对于任何JavaScript开发者来说都是必须掌握的知识点。
es6知识点.pdf
07-12
ES6即ECMAScript 6，是JavaScript语言的第六版，于2015年发布，它为JavaScript带来了许多新特性和改进，下面根据给定文件内容，对ES6的核心知识点进行详细说明。 1. let和const命令 - let命令用于声明块作用域的...
day047:Promise之问(二)——为什么Promise要引入微任务？
杨兴元的博客
01-13 1693
在这里，如果你还没有接触过 Promise, 务必去看看 MDN 文档，了解使用方式，不然后面很会懵。Promise 中的执行函数是同步进行的，但是里面存在着异步操作，在异步操作结束后会...
ES6中Promise使用必要
宏斌的博客
04-07 288
不使用promise请求数据,请求成功后将数据给一个变量保存，然后在下面打印 function response() { let xml = new XMLHttpRequest() xml.open('GET', url) xml.onreadystatechange = function() { if (xml.status == 200 &&a...
这 10 个片段，有助于你理解 ES 中的 Promise
高先生的猫
08-03 749
在开发中，了解JavaScript和 Promise 基础，有助于提高我们的编码技能，今天，我们一起来看看下面的 10 片段，相信看完这 10 个片段有助于我们对 Promise 的理解。 片段1： const prom = new Promise((res, rej) => { console.log('first'); res(); console.log('second'); }); prom.then(() => { console.log('third'); ..
在setTimeout或者ajax等异步方法中回调函数的写法与调用
mxydl2009的博客
06-18 1960
常常在setTimeout或者ajax中产生异步代码执行，执行的是回调函数，那么回调函数怎么写呢？这要跟回调函数的函数体内写法有关； 回调函数的函数体内return返回值不是函数； 回调函数的函数体内return返回值是函数； 分析一下代码的执行过程： function callback () { console.log('执行callback函数') return function ()...
十二、Promise的学习笔记(Promise的基本使用、链式编程、all())
zep
02-01 681
一、认识Promise ES6中一个非常重要和好用的特性就是Promise 但是初次接触Promise会一脸懵逼，这TM是什么东西？ 看看官方或者一些文章对它的介绍和用法，也是一头雾水。 Promise到底是做什么的呢？ Promise是异步编程的一种解决方案。 那什么时候我们会来处理异步事件呢？ 一种很常见的场景应该就是网络请求了。 我们封装一个网络请求的函数，因为不能立即拿到结果，所以不能像简单的3+4=7一样将结果返回。 所以往往我们会传入另外一个函数，在数据请求成功时，将数据通过传入的函数
es6中set和map的区别
hexadecimal_001的博客
09-13 610
在ES6（ECMAScript 2015）中，Set和Map是两种新的集合类型，它们提供了更高级的数据结构来存储唯一值或键值对集合。尽管它们在功能上有些相似，但它们在用途和内部机制上存在一些关键区别。
JavaScript第五天（函数，this，严格模式，高阶函数，闭包，递归，正则，ES6）高级
ingenuou_的博客
09-11 1782
JavaScript第五天（函数，this，严格模式，高阶函数，闭包，递归，正则，ES6）高级
-webkit-box-reflect属性与倒影效果的实现
最新发布
读心悦
09-13 423
是一个非标准的 CSS 属性，主要用于在 WebKit 浏览器（如 Chrome 和 Safari）中创建元素的倒影效果。这个属性并不是 CSS 规范的一部分，但在实践中经常被用来实现简单而有趣的视觉效果。
Vue使用query传参Boolean类型，刷新之后转换为String问题
q879936814的博客
09-12 422
要解决这个问题，不能直接Boolean处理，因为如果传入false，那么转换成字符串，Boolean(‘false’)会变成true；做项目时发现第一次进入页面时传参是正常的Boolean类型，刷新之后变成了String，这是浏览器进行的一次强制转换；解决方法：使用JSON.parse处理参数。
JavaScript入门基础教程：知识点详解
"JavaScript入门系列之知识点总结" JavaScript是一种强大的、直译式的脚本语言，它在Web开发中扮演着至关重要的角色。JavaScript以其动态类型、弱类型和基于原型的特性，成为了网页动态功能的核心，几乎所有的主流...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值