Promise 入门与使用
Tags: ECMAScript6
参考资料
Promise最初被提出是在 E语言中, 它是基于并列/并行处理设计的一种编程语言。
概念
ES6规定,Promise对象是一个构造函数,用来生成Promise实例。
规范:Promises -> Promises/A -> Promises/A+
状态
Promise实例生成以后处于pending状态,可以用then方法分别指定Resolved状态和Reject状态的回调函数。
ES6 Promise 使用
API
- Promise.prototype.constructor
- Promise.prototype.then
- Promise.prototype.catch
- Promise.all
- Promise.race
- resolve
- reject
基本用法
var promise = new Promise(function (resolve, reject) {
setTimeout(function () {
resolve("success");
}, 500);
//reject(error);
});
promise
.then(function (value) {
//success
console.log(value);
return "over"
}, function (value) {
//error
console.log(value);
});
console.log("hello");
//"hello"
//"success"
链式调用
then方法执行后会返回另一个promise,它的状态会传递给下一个then,如果没有显示的在回调函数中指定返回的promise对象,那么引擎会帮你生成一个promise并且执行其resolve方法,并且把你的回调函数传入其中。
function asynchData (msg) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
resolve(msg);
}, 100);
});
}
asynchData("step1")
.then(function (value) {
//success
console.log(value);
return asynchData("step2")
})
.then(function (value) {
console.log(value);
})
//"step1"
//"step2"
asynchData("step2")
.then(function (value) {
//success
console.log(value);
return "success";
})
.then(function (value) {
console.log(value);
})
//"step1"
//"success"
本身then、catch方法默认的返回是一个新的Promise对象
function asynchData (msg) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
resolve(msg);
}, 100);
});
}
var stepOne = asynchData("stepone");
var stepTwo = stepOne.then(function (val) {
console.log(val);//stepone
});
var stepThree = stepTwo.then(function (val) {
console.log(val);//undefined
});
var stepThree2 = stepTwo.then(function (val) {
console.log(val);//undefined
});
var catchStep = stepThree.catch(function (err) {
console.log(err);
});
console.log(stepTwo instanceof Promise);//true
console.log(stepThree instanceof Promise);//true
console.log(stepThree2 instanceof Promise);//true
console.log(catchStep instanceof Promise);//true
error处理:catch
其实catch是then(null, function(){...})的别名,实质上是相等的。注意一点,没有使用catch方法指定错误处理的回调函数,Promise对象抛出的错误不会传递到外层代码,即不会有任何反应。所以为了不给自己找麻烦尽量编写catch方法
function asynchData (msg) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
//Promise指定在下一轮“事件循环”再抛出错误,结果由于没有指定catch语句,就冒泡到最外层,成了未捕获的错误。
throw new Error('async error!');
}, 1000);
throw new Error('error!');
});
}
asynchData("step1")
.then(function (value) {
//success
console.log(value);
})
.catch(function (err) {
console.log(err);
//如果Promise状态已经变成resolved,再抛出错误是无效的。
//Promise对象的错误具有“冒泡”性质,会一直向后传递,直到被捕获为止。也就是说,错误总是会被下一个catch语句捕获。
});
//"Error: error!"
asynchData("step2")
.then(function (value) {
//success
console.log(value);
})
.then(null, function (err) {
console.log(err);
});
//"Error: error!"
这里有一个要注意的点:如果你一旦指定catch方法或者你在then方法里指定了reject方法,那么你指定的catch方法会捕获住异常,并且异常不再继续传递下去,无论你在catch里返回什么!除非catch方法里还有报错、或者返回一个reject状态的promise
function asynchData (msg) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
reject(msg);
}, 100);
});
}
asynchData("I am error")
.then(function () {
//resolve callback
}, function (err) {
//reject callback
console.log(err + "from reject callback")
})
.catch(function (err) {
//err callback
console.log(err + " from catch callback");//catch callback无法执行,因为上一个then已经指定了reject处理方法
})
// I am errorfrom reject callback
asynchData("I am error too")
.then(function () {
//resolve callback
}, function (err) {
//reject callback
console.log(err + "from reject callback");
throw new Error("I from reject callback error");
})
.catch(function (err) {
//err callback
console.log(err + " from catch callback");
//catch callback会被执行,并且接收的错误是从上一个reject方法返回的
//上一个then方法抛出异常,then返回一个reject状态的promise,并且被下一个catch方法捕获住
})
//I am error toofrom reject callback
//Error: I from reject callback error from catch callback
同步or异步
试想下如果让你写一个api,其中有一个参数是callback形式传入,那么方法体内该是以何种形式执行callback呢?是同步呢还是异步执行呢?为了保持API的统一,我们定义callback在方法里都是以异步方式执行的。
关于这个问题,在 Effective JavaScript 的 第67项 不要对异步回调函数进行同步调用 中也有详细介绍。
绝对不能对异步回调函数(即使在数据已经就绪)进行同步调用。
如果对异步回调函数进行同步调用的话,处理顺序可能会与预期不符,可能带来意料之外的后果。
对异步回调函数进行同步调用,还可能导致栈溢出或异常处理错乱等问题。
如果想在将来某时刻调用异步回调函数的话,可以使用 setTimeout 等异步API。
Effective JavaScript
— David Herman
了避免同时使用同步、异步调用可能引起的混乱问题,Promise在规范上规定 Promise只能使用异步调用方式。
var promise = new Promise(function (resolve) {
console.log("inner promise"); // 1
resolve(42);
});
promise.then(function (value) {
console.log(value); // 3
});
console.log("outer promise"); // 2
// inner promise
// outer promise
// 42
Promise保证了每次调用都是以异步方式进行的,所以我们在实际编码中不需要调用 setTimeout 来自己实现异步调用。
多个promise:all
function asynchData (msg, toReject) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
if (toReject) {
reject(msg + " failure!!!");
} else {
resolve(msg);
}
}, 100);
});
}
Promise.all([asynchData("step1"), asynchData("step2"), asynchData("step2")]).then(function (value) {
console.log(value);//["step1", "step2", "step2"]
});
Promise.all([asynchData("step1", true), asynchData("step2", true), asynchData("step2")]).then(
function (value) {
console.log(value);//["step1", "step2", "step2"]
},
function (value) {
console.log(value);//step1 failure!!!
//之中有一个被rejected,p的状态就变成rejected,此时第一个被reject的实例的返回值
}
);
处理reject
function asynchData (msg, toReject) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
if (toReject) {
reject(msg + " failure!!!");
} else {
resolve(msg);
}
}, 100);
});
}
//之中有一个实例率先改变状态,p的状态就跟着改变。那个率先改变的Promise实例的返回值,就传递给p的回调函数
Promise.race([asynchData("step1"), asynchData("step2"), asynchData("step2")]).then(function (value) {
console.log(value);//"step1"
});
一些例子
我们定义A、B、C三个方法,并且都是异步的。我们希望A成功后执行B,失败执行C,B失败后执行C。想想改如何实现呢?
function asynchData (msg, toFail) {
return new Promise(function (resolve, reject) {
console.log(msg);
if (toFail) {
reject();
} else {
resolve();
}
});
}
asynchData("A")
.then(function () {
return asynchData("B");
})
.then(null, function () {
asynchData("C")
});
这样写是不是就达到目的了?
Deferred & Promise 关系
我们经常见到jquery.Deferred,但是和Promise有什么关系呢?Deferred和Promise不同,它没有共通的规范,每个Library都是根据自己的喜好来实现的。
- Deferred 拥有 Promise
- Deferred 具备对 Promise的状态进行操作的特权方法
相信我们使用promise后会给我们带来耳目一新的感觉,减少我们的callback hell的出现频率,大大的增强我们代码的可维护性!
Promise 入门与使用的更多相关文章
- Promise入门到精通(初级篇)-附代码详细讲解
Promise入门到精通(初级篇)-附代码详细讲解 Promise,中文翻译为承诺,约定,契约,从字面意思来看,这应该是类似某种协议,规定了什么事件发生的条件和触发方法. Pr ...
- promise入门基本使用
Promise入门详解和基本用法 异步调用 异步 JavaScript的执行环境是单线程. 所谓单线程,是指JS引擎中负责解释和执行JavaScript代码的线程只有一个,也就是一次只能完成一项任 ...
- 一.Promise入门准备阶段
一.Promise入门准备阶段 1.区别实例对象呵函数对象 2.两种类型的回调函数(同步与异步) 2.1 同步回调 2.2 异步回调 3.JS的error处理 3.1 错误的类型 3.2 错误处理与错 ...
- Javascript Promise入门
是什么? https://www.promisejs.org/ What is a promise? The core idea behind promises is that a promise r ...
- promise入门demo
<!DOCTYPE html> <html> <head> <title></title> </head> <body&g ...
- javaScript Promise 入门
Promise是JavaScript的异步编程模式,为繁重的异步回调带来了福音. 一直以来,JavaScript处理异步都是以callback的方式,假设需要进行一个异步队列,执行起来如下: anim ...
- Promise入门详解
异步调用 异步 JavaScript的执行环境是单线程. 所谓单线程,是指JS引擎中负责解释和执行JavaScript代码的线程只有一个,也就是一次只能完成一项任务,这个任务执行完后才能执行下一个,它 ...
- ES6中Promise的入门(结合例子)
一.Promise的前言 解决回调地狱 //以往回调方式 函数1(function(){ //代码执行...(ajax1) 函数2(function(){ //代码执行...(ajax2) 函数3(f ...
- 细说Promise
一.前言 JavaScript是单线程的,固,一次只能执行一个任务,当有一个任务耗时很长时,后面的任务就必须等待.那么,有什么办法,可以解决这类问题呢?(抛开WebWorker不谈),那就是让代码异步 ...
随机推荐
- hive分区(partition)简介
一.背景 1.在Hive Select查询中一般会扫描整个表内容,会消耗很多时间做没必要的工作.有时候只需要扫描表中关心的一部分数据,因此建表时引入了partition概念. 2.分区表指的是在创建表 ...
- 在Ubuntu 14.04 64bit中永久添加DNS的方法
DNS信息是由/etc/resolv.conf提供的,它是每次开机时,由/sbin/resolvconf生成的/etc/resolv.conf是/run/resolvconf/resolv.conf的 ...
- matlab-2
function varargout = gmm(X, K_or_centroids) % ====================================================== ...
- 用C语言解决迷宫问题
#include <stdio.h> #include <stdlib.h> #define ROW 10 #define COL 10 /*迷宫中位置信息*/ typedef ...
- java 方法重写原则
方法重写应遵循“三同一小一大”原则: “三同”:即方法名相同,形参列表相同,返回值类型相同: “一小”:子类方法声明抛出的异常比父类方法声明抛出的异常更小或者相等: “一大”:子类方法的访问修饰符应比 ...
- Effective Java - [3. 对象通用方法]
Item 10. 若覆盖equals方法,需要遵守规则
- linux uart驱动——uart platfrom 注册(三)
一:注册platform device 注册一个platfrom device一般需要初始化两个内容,设备占用的资源resource和设备私有数据dev.platfrom_data.设备的resour ...
- erlang程序优化点的总结
注意,这里只是给出一个总结,具体性能需要根据实际环境和需要来确定 霸爷指出,新的erlang虚拟机有很多调优启动参数,今后现在这个方面深挖一下. 1. 进程标志设置: 消息和binary内存:erla ...
- 关于打开sdk下载不了的最优秀解决方式
使用网站: mirrors.neusoft.edu.cn 东北大学就可以
- UIWebView使用中的内存相关问题
本文转载至: http://blog.csdn.net/musou_ldns/article/details/7675589 applicationios5webkit测试cacheios 在iO ...