zoukankan      html  css  js  c++  java
  • JavaScript:学习笔记(9)——Promise对象

    JavaScript:学习笔记(9)——Promise对象

    引入Promise

      Primose是异步编程的一种解决方案,比传统的解决方案回调函数和事件更加合理和强大。如下面为基于回调函数的Ajax操作:

    request.onreadystatechange = function () {
        if (request.readyState === 4) {
            if (request.status === 200) {
                return success(request.responseText);
            } else {
                return fail(request.status);
            }
        }
    }

    通过分析,我们发现回调一个很大的问题,就是层层嵌套的回调函数,当代码量较大的时候,将难以维护。

      所谓Promise,提供了另外一种链式的异步方案。

    var ajax = ajaxGet('http://...');
    ajax.ifSuccess(success)
        .ifFail(fail);

      先统一执行AJAX逻辑,不关心如何处理结果,然后,根据结果是成功还是失败,在将来的某个时候调用success函数或fail函数。古人云:“君子一诺千金”,这种“承诺将来会执行”的对象在JavaScript中称为Promise对象。  

      异步操作完成后,将可以设置Promise的状态,他有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败),一旦设置好后任何操作都无法改变这个状态,并且任何时候都可以得到这个状态。

     

    基本用法

      基本语法如下:

    const promise = new Promise(function (resolve, reject) {
        //....some code
        if(/*异步操作成功*/ )
            resolve(value)
        else
            reject(error)
    });
    

      Promise构造函数接收一个函数作为参数,该函数的两个参数分别是resolve、reject(由JS提供,不需要自己提供)

    • resolve函数将Promise对象的状态从“未完成”变为“成功”,在异步操作成功时调用,并将异步操作的结果,作为参数传递出去。
    • reject函数将Promise对象的状态从“未完成”变为“失败”,在异步操作失败是调用,并将异步操作的错误,作为参数传递出去。

      Promise实例生成以后,可以用then方法分别指定reolved状态和rejected状态的回调函数。

    promise.then(function(value) {
      // success
    }, function(error) {
      // failure
    });

      then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用,第二个回调函数是Promise对象的状态变为rejected时调用。其中,第二个函数是可选的,不一定要提供。这两个函数都接受Promise对象传出的值作为参数。

    实例

    const promise = new Promise((resolve, reject) => {
        console.log("Promise")
        resolve();
    });
    
    promise.then(()=>{
        console.log("Resolve")
    })
    
    console.log("Hi")
    

      上面代码中,Promise新建后立即运行,所以首先输出的是Promise。然后,then方法指定的回调函数,将在当前脚本所有同步任务执行完才会执行,所以resolved最后输出

      一般来说,调用resolvereject以后,Promise 的使命就完成了,后继操作应该放到then方法里面,而不应该直接写在resolvereject的后面。所以,最好在它们前面加上return语句,这样就不会有意外。

    new Promise((resolve, reject) => {
      return resolve(1);
      // 后面的语句不会执行
      console.log(2);
    })
    

      

  • 相关阅读:
    spring @component的作用
    Spring 开启Annotation <context:annotation-config> 和 <context:component-scan>诠释及区别
    servlet中实现页面跳转return “r:”和return “f:
    MyEclipse中SVN的使用方法 此博文包含图片 (2012-04-19 12:18:35)
    MyEclipse使用总结——MyEclipse10安装SVN插件
    javaweb学习总结(九)—— 通过Servlet生成验证码图片
    Spring-springmvc-mybatis整合
    MyBatis连接SQLServer数据库
    mybatis入门基础(二)----原始dao的开发和mapper代理开发
    MyBatis入门基础(一)
  • 原文地址:https://www.cnblogs.com/MrSaver/p/10520030.html
Copyright © 2011-2022 走看看