脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → javascript异步编程代码书写规范Promise

javascript异步编程代码书写规范Promise学习笔记

 更新时间：2015年02月11日 08:54:08   投稿：hebedich  
这篇文章主要介绍了javascript异步编程代码书写规范Promise学习笔记,需要的朋友可以参考下

最近工作轻松了点，想起了以前总是看到的一个单词promise，于是耐心下来学习了一下。

一：Promise是什么？为什么会有这个东西？

首先说明，Promise是为了解决javascript异步编程时候代码书写的方式产生的。
随着javascript的发展，异步的场景越来越多。前端有AJAX，setTimeout等，后端Node异步更多。按照传统的做法，那么就是各种回调嵌回调。代码可以把人绕晕。
这个时候，CommonJS社区提出了一个叫做Promise/A+的规范，这个规范定义了如何书写异步代码，包括使用when/then/resolve等来组织异步的代码。
这个规范由于很优雅，所以相继就有很多人实现了这个规范，其中包括 浏览器原生支持的Promise()， jQuery里面的deferred，when.js等。
因为这几个库都符合该规范，所以学习一个也就可以了。我主要学习了jQuery的deferred，所以本文主要讲讲这个实现。
 
二：jQuery的deferred

首先，关于deferred对象，阮一峰老师有篇文章写的很详细了，地址点这。建议可以先看看他的那篇文章，再继续往下看。
上面说过，promise是为了解决异步（比如ajax）的，那么我们来对比下他们的区别。
经典的jQuery的AJAX的写法是

复制代码 代码如下:

$.ajax({
    type: "get",
    url: "",
    success: function () {},
    error; function () {}
});

其中success和error参数便是成功/失败时候的回调函数。 

而现在jQuery的AJAX写法成了

复制代码 代码如下:

$.ajax({
    type; "get",
    url: ""
}).done(function () {}).fail(function () {});

其中成功后会调用done里面的函数，失败便会调用fail里面的函数。 

看到这里也许你就会有疑问了，done/fail这些方法是哪个对象上的？$.ajax()返回了什么对象，为什么有这两个方法？
答案就在下面介绍的Deferred对象。

jQuery提供了一种新的类型Deferred。通过$.Deferred()来生成。例如

复制代码 代码如下:

var def = $.Deferred();

这个def继承了很多方法，有done/fail/resolve/reject等。
所以这里我们也就知道，上面$.ajax()其实返回的也就是这个对象。
 
deferred对象有很多方法，这里介绍几种常用的，更多的可以参考 API
 
首先自然是生成一个def对象。这里有很多方法，比如：

复制代码 代码如下:

var def = $.Deferred();    // 自己生成
$.ajax({});    // ajax方法返回的也是def对象
$.when();    // when方法也会返回一个def对象

这里，$.when()可以单独讲讲，这个方法通常接收一个或多个deferred对象，然后根据这些deferred对象的状态情况，来决定$.when()返回的对象的状态。其中有个使用场景就是多个ajax请求，如果其中一个失败就都算失败，那么便可以在$.when()中传入多个ajax方法，例如$.when($.ajax(), $.ajax())。然后$.when会返回一个def对象（根据这两个请求结果的来判断）。
 
接着得到了def对象，便有了一系列改变这个对象状态的方法

复制代码 代码如下:

def.resolve();    // 把def对象设置成已经完成，然后便会立刻执行绑定在def.done()里面的函数。
def.reject();    // 把def对象设置成已经失败，然后便会立刻执行绑定在def.fail()里面的函数。
def.notify();    // def对象执行中，对应的回调是def.progress()。

紧接着是设置回调的方法，顺序和上面的对应，也就是什么状态会调用到什么回调

复制代码 代码如下:

def.done();    // 对应def.resolve();
def.fail();    // 对应def.reject();
def.progress();    // 对应 def.notify();
// 特殊的
def.always();    // 成功或者失败都会调用
def.then();    // 接受多个函数，按顺序依次是成功(done)，失败(fail)和进行中(progress)

其实到这里位置，deferred对象的用法也就差不多了。不过jQuery还提供了几个API

复制代码 代码如下:

// 检查当前状态类
def.isRejected();
def.isResolved();
def.state();

这几个api顾名思义，就不具体讲了，具体可以查看上面给的jQuery API文档。
 
还有一个方法，就是有时候我们希望给外部一个def对象，然后这个对象可以设置各种状态的回调，但是不能改变它的状态，那么就可以用

复制代码 代码如下:

def.promise();

返回一个promiese对象，是deferred对象的子集，可以用done/fail等方法，没有resolve/reject等方法，主要是为了保护不让外部去修改def对象的状态。 

至此，关于promise已经全部讲完，大家现在就可以把它用在自己的项目中了，另外提早给大家拜个早年，祝大家羊年洋洋得意^ ^。

您可能感兴趣的文章:

相关文章

  • 全网小程序接口请求封装实例代码

    全网小程序接口请求封装实例代码

    这篇文章主要给大家介绍了关于全网小程序接口请求封装的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  •  JavaScript 数据结构之散列表的创建(2)

     JavaScript 数据结构之散列表的创建(2)

    这篇文章主要介绍了 JavaScript 数据结构之散列表的创建，主要看如何处理散列值冲突的问题，并实现更完美的散列表。下文详细介绍需要的小伙伴可以参考一下
    2022-04-04
  • JS+CSS实现大气的黑色首页导航菜单效果代码

    JS+CSS实现大气的黑色首页导航菜单效果代码

    这篇文章主要介绍了JS+CSS实现大气的黑色首页导航菜单效果代码,涉及JavaScript基于鼠标事件实现页面样式动态切换的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • DataGear开发基于three.js的3D数据可视化看板的详细代码

    DataGear开发基于three.js的3D数据可视化看板的详细代码

    DataGear 支持采用原生的HTML、JavaScript、CSS制作数据可视化看板，也支持导入由npm、vite等前端工具构建的前端程序包，这篇文章主要介绍了DataGear制作基于three.js的3D数据可视化看板,需要的朋友可以参考下
    2024-02-02
  • 详解webpack 如何集成第三方js库

    详解webpack 如何集成第三方js库

    这篇文章主要介绍了详解webpack 如何集成第三方js库，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-06-06
  • Js可拖拽放大的层拖动特效实现方法

    Js可拖拽放大的层拖动特效实现方法

    这篇文章主要介绍了Js可拖拽放大的层拖动特效实现方法,涉及javascript操作DOM元素及css样式的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • Javascript无阻塞加载具体方式

    Javascript无阻塞加载具体方式

    这篇文章介绍了JS无阻塞加载，有需要的朋友可以参考一下
    2013-06-06
  • bootstrap paginator分页插件的两种使用方式实例详解

    bootstrap paginator分页插件的两种使用方式实例详解

    Bootstrap Paginator是一款基于Bootstrap的js分页插件，下面通过本文给大家介绍bootstrap paginator分页插件的两种使用方式，一起看看吧
    2017-11-11
  • js实现自定义下拉框

    js实现自定义下拉框

    这篇文章主要为大家详细介绍了js实现自定义下拉框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-11-11
  • JavaScript创建对象的方式小结(4种方式)

    JavaScript创建对象的方式小结(4种方式)

    这篇文章主要介绍了JavaScript创建对象的方式,结合实例形式总结分析了四种创建对象的方式,并附带分析了JavaScript对象复制的技巧,需要的朋友可以参考下
    2015-12-12

最新评论