Promise异步编程

田小江爱分享

已于 2022-02-19 18:21:45 修改

阅读量641

点赞数

分类专栏： Vue学习笔记文章标签： javascript 前端 vue.js

于 2022-02-18 15:13:01 首次发布

本文链接：https://blog.csdn.net/third_/article/details/122908470

版权

Vue学习笔记专栏收录该内容

21 篇文章 1 订阅

订阅专栏

一、什么是Promise呢？

1、ES6中一个非常重要和好用的特性就是Promise

2、Promise到底是做什么的呢？

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

首先，当我们的开发中有异步操作时，就可以给异步操作包装一个Promise。

二、Promise的三种状态

异步操作之后会有三种状态：

Pending：等待状态，比如正在进行网络请求，或者定时器没有到时间。

Fulfill：满足状态，当我们主动回调了resolve时，就处于该状态，并且会回调.then()

Reject: 拒绝状态，当我们主动回调了reject时，就处于该状态，并且会回调.catch()

三、Promise链式调用

Promise.resolve():将数据包装成Promise对象，并且在内部回调resolve()函数。

Promise.reject():将数据包装成Promise对象，并且在内部回调reject()函数。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script>
  new Promise((resolve, reject) => {
    setTimeout((data) => {
      data = "ni hao ya"
      const error = "bao cuo le" 
      if (data) {
        resolve(data)
      } else {
        reject(error)
      }
    }, 3000)
  }).then((data) => {
    console.log(data)
  }, error => {
    console.log(error)
  })
</script>
</body>
</html>

链式调用的简化版写法：

如果我们希望数据直接包装成Promise.resolve,那么在then中可以直接返回数据。

所以，我们使用return Promise.resolve(res + '11111') 和return res + '2222' 结果是一样的。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script>
  new Promise((resolve, reject) => {
    setTimeout((data) => {
      data = "aaa"
      resolve(data)
    }, 1000)
  }).then((res) => {
    console.log(res, '第一层的处理代码。')
    return Promise.resolve(res + '11111')
  }).then((res) => {
    console.log(res, '第二层的处理代码。')
    return res + '2222'
  }).then((res) => {
    console.log(res, '第三层的处理代码。')
  })
</script>
</body>
</html>

可以看到执行结果如下：

四、Promise的all方法使用

Promise的all方法接受一个数组作为参数，当这个数组里的所有 promise 对象全部变为resolve或有 reject 状态出现的时候，它才会去调用 .then 方法,它们是并发执行的。常用于等待多个异步网络请求有结果后去做某些操作。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script>
  // 传入一个可迭代的，可遍历的，iterator的对象
  Promise.all([
    new Promise((resolve, reject) => {
      setTimeout(() =>{
        resolve({'name': '阿杨杨', 'age': 30})
      }, 2000)
    }),
    new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({'name': '阿甜甜', 'age': 18})
      }, 1000)
    })
  ]).then((results) => {
    console.log(results)
  })
</script>
</body>
</html>

执行结果如下，可以看到他的执行结果也是一个数组：

田小江爱分享

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Promise异步编程

一、什么是Promise呢？1、ES6中一个非常重要和好用的特性就是Promise2、Promise到底是做什么的呢？Promise是异步编程的一种解决方案。首先，当我们的开发中有异步操作时，就可以给异步操作包装一个Promise。二、Promise的三种状态异步操作之后会有三种状态：Pending：等待状态，比如正在进行网络请求，或者定时器没有到时间。Fulfill：满足状态，当我们主动回调了resolve时，就处于该状态，并且会回调.then()Reject: 拒绝状
复制链接

扫一扫

专栏目录