Promise异步编程进阶

Promise的使用

<script>
    // 参数 -> 函数(resolve, reject)
    // resolve, reject本身它们又是函数
    // 链式编程
    new Promise((resolve, reject) => {

      // 第一次网路请求的代码 
      setTimeout(() => {
        resolve()
      }, 2000)
    }).then(() => {
      console.log('Hello World');
      console.log('Hello World');
      console.log('Hello World');
      console.log('Hello World');
      console.log('Hello World');

      return new Promise((resolve, reject) => {

        // 第二次网络请求的代码
        setTimeout(() => {
          resolve()
        }, 1000)
      })
    }).then(() => {
      // 第二次处理的代码
      console.log('Hello Vue.js');
      console.log('Hello Vue.js');
      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 css');
      console.log('Hello css');
      console.log('Hello css');
      console.log('Hello css');
      console.log('Hello css');
    })

    new Promise((resolve, reject) => {
      setTimeout(() => {
        // 成功的时候
        resolve('异步传数据')

        // 失败的时候
        // reject('error message')
      }, 5000)
    // .then((data) => 只有一个参数,data括号可以省略
    }).then((data) => {
      console.log('成功反馈');
      console.log(data);
      console.log(data);
      console.log(data);
      console.log(data);
      console.log(data);
    }).catch(err => {
      // 捕获错误信息
      console.log('错误信息');
      console.log(err);
      console.log(err);
      console.log(err);
      console.log(err);
      console.log(err);
    })
  </script>

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

Promise的另种处理形式

<script>
    // then(函数一:成功, 函数二:失败)
    new Promise((resolve, reject) => {
      setTimeout(() => {
        // resolve('Hello Vue.js')
        reject('error message')
      }, 1000)
    }).then(data => {
      console.log(data);
    }, err => {
      console.log(err);
    })  
  </script>

Promise的链式调用

<script>
    // wrapped into 内部包装
    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((resolve, reject) => {
      setTimeout(() => {
        resolve('aaa')
      }, 1000)
    }).then(res => {
      // 1.自己处理10行代码
      console.log(res, '第一层的10行处理代码');

      // 2.对结果进行第一次处理
      // 捕获失败信息
      return Promise.reject('error')
      //手动抛出异常
      throw 'error message'

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

      return Promise.resolve(res + '222')
    }).then(res => {
      console.log(res, '第三层的10行处理代码')
    }).catch(err => {
      console.log(err);
    }) 

    // 省略Promise.resolve
    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行处理代码')
    })  
  </script>

Promise的all方法使用

<script>
  Promise.all([
    new Promise((resolve, reject) => {
      setTimeout(() => {
        // resolve('result1')
        resolve({name: 'why', age: 18})
      }, 2000)
    }),
    new Promise((resolve, reject) => {
      setTimeout(() => {
        // resolve('result2')
        resolve({name: 'blue', age: 19})
      }, 1000)
    })
  ]).then(results => {
    console.log(results)
  })
</script>

My Blog: https://coderblue.cn/
Github:https://github.com/onecoderly
My Project:https://coderblue.cn/project/