美文网首页
es6--Promise()用法

es6--Promise()用法

作者: 花拾superzay | 来源:发表于2020-01-14 21:07 被阅读0次

promise是用来解决异步编程的书写问题。在使用js时,为了实现某些逻辑经常会写出层层嵌套的回调函数,如果嵌套过多,会造成代码的书写困难和可读性差等问题,这种情况也被称为回调嵌套地狱。

Promise解决了回调嵌套地狱的问题。使得可以使用顺序书写(而非嵌套书写)的方式,实现回调的嵌套。简化了代码的书写难度,同时提高了代码的可读性。

Promise构造函数

Promise构造函数,接受一个函数参数,参数会在构造函数内被调用,且会被传入resolve和reject两个方法,这2个方法用来改变实例的状态,然后就可以触发实例then方法中注册的成功和失败回调,同时给回调传入参数

promise实例

promise实例有3种状态,等待(或者说进行中),成功,失败。以及then,catch方法。then方法用于注册成功和失败时的回调,catch方法用于注册失败时的回调,它们返回的依然是promise实例,以便链式调用,或者顺序书写。promise实例改变状态后,触发相应回调,该过程是微异步过程。

then方法

假设有promise实例a,当使用a.then(function h(){},function t(){})方法来注册回调时,同时其也返回了一个新的promise实例(假设为b)

a实例的状态从等待, 变为成功或者失败时, 会触发相应的成功或失败回调。这里假设a实例的状态变为了成功,则触发h回调,如果h的返回值是非promise实例, 则会自动执行b的resolve方法,并传入返回值。但如果h的返回值是一个promise实例(假设为c),则表现出的结果为状态关联,c的reject执行,则b的reject执行,并接收c的reject传入的参数;c的resolve执行,则b执行resolve,并接收c的resolve传入的参数;c实例状态如果为等待,则b不触发

demo

//promise的then回调触发是微异步过程
//then回调返回常规值案例
let a = new Promise((resolve, reject) => {
    setTimeout(()=> {
        resolve(100)
    }, 5000)
});

let b = a.then((arg) => { //成功回调
    return arg + 100
});

b.then((arg) => { //成功回调
    console.log(arg) //5秒后打印,200
})




//then回调返回promise案例
let a = new Promise((resolve, reject) => {
    setTimeout(function() {
        resolve(100)
    }, 5000)
});

let b = a.then((arg) => { //成功回调

    let c = new Promise((resolve, reject) => {
        setTimeout(function() => {
            resolve(art + 100)
        }, 5000)
    })
    return c

});

b.then((arg) => { //成功回调
    console.log(arg) //10秒后打印,200
})

相关文章

  • es6--Promise()用法

    promise是用来解决异步编程的书写问题。在使用js时,为了实现某些逻辑经常会写出层层嵌套的回调函数,如果嵌套过...

  • ES6--Promise

    学过ES6的同学大概都知道Promise,可想而知Promise在ES6中很重要。 Promise对象代表了未来将...

  • ES6--Promise

    Promise解决异步回调的问题 Promise.all和Promise.race

  • es6--Promise对象

    promise 对象 是异步编程的解决方案 基本概念:相当于一个容器,保存着未来才会结束的事件(异步操作)的一个结...

  • 手撕ES6--Promise

    废话不多说,直接上代码 嗯,就是这样的,随手做了两个测试,一点问题也没有,代码实现比较简单,就不多说了.

  • MyBatis XML使用方式

    内容: select用法 insert用法 update用法 delete用法 多个接口参数的用法 动态代理实现原...

  • Swift 4.0 数组、集合Set、字典相关常用用法总结

    数组用法 集合Set用法 字典用法

  • ES-6--数据结构

    Set的用法,WeakSet的用法,Map的用法,WeakMap的用法 Set()基本用法 Set的add,del...

  • icon 用法

    icon 的5种用法 icon有5种常用的用法: img 用法 background 用法 background ...

  • export 导出与import 导入

    导出变量用法1 导出变量用法2 导出函数用法1 导出函数用法2 导出类

网友评论

      本文标题:es6--Promise()用法

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