javaScript-promise

最新推荐文章于 2023-12-01 13:27:34 发布

guardwhy

最新推荐文章于 2023-12-01 13:27:34 发布

阅读量155

点赞数

分类专栏： # JavaScript

本文链接：https://blog.csdn.net/hxy1625309592/article/details/116381696

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.1 什么是promise?

promise是ES6中新增的异步编程解决方案, 在代码中的表现是一个对象。

promise作用

企业开发中为了保存异步代码的执行顺序, 那么就会出现回调函数层层嵌套。

如果回调函数嵌套的层数太多, 就会导致代码的阅读性, 可维护性大大降低。

promise对象可以将异步操作以同步流程来表示, 避免了回调函数层层嵌套(回调地狱)。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<script>
  // 1.使用setTimeout
  // setTimeout(() => {
  //   console.log('Hello World');
  // }, 1000)

  // 什么情况下会用到Promise?
  // 一般情况下是有异步操作时,使用Promise对这个异步操作进行封装
  // new -> 构造函数(1.保存了一些状态信息  2.执行传入的函数)
  // 在执行传入的回调函数时, 会传入两个参数, resolve, reject.本身又是函数
  new Promise((resolve, reject) => {
    setTimeout(() => {
      // 成功的时候调用resolve
      // resolve('Hello World')

      // 失败的时候调用reject
      reject('error message')
    }, 1000)
  }).then((data) => {
    // 1.100行的处理代码
    console.log(data);
    console.log(data);
    console.log(data);
    console.log(data);
    console.log(data);
  }).catch((err) => {
    console.log(err);
  })
</script>
</body>
</html>

执行结果

1.2 如何创建Promise对象

可以通过new Promise(function(resolve, reject){ });promise对象不是异步的, 只要创建promise对象就会立即执行存放的代码。

promise对象是通过状态的改变来实现的, 只要状态发生改变就会自动触发对应的函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
    <script>
    /*什么情况下会用到Promise?
      一般情况下是有异步操作时,使用Promise对这个异步操作进行封装
      new -> 构造函数(1.保存了一些状态信息  2.执行传入的函数)
      在执行传入的回调函数时, 会传入两个参数, resolve, reject.本身又是函数
    */
      new Promise((resolve, reject) =>{
          setTimeout(() =>{
              // 1.成功的时候调用resolve
              // resolve("hello Vue.js!!!!")
              // 2.失败的时候调用reject
              reject('error message')
          }, 1000)
      }).then(data =>{
          console.log(data);
      },err =>{
          console.log(err);
      })
    </script>
</body>
</html>

执行结果

1.3 Promise对象三种状态

pending: 默认状态，只要没有告诉promise任务是成功还是失败就是pending状态。
fulfilled(resolved): 只要调用resolve函数, 状态就会变为fulfilled, 表示操作成功。
rejected: 只要调用rejected函数, 状态就会变为rejected, 表示操作失败。

三种状态注意点

状态一旦改变既不可逆, 既从pending变为fulfilled, 那么永远都是fulfilled。既从pending变为rejected, 那么永远都是rejected。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <script>
    /*什么情况下会用到Promise?
      一般情况下是有异步操作时,使用Promise对这个异步操作进行封装
      new -> 构造函数(1.保存了一些状态信息  2.执行传入的函数)
      在执行传入的回调函数时, 会传入两个参数, resolve, reject.本身又是函数
    */
    new Promise((resolve, reject) =>{
        // 第一次网络请求的代码
        setTimeout(() =>{
            resolve()
        },1000)
    }).then(() =>{
        // 第一次拿到结果的处理代码
        console.log("hello Vue.js!!!!");
        console.log("hello Vue.js!!!!");
        console.log("hello Vue.js!!!!");

        return new Promise((resolve, reject) =>{
              // 第二次网络请求
            setTimeout(() =>{
                resolve()
            }, 1000)
        })
    }).then(() =>{
        // 第二次拿到结果的处理代码
        console.log("hello python！！！");
        console.log("hello python！！！");
        console.log("hello python！！！");
        console.log("hello python！！！");

        return new Promise((resolve, reject) =>{
            // 第三次网络请求
            setTimeout(() =>{
                resolve()
            })
        })
    }).then(() =>{
        // 第二次拿到结果的处理代码
        console.log("hello javaScript！！！");
        console.log("hello javaScript！！！");
        console.log("hello javaScript！！！");
        console.log("hello javaScript！！！");
    })
   </script>
</body>
</html>

1.4 链式调用简写

可以将数据直接包装成Promise.resolve，那么在then中可以直接返回数据。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        new Promise((resolve, reject) =>{
            setTimeout(() =>{
                resolve('111')
            },1000)
        }).then(res =>{
            // 1.自己处理该行代码
            console.log(res, '第一次拿到结果的处理代码')
            // 2.对结果进行第一次处理
            // return Promise.resolve(res + '111');

            // return Promise.reject('error message')

            // 3.简写
            throw 'error message'

        }).then(res =>{
            console.log(res, '第二次拿到结果处理代码')
            return Promise.resolve(res + '222')
        }).then(res =>{
            console.log(res, "第三次拿到结果处理代码")
        }).catch(err =>{
            console.log(err);
        })
    </script>
</body>
</html>

执行结果

1.5 Promise的all静态方法

all方法接收一个数组,如果数组中有多个Promise对象,只有都成功才会执行then方法。
并且会按照添加的顺序, 将所有成功的结果重新打包到一个数组中返回给我们。
如果数组中不是Promise对象, 那么会直接执行then方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        Promise.all([
            new Promise((resolve, reject) =>{
                setTimeout(() =>{
                    resolve({name:'guardwhy', age:18})
                },2000)
            }),
            new Promise((resolve, reject) =>{
                resolve({name: 'James', age:'33'})
            }, 1000)
        ]).then(results =>{
            console.log(results);
        })
    </script>
</body>
</html>