promise

Posted 2022-01-09 leftjs

https://cloud.tencent.com/developer/article/1361997

https://cloud.tencent.com/developer/article/1025903

Promise 是异步编程的一种方案，简单说就是一个容器，里面保存着某个未来才会结束的事件的

结果，Promise 是一个对象，从它，可以获取异步操作的消息。

Promise 对象有以下两个特点。

　　(1)对象的状态不受外界影响。Promise 对象代表一个异步操作，有是三种状态。pendding

　　　　(进行中)，fulfilled(已成功)和rejected(已失败)。

　　(2)一旦状态改变，就不会在变，任何时候都可以得到这个结果，Promise 对象的状态改变

　　只有两种可能： 从pending 变为fulfilled 和pending 变为rejected.如果改变已经发生 了，你在

　　对Promise对象添加回调函数，也会立即得到这个结果。

　　Promise 有一些缺点，首先无法取消Promise ，一旦新建它就会立即执行，中途无法取消。

　　如果不设置回调函数，Promise内部抛出的错误，不会立即反应到外部。当处于pending

　　状态时，无法得子目前进展到哪一个阶段。

用法

　　Promise 对象是一个构造函数，用来生成Promise实例。

　　构造函数接受一个函数作为参数，该函数的两个参数分别是resolve 和reject。

　　　　resolve 函数的作用是，将Promise 对象的状态从“未完成”变为“成功”，在异步操作成功

　　　　的时候调用，并将异步操作的结果，作为参数参数传递。

　　　　reject 函数的作用是，将Promise对象的状态从“未完成”变为“失败”，在异步操作失败

　　　　的时候调用，并将异步操作报出错误，作为参数传递出去。

Promise 实例陈仓以后，可以使用then 方法分别指定resolved状态和rejected状态回调函数。

　　　　例如：

  promise.then(function(value)
　　　　　　　　　　// success
　　　　　　　,function(error)
　　　　　　　　　　// failure
　　　　　　);

　　　　　　第一个回调函数是状态变为resolved时调用，

　　　　　　第二个回调函数是Promise对象的状态变为rejected时调用。

　　　　Promise对象的简单例子。

　　　　　　funcion timeout(ms)
　　　　　　　　return new Promise((resolve,reject)=>
　　　　　　　　　　setTimeout(resolve,ms,‘done‘);
　　　　　　　　);
　　　　　　
　　　　　　timeout(100).then((value)=>
　　　　　　　　console.log(value);
　　　　　　)

　　　　Promise 建立后就会立即执行

　　　　　　let promise = new Promise(function(resolve,reject)
　　　　　　　　console.log(‘Promise‘);
　　　　　　　　resolve();
　　　　　　);
　　　　　　promise.then(function() 
　　　　　　　　console.log(‘resolved.‘);
　　　　　　);
　　　　　　console.log(‘Hi‘);
　　　　　　　　// Promise
　　　　　　　　// Hi!
　　　　　　　　// resolved
　　Promise.prototype.then()

　　　　Promise 实例具有then 方法，也就是说，then方式定义在原型对象Promise.prototype上的。

　　　　then 方法返回的是一个新的Promise实例。 第一个参数是resolved状态的回调函数，

　　　　第二个参数是rejected状态的回调函数。

　　Promise.prototype.catch()

　　　　Promise.prototype.catch 方法是.then(null,rejection)的别名，用于指定发生错误时的回调函数。

　　　　写法一：

　　　　　　const promise = new Promise(function(resolve,reject)
　　　　　　　　try 
　　　　　　　　　　throw new Error(‘test‘);
　　　　　　　　catch(e)
　　　　　　　　　　　　reject(e);
　　　　　　　　　　
　　　　　　　　);
　　　　　　promise.catch(function(error)
　　　　　　　　console.log(error);
　　　　　　)
　　　　// 写法二
　　　　const promise = new Promise(function(resolve,reject)
　　　　　　reject(new Error(‘test‘));
　　　　);
　　　　promise.catch(function(error)
　　　　　　console.log(error);
　　　　)
　　Promise.all()

　　　　Promise.all 方法用于将多个Promise 实例，包装成一个新的Promise实例。

　　　　　　const p = Promise.all([p1,p2,p3]);

　　　　Promise.all 方法接受一个数组作为参数，p1,p2,p3都是Promise实例，如果不是，就会

　　　　　　调用下面讲到的Promise.resolve方法，将参数转为Promise实例。

　　Promise.race()

　　　　Promise.race 方法同样是将多个Promise实例，包装成一个新的Promise实例。

　　　　const p = Promise.race([p1,p2,p3]);

　　　　上面例子中，只要p1,p2,p3之中有一个实例率先改变状态，p的状态就跟着改变。

　　　　　　那么率先改变的Promise实例的返回值，就传给p的回调函数。

　　　　　　const p = Promise.race([
　　　　　　　　fatch(‘/resource-that-may-take-a-while‘),
　　　　　　　　new Promise(function(resolve,reject)
　　　　　　　　　　setTimeout(()=> reject(new Error(‘request timeout‘)),5000)
　　　　　　　　)
　　　　　　]);
　　　　　　p.then(response => console.log(response));
　　　　　　p.catch(error => console.log(error));

　　　　上面代码中，如果5秒内fetch 方法无法返回结果，变量p的状态就会变为rejected,从而

　　　　触发catch 方法指定的回调函数。

　　　　Promise.resolve()

　　　　将现有对象转为Promise对象。

　　　　　　Promise.resolve(‘foo‘) 等价于

　　　　　　new Promise(resolve =>resolve(‘foo‘))

　　　　　　Promise.resolve 方法的参数非常四种情况

　　　　　　　　1.参数一个Promise实例，将不做任何修改，原封不动地返回这个实例。

　　　　　　　　2.参数一个thenable 对象。

　　　　　　　　3.参数不是具有then方法的对象，或根本就不是对象。

　　　　　　　　4. 不带任何参数。

　　　　Promise.reject();

　　　　　　Promise.reject(reason) 方法会返回一个新的Promise实例，该实例的状态为rejected

　　　　done()

　　　　　　Promise对象的回调链，不管以then方法或是catch 方法结尾，要是最后一个方法抛出

　　　　　　错误，都有可能无法捕捉到。提供一个done方法，总是处于回调链的尾端，保证抛出

　　　　　　任何有可能出现的错误。

　　　　　　　　Promise.prototype.done = function (onFulfilled,onRejected)
　　　　　　　　　　this.then(onFulfilled,onRejected).catch(function(reason)
　　　　　　　　　　　　// 抛出一个全局错误
　　　　　　　　　　　　setTimeout(()=>throw reason,0)
　　　　　　　　　　);
　　　　　　　　

　　　　　　应用加载图片

　　　　　　　　const preloadImge = function(path)
　　　　　　　　　　return new Promise(function(resolve,reject)
　　　　　　　　　　　　const image = new Image();
　　　　　　　　　　　　image.onload = resolve;
　　　　　　　　　　　　image.onerror = regect;
　　　　　　　　　　　　image.src = path;
　　　　　　　　　　)
　　　　　　　　;