是什么?

https://www.promisejs.org/

What is a promise?

The core idea behind promises is that a promise represents the result of an asynchronous operation. A promise is in one of three different states:

  • pending - The initial state of a promise.
  • fulfilled - The state of a promise representing a successful operation.
  • rejected - The state of a promise representing a failed operation.

Once a promise is fulfilled or rejected, it is immutable (i.e. it can never change again).

promise的核心思想是, promise可以表示异步操作的的结果。 包括三个状态, pending, fulfiled, rejected

promise 在英文中是诺言, fulfil promise 为实现诺言,  rejected promise 为 收回诺言。 分别表示成功和失败。

用promise 来描述异步操作结果, 是太形象了, 在当下定义了一个 promise, 诺言的结果, 需要在将来来验证, 不影响当下的运行计划,

例如, 你对你老婆说, 你将来一定要买个大房子给你老婆住。  在你说的时候, 不影响你当天或者明天的工作和生活计划, 该编码就编码, 该散步就散步,

至于以后能不能买到大房子, 那是以后的事情了, 当然诺言要有个期限, 期限已到, 按照诺言, 需要买房, 如果能买到则 fulfill promise, 如果未实现,则reject promise。

如下面例子:

定义了一个读取文件的 promise, 读取成功了调用  fulfill回调, 读取失败了 调用 reject回调。

function readFile(filename, enc){
return new Promise(function (fulfill, reject){
fs.readFile(filename, enc, function (err, res){
if (err) reject(err);
else fulfill(res);
});
});
}

为什么?

如果没有promise, 则例如上例中, 异步读取动作, 我们需要在我们的回调函数callback中, 处理各种错误情况, 和成功情况。

错误情况, 包括:

1、 读取文件失败

2、 解析读取数据失败

成功情况:

1、 解析读取数据成功

使用promise后, 对于成功的情况, 定义成功的处理函数, 对于失败的情况, 定义失败的处理函数。  代码逻辑异常清晰。

function readJSON(filename, callback){
fs.readFile(filename, 'utf8', function (err, res){
if (err) return callback(err);
try {
res = JSON.parse(res);
} catch (ex) {
return callback(ex);
}
callback(null, res);
});
}

怎么用?

除了第一节中,  构造一个promise的例子, 指出要指定 fulfill 和 reject 回调函数, 如果在异步操作完成后, 想做一些其他动作, 则可以调用如下接口,进行定义:

use .then whenever you're going to do something with the result (even if that's just waiting for it to finish)

use .done whenever you aren't planning on doing anything with the result.

function readJSON(filename){
return readFile(filename, 'utf8').then(function (res){
return JSON.parse(res)
})
}

结合 then 和 catch接口, 实现的例子:

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch

var p1 = new Promise(function(resolve, reject) {
resolve("成功");
}); p1.then(function(value) {
console.log(value); // "成功!"
throw "哦,不!";
}).catch(function(e) {
console.log(e); // "哦,不!"
});

jquery ajax实现

https://api.jquery.com/jQuery.ajax/#jqXHR

$.ajax({
url: "http://fiddle.jshell.net/favicon.png",
beforeSend: function( xhr ) {
xhr.overrideMimeType( "text/plain; charset=x-user-defined" );
}
})
.done(function( data ) {
if ( console && console.log ) {
console.log( "Sample of data:", data.slice( 0, 100 ) );
}
});

API

  • jqXHR.done(function( data, textStatus, jqXHR ) {});

    An alternative construct to the success callback option, refer to deferred.done() for implementation details.

  • jqXHR.fail(function( jqXHR, textStatus, errorThrown ) {});

    An alternative construct to the error callback option, the .fail() method replaces the deprecated .error() method. Refer to deferred.fail() for implementation details.

  • jqXHR.always(function( data|jqXHR, textStatus, jqXHR|errorThrown ) { });

    An alternative construct to the complete callback option, the .always() method replaces the deprecated .complete() method.

    In response to a successful request, the function's arguments are the same as those of .done(): data, textStatus, and the jqXHR object. For failed requests the arguments are the same as those of .fail(): the jqXHR object, textStatus, and errorThrown. Refer to deferred.always() for implementation details.

  • jqXHR.then(function( data, textStatus, jqXHR ) {}, function( jqXHR, textStatus, errorThrown ) {});

    Incorporates the functionality of the .done() and .fail() methods, allowing (as of jQuery 1.8) the underlying Promise to be manipulated. Refer to deferred.then() for implementation details.

Promise API标准

https://www.promisejs.org/api/

每个API都有简单的使用介绍, 很是浅显易懂, i like it。

