Promise异步编程

原创已于 2022-02-19 18:21:45 修改 · 734 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

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

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

21 篇文章

订阅专栏

Promise是ES6中的一个重要特性，用于解决异步编程问题。它有三种状态：Pending（等待）、Fulfilled（满足，通过resolve触发）和Rejected（拒绝，通过reject触发）。在Promise链式调用中，数据可以通过then方法传递，并可简化为直接返回Promise.resolve或原始值。Promise.all方法接收一个Promise数组，当所有Promise都变为fulfilled或第一个rejected时，才会执行.then方法。此方法常用于等待多个异步任务完成后再执行后续操作。

一、什么是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>

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