赞
踩
Promise 是异步编程的一种解决方案,比传统的解决方案–回调函数和事件--更合理和更强大。它由社区最早提出和实现,ES6将其写进了语言标准,统一了语法,原生提供了Promise
所谓Promise ,简单说就是一个容器,里面保存着某个未来才回结束的事件(通常是一个异步操作)的结果。从语法上说,Promise是一个对象,从它可以获取异步操作的消息。
Promise 对象的状态不受外界影响
三种状态:
状态改变:
Promise对象的状态改变,只有两种可能:
这两种情况只要发生,状态就凝固了,不会再变了,这时就称为resolved(已定型)
ES6规定,Promise对象是一个构造函数,用来生成Promise实例
- const promist = new Promise(function(resolve,reject){
- if(/*异步操作成功*/){
- resolve(value);
- }else{
- reject(error);
- }
- })
resolve
函数的作用是,将Promise对象的状态从“未完成”变为“成功”(即从 pending
变为 resolved
),在异步操作成功时调用,并将异步操作的结果,作为参数传递出去; reject
函数的作用是,将Promise对象的状态从“未完成”变为“失败”(即从 pending
变为 rejected
),在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。
Promise 实例生成以后,可以用then 方法分别指定resolved状态和rejected状态的回调函数。
- promise.then(function(value){
- //success
- },function(error){
- //failure
- });
举个栗子:
- function timeout(ms){
- return new Promise((resolve,reject)=>{
- setTimeout(resolve,ms,'done');
- });
- }
- timeout(100).then((value)=>{
- console.log(value);
- });
- let promise = new Promise(function(resolve,reject){
- console.log('Promise');
- resolve();
- });
- promise.then(function(){
- console.log('resolved');
- });
- console.log('Hi!');
-
- //Promise
- //Hi!
- //resolved
- //异步加载图片
- function loadImageAsync(url){
- return new Promise(function(resolve,reject){
- const image = new Image();
- image.onload = function(){
- resolve(image);
- };
- image.onerror = function(){
- reject(new Error('error');
- };
- image.src = url;
- });
- }
这是一个用Promise对象实现的Ajax操作的栗子。
- const getJSON = function(url) {
- const promise = new Promise(function(resolve, reject){
- const handler = function() {
- if (this.readyState !== 4) {
- return;
- }
- if (this.status === 200) {
- resolve(this.response);
- } else {
- reject(new Error(this.statusText));
- }
- };
- const client = new XMLHttpRequest();
- client.open("GET", url);
- client.onreadystatechange = handler;
- client.responseType = "json";
- client.setRequestHeader("Accept", "application/json");
- client.send();
-
- });
-
- return promise;
- };
-
- getJSON("/posts.json").then(function(json) {
- console.log('Contents: ' + json);
- }, function(error) {
- console.error('出错了', error);
- });
再来一个最简单的Promise例子:生成一个0-2之间的随机数,如果小于1,则等待一段时间后返回成功,否则返回失败:
- function test(resolve, reject) {
- var timeOut = Math.random() * 2;
- log('set timeout to: ' + timeOut + ' seconds.');
- setTimeout(function () {
- if (timeOut < 1) {
- log('call resolve()...');
- resolve('200 OK');
- }
- else {
- log('call reject()...');
- reject('timeout in ' + timeOut + ' seconds.');
- }
- }, timeOut * 1000);
- }
这个test()
函数有两个参数,这两个参数都是函数,如果执行成功,我们将调用resolve('200 OK')
,如果执行失败,我们将调用reject('timeout in ' + timeOut + ' seconds.')
。可以看出,test()
函数只关心自身的逻辑,并不关心具体的resolve
和reject
将如何处理结果。
有了执行函数,我们就可以用一个Promise对象来执行它,并在将来某个时刻获得成功或失败的结果:
- var p1 = new Promise(test);
- var p2 = p1.then(function (result) {
- console.log('成功:' + result);
- });
- var p3 = p2.catch(function (reason) {
- console.log('失败:' + reason);
- });
变量p1
是一个Promise对象,它负责执行test
函数。由于test
函数在内部是异步执行的,当test
函数执行成功时,我们告诉Promise对象:
- // 如果成功,执行这个函数:
- p1.then(function (result) {
- console.log('成功:' + result);
- });
当test
函数执行失败时,我们告诉Promise对象:
- p2.catch(function (reason) {
- console.log('失败:' + reason);
- });
Promise对象可以串联起来,所以上述代码可以简化为:
- new Promise(test).then(function (result) {
- console.log('成功:' + result);
- }).catch(function (reason) {
- console.log('失败:' + reason);
- });
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。