var p1 = new Promise(function(resolve, reject) {
resolve("Success");
}); p1.then(function(value) {
console.log(value); // "Success!"
throw "oh, no!";
}).catch(function(e) {
console.log(e); // "oh, no!"
}); setTimeout(function(){ p1.then(function(value) {
console.log(value); // "Success!"
throw "oh, no!";
}).then(undefined, function(e) {
console.log(e); // "oh, no!"
}); }, 2000)

Javascript Promise入门的更多相关文章

  1. javaScript Promise 入门

    Promise是JavaScript的异步编程模式,为繁重的异步回调带来了福音. 一直以来,JavaScript处理异步都是以callback的方式,假设需要进行一个异步队列,执行起来如下: anim ...

  2. JavaScript Promise:去而复返

    原文:http://www.html5rocks.com/en/tutorials/es6/promises/ 作者:Jake Archibald 翻译:Amio 女士们先生们,请准备好迎接 Web ...

  3. JavaScript从入门到精通(转)

    JavaScript从入门到精通 转自: https://github.com/Eished/JavaScript_notes 视频连接:https://www.bilibili.com/video/ ...

  4. Promise入门到精通(初级篇)-附代码详细讲解

    Promise入门到精通(初级篇)-附代码详细讲解 ​     Promise,中文翻译为承诺,约定,契约,从字面意思来看,这应该是类似某种协议,规定了什么事件发生的条件和触发方法. ​     Pr ...

  5. 【转】HTML, CSS和Javascript调试入门

    转 http://www.cnblogs.com/PurpleTide/archive/2011/11/25/2262269.html HTML, CSS和Javascript调试入门 本文介绍一些入 ...

  6. [Javascript] Promise

    Promise 代表着一个异步操作,这个异步操作现在尚未完成,但在将来某刻会被完成. Promise 有三种状态 pending : 初始的状态,尚未知道结果 fulfilled : 代表操作成功 r ...

  7. Javascript Promise 学习笔记

    1.     定义:Promise是抽象异步处理对象以及对其进行各种操作的组件,它把异步处理对象和异步处理规则采用统一的接口进行规范化. 2.     ES6 Promises 标准中定义的API: ...

  8. JavaScript快速入门(四)——JavaScript函数

    函数声明 之前说的三种函数声明中(参见JavaScript快速入门(二)——JavaScript变量),使用Function构造函数的声明方法比较少见,我们暂时不提.function func() { ...

  9. 第一百一十九节,JavaScript事件入门

    JavaScript事件入门 学习要点: 1.事件介绍 2.内联模型 3.脚本模型 4.事件处理函数 JavaScript事件是由访问Web页面的用户引起的一系列操作,例如:用户点击.当用户执行某些操 ...

随机推荐

  1. requirejs的基本学习

    1.首先看几个简单的学习网站. http://www.runoob.com/w3cnote/requirejs-tutorial-1.html 这里边有两个教程一个一,一个二,看完后你有简单的了解.

  2. Android中用URL模拟一个简单的图片加载器

    首先,需要添加权限. <uses-permission android:name="android.permission.INTERNET"/> 整体代码如下: pac ...

  3. Java Day 09

    子父类的构造函数 在子类的构造函数中,第一行有一个默认的隐式语句:super() 子类的实例化过程:子类中所有的构造函数默认都会访问父类中的空参数的构造函数. 为什么子类实例化的时候要访问父类中的构造 ...

  4. [记录]calculate age based on date of birth

    calculate age based on date of birth know one new webiste:eval.in run php code

  5. 兼容性问题--HTML+CSS

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 } span.Apple-tab-span ...

  6. Python并发实践_02_通过yield实现协程

    python中实现并发的方式有很多种,通过多进程并发可以真正利用多核资源,而多线程并发则实现了进程内资源的共享,然而Python中由于GIL的存在,多线程是没有办法真正实现多核资源的. 对于计算密集型 ...

  7. JVM内存异常与常用内存参数设置总结

    Java Web程序由于引入大量第三方java类库,在启动时经常会遇到内存溢出(Memory Overflow)或者内存泄漏(Memory leak)问题,导致程序启动失败. 一.OOM异常分类: O ...

  8. 在html代码中js的script标签建议放在那里?

    今天编写了一个简单的js代码,F12有错误,然后发现是<script>放的位置有问题.之前在我的印象当中,说的是这个标签放在哪里都可以,然而...并不是这样的,例如我现在练习的这个代码,写 ...

  9. 获取多&lt;a/&gt;标签id值的点击事件

    <li> <div class="pic"> <c:if test="${userId != null }"> <a ...

  10. java 集合(一)ArrayList的继承树

    这是ArrayList的继承树,它继承了AbstractCollection抽象类,AbstractCollection类实现了Collection接口,Collection接口继承Iterable接 ...