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 word");
  // },1000)

  // 2. promise的使用
//  promise的参数-> 函数(resolve，reject)
//  resolve，reject本身他们就是函数
//   new Promise((resolve,reject) =>{
//     setTimeout(()=>{
//     console.log("Hello word");
//   },1000)
//   })

  // 3. 异步操作的时候使用promise对这个异步操作进行封装
  // new -> 构造函数(1.保存一些状态信息 2. 执行传入的函数 )
  // 在执行传入的回调函数时，会传入两个函数，resolve，reject 他们本身又是函数
    new Promise((resolve,reject)=>{
      setTimeout(()=>{
        // 成功的时候调用resolve
        // resolve('Hello Word')

        //  失败的时候调用reject
        reject('error message')

        // 失败的时候调用reject
      },1000)
    }).then((data) =>{
      console.log(data);
      console.log(data);
      console.log(data);
      console.log(data);

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

</script>
</body>
</html>
基本使用

 

二、Promise((resolve,reject)=>{reject()}).then(success=>{},err=>{})

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

<script>
new Promise((resolve, reject)=>{
  setTimeout(()=>{
    reject('error');
    // resolve("Hello");

  },1000)
}).then(
    data =>{console.log(data);}
    ,
    err =>{console.log(err);
              alert(err, 'reject')
   })
    //只写一个then(success=>{},err=>{})
</script>
</body>
</html>
.then()

 

三、Promise()链式操作和简写

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

<script>
  // 需求
  // 网络请求: aaa -> 自己处理(10行)
  // 处理： aaa111 -> 自己处理(10行)
  // 处理： aaa111222 -> 自己处理

  // new Promise((resolve,reject) => {
  //   setTimeout(()=>{
  //     resolve('aaa')
  //   },1000)
  // }).then(res => {
  //       // 1. 自己处理10行代码
  //       console.log(res,"第一层的10行处理代码");
  //
  //       // 2. 对结果进行第二次处理
  //       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行处理代码');
  //     })

//没有异步的时候可以简写
  // 简写（省略new Promise()完整过程，直接return Promise.resolve(res + '111')）
  // new Promise((resolve,reject) => {
  //   setTimeout(()=>{
  //     resolve('aaa')
  //   },1000)
  // }).then(res => {
  //       // 1. 自己处理10行代码
  //       console.log(res,"第一层的10行处理代码");
  //
  //       // 2. 对结果进行第二次处理
  //       return Promise.resolve(res + '111')
  //
  //     }).then(res =>{
  //       console.log(res,'第二层的10行处理代码');
  //
  //       return Promise.resolve(res + '222')
  //     }).then(res=>{
  //       console.log(res,'第三层的10行处理代码');
  //     })

  // 极简写（再省略Promise，直接return res + '111'）
  // new Promise((resolve,reject) => {
  //   setTimeout(()=>{
  //     resolve('aaa')
  //   },1000)
  // }).then(res => {
  //       // 1. 自己处理10行代码
  //       console.log(res,"第一层的10行处理代码");
  //
  //       // 2. 对结果进行第二次处理
  //       return res + '111'
  //
  //     }).then(res =>{
  //       console.log(res,'第二层的10行处理代码');
  //
  //       return res + '222'
  //     }).then(res=>{
  //       console.log(res,'第三层的10行处理代码');
  //     })

  // 加异常简写
    new Promise((resolve,reject) => {
    setTimeout(()=>{
      resolve('aaa')
    },1000)
  }).then(res => {
        // 1. 自己处理10行代码
        console.log(res,"第一层的10行处理代码");

        // 2. 异常处理写法
        // return Promise.reject('error message')
      throw "error msg"

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

        return Promise.resolve(res + '222')
      }).then(res=>{
        // 不会处理这条，被异常跳过了
        console.log(res,'第三层的10行处理代码');
      }).catch(err=>{
      console.log(err);
    })
</script>
</body>
</html>
链式操作

 

四、Promise.all()

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

<script>
  //两个异步都完成的时候调.then()
  // .then(results=>{
  //   console.log(results);          results是一个数组，
  //   console.log(results[0]);   第一个Promise的结果
  //   console.log(results[1]);   第二个Promise的结果
  // })

  Promise.all([   // all里面传入的是一个可迭代对象
      new Promise ((resolve, reject) =>{
        setTimeout(() =>{
          resolve("result1")
          console.log("2秒")
        },2000)
      }),

      new Promise((resolve, reject) => {
        setTimeout(()=>{
          resolve('result2')
          console.log("1秒")
        },1000)
      })
  ]).then(results=>{
    console.log(results);
    console.log(results[0]);
    console.log(results[1]);
  })
</script>
</body>
</html>
.all

 

posted @ 2020-02-16 22:19  zwnsyw  阅读(345)  评论(0)  编辑  收藏  举报