美文网首页
Promise链式编程

Promise链式编程

作者: 白小纯Zzz | 来源:发表于2019-01-24 10:59 被阅读0次

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

相关文章

  • Promise链式编程

    promise俗称链式调用,它是es6中最重要的特性之一。简单的说可以不停的then调用嵌套在调用(异步之后,链式...

  • js promise图解

    链式调用 封闭promise

  • jQuery 链式编程

    jQuery 链式编程 链式编程原理 链式编程代码示例 隐式迭代

  • 链式编程思想

    链式编程思想 链式编程思想

  • iOS 链式编程

    链式编程 主要介绍链式编程原理,以及如何创建链式编程 编程范式 在介绍链式编程之前,首先来了解下什么是编程范式。 ...

  • js常见面试题

    instanceof的用法: promise链式编程: 三元运算表达式在常见的循环中怎么使用: switch常见的...

  • Promise

    什么是Promise Promise解决了什么问题 Promise/A+规范 Promise的原理(如何实现链式调...

  • 嵌套的promise执行顺序

    外部promise有多个then链式调用,第一个then里面执行另一个promise,也带多个then链式调用,他...

  • JavaScript异步编程:(三)Promise链式

    前言 Promise的实例方法(then、catch、finally)返回的都是一个新的Promise对象,所以可...

  • Promise用法详解

    参考promise|深入理解 promise:promise的三种状态与链式调用 Promise对象只有三种状态 ...

网友评论

      本文标题:Promise链式编程

      本文链接:https://www.haomeiwen.com/subject/tqhyjqtx.html