Promise

cb++

于 2021-04-12 09:11:59 发布

阅读量93

点赞数 1

本文链接：https://blog.csdn.net/weixin_44768794/article/details/115602556

版权

Promise

Promise的介绍和基本使用
- 1.1 初识Promise
- 1.2 resolve和reject
Promise的三种状态
Promise 另外处理形式
Promise链式调用
Promise的all方法调用

Promise的介绍和基本使用

1.1 初识Promise

Promise是ES6中好用且重要的特性
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>
    // const name = 'zzy'
    // console.log(name);

    // const result = 7 + 2;
    // console.log(result);

    // 使用setTimeout 异步操作
    setTimeout(() => {
      console.log('setTimeout');
    }, 1000)

    new Promise((resolve, reject) => {
      // 第一次网络请求的代码
      setTimeout(() => {
        resolve()
      }, 1000)
    }).then(() => {
      // 第一次处理代码
      console.log('aaaaaaa');
      console.log('aaaaaaa');
      console.log('aaaaaaa');
      console.log('aaaaaaa');
      console.log('aaaaaaa');

      return new Promise((resolve, reject) => {
        // 第二次网络请求代码
        setTimeout(() => {
          resolve()
        }, 1000)
      }).then(() => {
        // 第二次处理代码
        console.log('bbbbbb');
        console.log('bbbbbb');
        console.log('bbbbbb');
        console.log('bbbbbb');
        console.log('bbbbbb');

        return new Promise((resolve,reject) => {
          // 第三次网络请求代码
          setTimeout(() => {
            resolve()
          },1000)
        }).then(() => {
          // 第三次处理代码
          console.log('cccccc');
          console.log('cccccc');
          console.log('cccccc');
          console.log('cccccc');
          console.log('cccccc');
        })
      })
    })

    
  </script>
</body>

</html>

1.2 resolve和reject

成功的时候调用resolve，实现then里面的内容
失败的时候调用reject，实现catch中的内容

new Promise((resolve,reject) => {
      setTimeout(() => {
        // 成功的时候调用resolve
        resolve('Hello world')
        // 失败的时候调用reject
        reject('哦吼')
      },1000)
    }).then((data) => {
      console.log(data);
      console.log(data);
      console.log(data);
      console.log(data);
    }).catch((err) => {
      console.log(err);
    })

Promise的三种状态

当我们开发由异步操作时，就可以给异步操作包装一个Promise
异步操作之后会有三种状态
pending 等待状态，如正在进行网络请求或者定时器未到时间
fulfill 满足状态，当我们主动回调resolve时，就处于该状态，并且回调.then()
reject 拒绝状态，当我们主动回调reject时，就处于该状态，并且回调.catch()

Promise 另外处理形式

回调resolve和reject时，只回调.then()
resolve回调函数1
reject回调函数2

<script>
    new Promise((resolve,reject) => {
      setTimeout(() => {
        resolve('Hello Vuejs')
        reject('error message')
        // then(函数1，函数2) 回调resolve时函数1实现，回调reject时函数2实现
      },1000).then(data => {
        console.log(data);
      }, err => {
        console.log(err);
      })
    })
  </script>

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>
    // new Promise((resolve,reject) => {
    //   setTimeout(() => {
    //     resolve('hello')
    //   },1000)
    // }).then(res => {
    //   console.log(res,'第一层的10行处理代码');
    //   // 对结果进行第一次处理
    //   return new Promise((resolve) => {
    //     resolve(res + '111')
    //   })
    // }).then(res => {
    //   console.log(res,'第二层的10行处理代码');
    //   return new Promise((resolve => {
    //     resolve(res+'222')
    //   }))
    // }).then(res => {
    //   console.log(res,'第三层的10行处理代码');
    //   return new Promise()
    // })

    new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('hello')
      }, 1000)
    }).then(res => {
      console.log(res, '第一层的10行处理代码');
      // 对结果进行第一次处理
      // 简写1.0
      // return new Promise((resolve) => {
      //   resolve(res + '111')
      // })
      // 简写2.0
      // return Promise.resolve(res + '111')
      // 简写3.0
      // return res + '111'
      // return Promise.reject('error')
      throw 'error'
    }).then(res => {
      console.log(res, '第二层的10行处理代码');
      // return new Promise((resolve => {
      //   resolve(res+'222')
      // }))
      // return Promise.resolve(res + '222')
      return res + '222'
    }).then(res => {
      console.log(res, '第三层的10行处理代码');
      return new Promise()
    }).catch(err => {
      console.log(err);
    })
  </script>
</body>

</html>

Promise的all方法调用

<!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>
    // Promise.all([
    //   new Promise((resolve, reject) => {
    //     $ajax({
    //       url: 'url1',
    //       success: function (data) {
    //         resolve(data)
    //       }
    //     })
    //   }),
    //   new Promise((resolve, reject) => {
    //     $ajax({
    //       url: 'url2',
    //       success: function (data) {
    //         resolve(data)
    //       }
    //     })
    //   })
    // ])

    Promise.all([
      new Promise((resolve, reject) => {
        setTimeout(() => {
          console.log('result1');
        }, 1000)
      }),
      new Promise((resolve, reject) => {
        setTimeout(() => {
          console.log('result2');
        }, 2000)
      })
    ]).then((result) => {
      console.log(results);

    })
  </script>
</body>

</html>

cb++

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
Promise

PromisePromise的介绍和基本使用1.1 初识Promise1.2 resolve和rejectPromise的三种状态Promise 另外处理形式Promise链式调用Promise的all方法调用Promise的介绍和基本使用1.1 初识PromisePromise是ES6中好用且重要的特性Promise是异步编程的一种解决方案异步事件：当我们在网络请求时会处理异步事件封装一个网络请求的函数，因为不能立即拿到结果，所以不能直接将结果传递回去我们往往会传入另一个函数，在数据请求成
复制链接

扫一扫