zoukankan      html  css  js  c++  java
  • Promise01

    Promise

    Promise是一个对象,它代表了一个异步操作的最终完成或失败及其结果值。

    使用Promise

    本质上是一个函数返回的对象,我们可以在它上面绑定回调函数。这样就不需要一开始把回调函数作为参数传入函数中
    示例:foo()函数接收一些配置和两个回调函数

      function successCallback(result) {
        console.log('创建成功')
      }
      function failureCallback(error) {
        console.log('出现错误')
      }
      ```
      普通调用:``foo(fooSettings, successCallback, failureCallback)``
      异步函数调用:
      ```javascript
        const promise = foo(fooSettings)
        promise.then(successCallback, failureCallback)
      ```
        或
      ```
        foo(fooSettings).then(successCallback, failureCallback)
      ```
    ### 约定
    不同于“老式”的传入回调,在使用promise时,会有以下约定:
      + 在本轮事件循环运行完成之前,回调函数是不会被调用的
      + 即使异步操作已经完成,在这之后通过then()添加的回调函数也会被调用
      + 通过多次调用then()可以添加多个回调函数,它们会按照插入顺序执行
    ### 链式调用
    连续执行两个或多个异步操作,在上一个操作执行成功后,开始下一个操作,并带着上一步操作返回的结果,可以通过Promise链实现;
    链式调用可解决回调地狱的问题;
    示例:
    回调地狱:
    ```javascript
      doSomething(function(result) {
        dosomethingElse(result, function(newResult) {
          doThirdThing(newResult, function(finalResult) {
            conosle.log('Got teh final result' + finalResult)
          }, failureCallback)
        }, failureCallback)
      }, failureCallback)
    

    Promise链:

      doSomething().then(function(result) {
        return doSomethingElse(result)
      })
      .then(function(newResult) {
        return doThirdThing(newResult)
      })
      .then(function(finalResult) {
        conosle.log('Got teh final result' + finalResult)
      })
      .catch(failureCallback)  // 相当于.then(null, failureCallback)
    
    用箭头函数: 一定要有返回值,否则callback将无法获得上个promise的结果。
    
      doSomeThing().then( result => doSomethingElse(result) )
      .then( newResult => doThirdThing(newResult) )
      .then( finalResult => conosle.log('Got teh final result' + finalResult) )
      .catch(failureCallback)
    

    链式操作中,可能会在一个回调失败后继续使用链式操作,可以在中间使用一个catch,抛出失败,之后再进行新的操作

    时序

    为避免意外,即使是一个已经变成resolve状态的Promise,传递给then()的函数也总会被异步调用;
    传递到then()中的函数被置入到一个微任务队列中,而不是立即执行,即在JavaScript事件队列的所有运行结束时结束了,且事件队列被清空后,才开始执行
    示例:

      const wait = ms => new promise(resolve => setTimeout(resolve, ms))
      wait().then(() => console.log(4))
      Promise.resolve().then(() => console.log(2)).then(() => console.log(3))
      console.log(1)
      // 1, 2, 3, 4
    

    嵌套

    嵌套Promise是一宗可以限制catch语句的作用域的控制结构写法。
    示例:

      doSomething()
      .then(result => doSomeThingOptional()
        .then(optionalResult => doSomethingExtraNice(optionalResult))
        .catch(e => console.log(e.message))
      )
      .then(() => moreCriticalStuff())
      .catch(e => console.log("Critical failure: " + e.message))
    

    Promise描述

    一个Promise必然处于以下及几种状态之一:

    • 待定(pending):初始状态,既没有被兑现,也没有被拒绝
    • 已兑现(fulfilled):意味着操作成功完成
    • 已拒绝(rejected):意味着操作失败
  • 相关阅读:
    同余方程
    倒酒
    机器翻译
    vue 锚点定位
    解决vuex刷新页面数据丢失
    h5 input失去焦点软键盘把页面顶起
    js 监听ios手机键盘弹起和收起的事件
    js 将数组中的每一项安装奇偶重新组合成一个数组对象
    moment.js获取本周本月本年的开始日期和结束日期
    vue 所有的路由跳转加一个统一参数
  • 原文地址:https://www.cnblogs.com/miao91/p/15710229.html
Copyright © 2011-2022 走看看