zoukankan      html  css  js  c++  java
  • ES6知识整理(8)--Promise对象

    (关于promise,以前并不知道是什么,没这个概念。现在来学习总结下)


    promise含义


    es6的异步编程解决方案。需要new新对象操作api。

    promise对象特点


    有3中状态:pending(进行中)、fulfilled(已完成)、rejected(已失效),异步操作才有的状态。


    2种状态的改变结果,称为:已定型(resolve):

    image.png

    即可将异步操作变为同步操作,避免层层嵌套回调函数。


    promise缺点:

    对象创建后会立即执行,中途不可中断。

    不设置回调时,将抛出异常,不影响外部执行。

    promise用法


    使用方法:

    image.png

    resolve作用:pending-->resolved 传参:异步成功的data

    reject作用:pending-->rejected 传参:error对象


    image.png

    若a=true;就会进resolve()函数,then中将会进data

    若a=false;就会进reject()函数,then中将会进err。

    promise执行顺序


    对象.then()

    image.png

    log输出顺序:1 3 2


    new之后直接.then()

    image.png

    log输出顺序:2 1


    直接return resolve(),就只执行回调,后面的不再执行。

    image.png

    因为前面return了 所以只会输出1


    异步操作例子


    异步加载图片:

    image.png

    若图片路径存在,则输出value为img对象

    若图片路径不存在或错误,则输出err为Error 加载失败


    异步操作ajax:

    json数据:

    image.png

    getJson函数带上参数url,可以返回该json数据。

    若获取到数据,返回数据;

    若访问不到数据,进入then的error,打印:

    Error at XMLHttpRequest.xhr.onreadystatechange

    image.png

    调用getJson(url),then中成功则进data,失败则进err。

    promise多重异步


    创建一个promise的ajax

    image.png


    创建多重异步(2个then,第2个getJson使用return):

    image.png

    结果:

    image.png

    这个是简洁版本:

    image.png

    结果是一样的(两重异步):

    image.png


    Network中:

    image.png


    一句:别让自己的努力只是感动了自己。


    ----公众号:海瑞菌

  • 相关阅读:
    day14
    day13
    装饰器小题
    day12
    tes..
    1380 没有上司的舞会
    算法模板——KMP字符串匹配
    算法模板——Tarjan强连通分量
    3211: 花神游历各国
    1131: [POI2008]Sta
  • 原文地址:https://www.cnblogs.com/wuhairui/p/9231882.html
Copyright © 2011-2022 走看看