标签：ike url rom cep which 函数的参数 并且 不能 返回值
事件模型是在事件发生之前绑定监听事件，在事件发生时监听到事件的发生。
如果事件发生之后进行绑定监听事件，则监听不到事件的发生。
ES6提供的Promise实现了单个值的任意时刻的监听，Rxjs的Observable提供了对一系列值的任意时刻的监听。
所谓的任意时刻，指的是在值发生改变之后进行监听也能监听到变化。
一、何为Promise
所谓promise，就是一个对象，用来传递异步操作的信息。它代表了某个未来才会知道结果的事件（通常是一个异步操作）。
Promise有自己的生命周期，在定义时，它是unsettled（未处理的），一旦异步操作执行结束，Promise就会变成settled（已处理的）。
Promise还有3个状态，保存在内部属性[[PromiseState]]中，分别为‘pending’，‘fulfilled’，‘rejected’。内部属性不能被外部改变，只能自身改变。
当Promise是unsettled时，它一定处于pending状态，当Promise是settled时，它一定是fulfilled或者rejected状态。
这里有一个问题是，当处于pending状态时，无法得知程序进行到哪一个阶段，是刚刚开始还是快要结束。
二、创建基本的Promise
ES6规定，Promise对象是一个构造函数，可以原来生成Promise实例。
/** * Creates a new Promise. * @param executor A callback used to initialize the promise. This callback is passed two arguments: * a resolve callback used to resolve the promise with a value or the result of another promise, * and a reject callback used to reject the promise with a provided reason or error. */ new <T>(executor: (resolve: (value?: T | PromiseLike<T>) => void, reject: (reason?: any) => void) => void): Promise<T>;
可以看到。构造函数接受一个执行器函数，这个执行器函数有2个参数。
一个叫作resolve，调用这个resolve方法可以把Promise从pending状态变成fulfilled状态。
一个叫作reject，调用这个reject方法可以把Promise从pending状态变成reject状态。
1 new Promise( 2 (resolve, reject) => { 3 const xhr = new XMLHttpRequest(); 4 xhr.open(‘get‘, url, true); 5 xhr.responseType = ‘json‘; 6 xhr.setRequestHeader(‘Accept‘, ‘application/json‘); 7 xhr.onload = function(ev: ProgressEvent) { 8 resolve(xhr.response);// 把Promise的状态从pending变成fulfilled 9 }; 10 xhr.onerror = function(ev: ProgressEvent) { 11 reject(‘发生了错误‘);// 把Promise的状态从pending变成reject 12 }; 13 xhr.send(null); 14 } 15 );
.需要说明的是，Promise在实例化的时候就会执行执行器中的逻辑
1 constructor() { 2 3 const user = this.ajax(‘http://localhost:3002/users‘); 4 } 5 6 ajax(url) { 7 return new Promise( 8 (resolve, reject) => { 9 const xhr = new XMLHttpRequest(); 10 xhr.open(‘get‘, url, true); 11 xhr.responseType = ‘json‘; 12 xhr.setRequestHeader(‘Accept‘, ‘application/json‘); 13 xhr.onload = function(ev: ProgressEvent) { 14 console.log(‘success‘); 15 resolve(xhr.response); 16 }; 17 xhr.onerror = function(ev: ProgressEvent) { 18 console.log(‘error‘); 19 reject(‘发生了错误‘); 20 }; 21 xhr.send(null); 22 } 23 ); 24 }
可以看出，Promise本身和异步操作没有关系，Promise只是保存状态（状态带有数据），外部不能获取这种状态，但是可以定义处于某种状态时要触发的操作（使用then和catch）。
还有一点需要注意，resolve函数的参数可以是普通的参数，也可以是一个PromiseLike的对象。
所谓的PromiseLike，就是有在该对象上有then方法，当然，Promoise本身就是PromiseLike，这里只讨论resolve的参数是Promise的情况。
resolve携带参数可以理解为Promise在状态上附加的数据，resolve（value）理解为Promise状态为fulfilled，并且这个状态有数据value。
但是如果是resolve（一个新的Promise），则理解不同，可以理解为当前Promise能不能变成fulfilled状态依赖这个新的Promise的状态，
1 const p1 = new Promise( 2 (resolve, reject) => { 3 console.log(`实例化p1的时间：${new Date()}`); 4 setTimeout( 5 () => { 6 console.log(`3秒后reject P1：${new Date()}`); 7 reject(‘p1发生了Error‘); 8 }, 3000 9 ); 10 } 11 ); 12 const p2 = new Promise( 13 (resolve, reject) => { 14 console.log(`实例化p2的时间：${new Date()}`); 15 setTimeout( 16 () => { 17 console.log(`1秒后resolve P2：${new Date()}`); 18 resolve(p1); 19 }, 1000 20 ); 21 } 22 ); 23 p2.then(r => console.log(`p2的状态变成fulfilled的时间：${new Date()}, 接受到的信息： ${r}`)) 24 .catch(r => console.log(`p2的状态变成reject的时间：${new Date()}， error的信息: ${r}`));
运行结果
可以看到
实际的业务中，P1和P2的实例化相互不影响的情况比较少见，多数情况是P1的实例化依赖与p2。比如先通信取得人名，再通过人名得到该人名对应的家庭成员。
P2中通过ajax取得人名，在取得成功（resolve）之后，通过人名取得家庭成员（p1）中
1 const p2 = new Promise( 2 (resolve, reject) => { 3 console.log(`p2的实例化的时间：${new Date()}`) 4 const xhr = new XMLHttpRequest(); 5 xhr.open(‘get‘, ‘http://localhost:3002/users?id=1‘, true); 6 xhr.responseType = ‘json‘; 7 xhr.setRequestHeader(‘Accept‘, ‘application/json‘); 8 9 xhr.addEventListener(‘load‘, function(ev: ProgressEvent) { // p2通过id成功取得name 10 console.log(`p2的resolve的时间：${new Date()}`) 11 resolve(new Promise( 12 (res, rej) => { 13 console.log(`p1的实例化的时间：${new Date()}`) 14 const xhr1 = new XMLHttpRequest(); 15 // 使用P2取得的name搜索取得该name对应的家庭成员 16 xhr1.open(‘get‘, `http://localhost:3002/family?name=${xhr.response[0].name}`, true); 17 xhr1.responseType = ‘json‘; 18 xhr1.setRequestHeader(‘Accept‘, ‘application/json‘); 19 xhr1.onload = function() { 20 // 把家庭成员发送出去 21 console.log(`p1的resolve的时间：${new Date()}`) 22 resolve(xhr1.response[0].families) 23 } 24 xhr1.send(null); 25 } 26 )); 27 }); 28 xhr.send(null); 29 } 30 ); 31 p2.then(r => console.log(`p2的状态变成fulfilled的时间：${new Date()}, 接受到的信息： ${r}`)) 32 .catch(r => console.log(`p2的状态变成reject的时间：${new Date()}， error的信息: ${r}`));
运行结果
可以看到
二 、创建立即fulfilled的Promise
使用原始的Promise构造函数
1 const p = new Promise( 2 (resolve, reject) => { 3 resolve(‘foo‘); 4 } 5 );
ES6对其做了简化，可以使用Promise.resolve(‘foo‘)
三、创建立即reject的Promise
使用原始的Promise构造函数
1 const p = new Promise( 2 (resolve, reject) => { 3 reject(‘error‘); 4 } 5 );
ES6对其做了简化，可以使用Promise.reject(‘foo‘)
四、Promise实例的then方法
4.1 then方法的说明
Promise实例具有then方法。也就是说，then方法是定义在原型对象Promise.prorotype上的。它的作用是为Promise实例添加状态改变时的回调函数。
/** * Attaches callbacks for the resolution and/or rejection of the Promise. * @param onfulfilled The callback to execute when the Promise is resolved. * @param onrejected The callback to execute when the Promise is rejected. * @returns A Promise for the completion of which ever callback is executed. */ then<TResult1 = T, TResult2 = never>(onfulfilled?: ((value: T) => TResult1 | PromiseLike<TResult1>) | undefined | null, onrejected?: ((reason: any) => TResult2 | PromiseLike<TResult2>) | undefined | null): Promise<TResult1 | TResult2>;
可以看到，then方法有2个参数，
ajax(url) { return new Promise( function (resolve, reject) { const xhr = new XMLHttpRequest(); xhr.open(‘get‘, url, true); xhr.responseType = ‘json‘; xhr.setRequestHeader(‘Accept‘, ‘application/json‘); xhr.addEventListener(‘load‘, function(ev: ProgressEvent) { resolve(xhr.response); }); xhr.addEventListener(‘error‘, function(ev: ProgressEvent) { reject(‘发生了错误‘); }); xhr.send(null); } ); }
上面的代码是对ajax的封装，
1 const ajax = this.ajax(‘http://localhost:3002/users?id=1‘); 2 ajax.then( 3 (response) => { 4 return this.ajax(`http://localhost:3002/family?name=${response[0].name}`); 5 } 6 ).then( 7 (response) => { 8 console.log(response) 9 } 10 )
上面的代码中在then方法中return 了一个新的Promise，其实这个例子和之前说明Promise的resolve方法可以把Promise实例作为参数是一样的。
4.2 then方法添加和Promise处于什么状态没有关系
我们知道，Promise有3个状态，分别是pending，fulfilled和resolve状态。
状态由pending变成fulfilled实际上说明Promise实例附带的操作已经完成了。我们知道，对于回调函数，在事件完成之后添加回调函数是监听不到事件的，但是Promise这种方式在操作完成之后也可以监听到。
实际上，操作只是会触发Promise实例的状态的改变，而Promise实例的then方法是监听状态的，不是监听操作的，可以理解为
1 const promise = new Promise( 2 (resolve, reject) => { 3 console.log(`Promise实例初始化的时间：${new Date()}`); 4 setTimeout( 5 () => { 6 console.log(`Promise实例resolved的时间：${new Date()}`); 7 resolve(‘Promise实例resolved‘) 8 }, 9 3000 10 ); 11 } 12 ); 13 console.log(`给Promise实例添加第一个then方法的时间：${new Date()}`); 14 promise.then( 15 (v) => { 16 console.log(`第一个then方法的回调函数执行的时间：${new Date()}`); 17 console.log(`第一个then方法:${v}`); 18 } 19 ); 20 setTimeout( 21 () => { 22 console.log(`给Promise实例添加第二个then方法的时间：${new Date()}`); 23 promise.then( 24 (v) => { 25 console.log(`第二个then方法的回调函数执行的时间：${new Date()}`); 26 console.log(`第二个then方法:${v}`); 27 } 28 ); 29 }, 30 2000 31 ); 32 setTimeout( 33 () => { 34 console.log(`给Promise实例添加第三个then方法的时间：${new Date()}`); 35 promise.then( 36 (v) => { 37 console.log(`第三个then方法的回调函数执行的时间：${new Date()}`); 38 console.log(`第三个then方法:${v}`); 39 } 40 ); 41 }, 42 4000 43 );
上面的代码中Promise实例在3秒后resolve，给它添加了3个then方法（then1，then2，then3），分别是在执行Promise实例初始化的同时（在其之后），之后2秒，之后4秒，
我们来看一下运行结果
可以看到
五、Promise实例的catch方法
/** * Attaches a callback for only the rejection of the Promise. * @param onrejected The callback to execute when the Promise is rejected. * @returns A Promise for the completion of the callback. */ catch<TResult = never>(onrejected?: ((reason: any) => TResult | PromiseLike<TResult>) | undefined | null): Promise<T | TResult>;
Promise.prototype.catch方法是then(null, onrejected)的简化形式。
Promise的错误具有冒泡性质，会一直向后面传递，直到被捕获为止。
如果没有给Promise对象指定异常捕获的方法（then方法的onrejected或者catch方法），Promise对象抛出的错误不会传递到外层代码，不会有任何反应。
catch方法也可以返回PromiseLike对象，与then方法类似。
六、Promise对象的all方法
Promise.all方法原来把多个Promise实例包装成一个Promise实例。
let p = Promise.all([p1, p2, p3]);
/** * Creates a Promise that is resolved with an array of results when all of the provided Promises * resolve, or rejected when any Promise is rejected. * @param values An array of Promises. * @returns A new Promise. */ all<T1, T2, T3>(values: [T1 | PromiseLike<T1>, T2 | PromiseLike<T2>, T3 | PromiseLike<T3>]): Promise<[T1, T2, T3]>;
可以看到，ts中的Promise.all方法的参数是一个数组，数组中的元素可以是普通值，也可以是一个PromiseLike对象，当是普通·值时，会被自动的调用Promise.resolve()方法转换我Promise
p的状态由p1，p2，p3的状态决定。
实际应用中等待多个异步通信都完成是会用到Promise.all
七、Promise对象的race方法
/** * Creates a Promise that is resolved or rejected when any of the provided Promises are resolved * or rejected. * @param values An array of Promises. * @returns A new Promise. */ race<T1, T2, T3>(values: [T1 | PromiseLike<T1>, T2 | PromiseLike<T2>, T3 | PromiseLike<T3>]): Promise<T1 | T2 | T3>;
Promise.race方法同样是将多个Promise实例包装成一个新的Promise实例。
let p = Promise.race([p1, p2, p3]);
上面的代码中，只要p1，p2，p3中有一个实例的状态首先发生改变，p的状态就会跟着改变，首先发生改变的实例的返回值，就会被传递给p的回调函数。
下面的例子是设置通信的超时。
1 Promise.race([ 2 this.ajax(‘http://localhost:3002/users?id=1‘), 3 new Promise( 4 (resolve, reject) => { 5 setTimeout( 6 () => reject(‘超过3000ms了‘), 7 3000 8 ); 9 } 10 ) 11 ]).then( 12 (v) => console.log(v) 13 ).catch( 14 (err) => console.log(err) 15 )
八、一些有用的附加方法
/** * Attaches a callback that is invoked when the Promise is settled (fulfilled or rejected). The * resolved value cannot be modified from the callback. * @param onfinally The callback to execute when the Promise is settled (fulfilled or rejected). * @returns A Promise for the completion of the callback. */ finally(onfinally?: (() => void) | undefined | null): Promise<T>
finally方法支持2类参数，一个回调函数或者null，
finally可以理解为无论Promise是resolve还是reject都会执行的操作。
具体应用有
九、常见应用
参考： 《ES6 标准入门》《深入理解ES6》
2019-02-09
标签：ike url rom cep which 函数的参数 并且 不能 返回值
原文地址：https://www.cnblogs.com/wangtingnoblog/p/js_Promise.html
