Promise链式编程

promise俗称链式调用，它是es6中最重要的特性之一。
简单的说可以不停的then调用嵌套在调用（异步之后，链式调用方式执行回调），这种操作方式称为promise。
promise链用来解决异步太好用了。

1. Promise

包含两个参数：resolve ，reject 。
resolve：将promise的状态设置为完成状态（resolved），此时then方法捕捉变化，执行成功的回调。
reject：将promise状态设置为无效（rejected），此时then方法执行失败回调

（1）将promise的状态都设置成（resolve）

  1、初始化：比如说以省、市、区（province、city、area）三个方法来演示下链式调用的关系
（采用setTimeout模拟异步操作）

  function province() {
        console.log('陕西省')
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                console.log('陕西 省份')
                resolve('陕西')
            }, 2000);
        })
    }
    function city(data) {
         console.log('省份' + data)
         return new Promise((resolve, reject) => {
            setTimeout(() => {
                 console.log('西安 市级')
                 resolve('西安市')
             }, 3000);
          })
     }
    function area(data) {
          console.log('市级' + data)
          return new Promise((resolve, reject) => {
             setTimeout(() => {
                 console.log('雁塔 区县')
                 resolve('雁塔区')
             }, 1000);
          })
      }
  2、 函数写完之后，就开始结合then来链式调用了

    province()
    .then((data)=>{
        return city(data)
    })
    .then((data)=>{
        return area(data)
    })
    .then((data)=>{
        console.log(data)
    })
  
   简化写法：

    province().then(city).then(area).then((data)=>{
        console.log(data)
    })
  3、 查看控制台输出：

hello.png

2． rejected（部分置为无效状态）

  1、初始化：同样的以上述的函数为例
  
   function province() {
        console.log('陕西省')
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                console.log('陕西 省份')
                reject('陕西')
            }, 2000);
        })
    }
    function city(data) {
         console.log('省份' + data)
         return new Promise((resolve, reject) => {
            setTimeout(() => {
                 console.log('西安 市级')
                 resolve('西安市')
             }, 3000);
          })
     }
  2、 函数写完之后，就开始结合then来链式调用了
        province()
        .then(city,(data)=>{
            console.log(data)
        })

查看控制台输出：

reject.png

   等同于（null不执行）
        province()
        .then(null, (data) => {
            console.log(data)
        })

查看控制台输出：

reject.png

  等同于（直接执行catch回调，抛出异常，页面也不会卡死，直接走catch）
        province()
        .then(city).catch((data)=>{
            console.log(data)
        })

查看控制台输出：

reject.png

 (备注：为reject的时候，执行then的第二个参数回调，不会执行city)

3、 Promise之All，等执行所有异步，完事之后执行then回调返回出数组数据类型

1、初始化两个同级函数
  function province1() {
       console.log('陕西省1')
       return new Promise((resolve, reject) => {
           setTimeout(() => {
                console.log('陕西 省份1')
                resolve('陕西1')
           }, 2000);
       })
  }
  function province2() {
       console.log('陕西省2')
       return new Promise((resolve, reject) => {
           setTimeout(() => {
                 console.log('陕西 省份2')
                 resolve('陕西2')
           }, 3000);
       })
   }
2、函数写完之后，调用了
  Promise.all([province1(), province2()]).then((data)=>{
        console.log(data)
  })

3、查看控制台输出：

PromiseAll.png

最后编辑于：2019.01.24 11:25:31