博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
promise基础
阅读量:5337 次
发布时间:2019-06-15

本文共 7652 字,大约阅读时间需要 25 分钟。

Promise 是异步编程的一种解决方案,主要解决了异步回调嵌套写法的问题,还提供了统一的接口,使得控制异步操作更加容易。

function asyncFn(){    return new Promise(function(resove, reject){        /*setTimeout(function(){            resove('async function');        },100);*/        reject(new Error('error test')) //同一时间promise状态是单一的,要么是reject,要么是resove        resove('async function'); //不会执行    });}//Promise 新建后就会立即执行。var 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) {        var image = new Image();        image.onload = function() {            resolve(image);        };        image.onerror = function() {            reject(new Error('Could not load image at ' + url));        };        image.src = url;    });}//resolve函数的参数除了正常的值以外,还可能是另一个 Promise 实例,比如像下面这样var p1 = new Promise(function (resolve, reject) {    // ...});var p2 = new Promise(function (resolve, reject) {    // ...    resolve(p1);})//这时p1的状态就会传递给p2,也就是说,p1的状态决定了p2的状态。如果p1的状态是Pending,那么p2的回调函数就会等待p1的状态改变;如果p1的状态已经是Resolved或者Rejected,那么p2的回调函数将会立刻执行。//一般来说,调用resolve或reject以后,Promise 的使命就完成了,后继操作应该放到then方法里面,而不应该直接写在resolve或reject的后面。所以,最好在它们前面加上return语句new Promise((resolve, reject) => {    return resolve(1);// 后面的语句不会执行console.log(2);})//Promise 实例具有then方法,它的作用是为 Promise 实例添加状态改变时的回调函数,then方法返回的是一个新的Promise实例getJSON("/posts.json").then(function(json) {    return json.post;}).then(function(post) {        // ...});//上面的代码使用then方法,依次指定了两个回调函数。第一个回调函数完成以后,会将返回结果作为参数,传入第二个回调函数。第二个回调函数会等待第一个回调函数执行完根据返回新的promise对象状态执行相应的步骤asyncFn().then(function(value){    console.log(value);}).catch(function(error){ //一般说来,使用.catch来将resolve和reject处理分开来写是比较推荐的做法    console.log(error)})//.catch 等价 promise.then(undefined, onRejected)/*asyncFn().then(function(value){    console.log(value);}, function(error){    console.log(error)})*//*new Promise(function(resove, reject){    resove(123);})*/Promise.resolve(132).then(function(value){    console.log(value) //即使在调用 promise.then 注册回调函数的时候promise对象已经是确定的状态,Promise也会以异步的方式调用该回调函数})//Promise.resolve静态方法除了是快捷方式外,还可以把thenable对象转换为promise对象Promise.reject(new Error('error test2')).catch(function(error){    console.log(error);})//Promise.reject()方法的参数,会原封不动地作为reject的理由,变成后续方法的参数。这一点与Promise.resolve方法不一致。//Promise保证了每次调用都是以异步方式进行的//Promise#then 不仅仅是注册一个回调函数那么简单,它还会将回调函数的返回值进行变换,创建并返回一个promise对象。//实际上 Promise#catch 只是 promise.then(undefined, onRejected); 方法的一个别名而已//在IE8及以下版本基于ECMAScript 3实现的,在ECMAScript 3中保留字是不能作为对象的属性名使用的(点标记法(dot notation) 要求对象的属性必须是有效的标识符),因此不能将 catch 作为属性来使用,也就不能编写类似 promise.catch() 的代码,因此就出现了 identifier not found 这种语法错误了//而现在的浏览器都是基于ECMAScript 5的,而在ECMAScript 5中保留字都属于 IdentifierName ,也可以作为属性名使用了//但是使用 中括号标记法(bracket notation)的话,则可以将非合法标识符作为对象的属性名使用var promise = Promise.reject(new Error("message")); //reject方法的作用,等同于抛出错误promise["catch"](function (error) {    console.error(error);});  //或者我们不单纯的使用 catch ,而是使用 then 也是可以避免这个问题的//次调用then都会返回一个新创建的promise对象//Promise.all 接收一个 promise对象的数组作为参数,当这个数组里的所有promise对象全部变为resolve或reject状态的时候,它才会去调用 .then 方法, 调用then方法values状态值也是一个数组//传递给 Promise.all 的promise并不是一个个的顺序执行的,而是同时开始、并行执行的。// `delay`毫秒后执行resolvefunction timerPromisefy(delay) {    return new Promise(function (resolve) {        setTimeout(function () {            resolve(delay);        }, delay);    });}var startDate = Date.now();// 所有promise变为resolve后程序退出Promise.all([        timerPromisefy(1),        timerPromisefy(32),        timerPromisefy(64),        timerPromisefy(128)    ]).then(function (values) {        console.log(Date.now() - startDate + 'ms');        // 約128ms        console.log(values);    // [1,32,64,128]  状态值    });var p = Promise.all([p1, p2, p3]);//只有p1、p2、p3的状态都变成fulfilled,p的状态才会变成fulfilled,此时p1、p2、p3的返回值组成一个数组,传递给p的回调函数。//只要p1、p2、p3之中有一个被rejected,p的状态就变成rejected,此时第一个被reject的实例的返回值,会传递给p的回调函数。//如果作为参数的 Promise 实例,自己定义了catch方法,那么它一旦被rejected,并不会触发Promise.all()的catch方法。,因为自己定义了catch方法会返回新的promise对象,也会变成resolved//Promise.race 只要有一个promise对象进入 FulFilled 或者 Rejected 状态的话,就会继续进行后面的then或catch处理。var p = Promise.race([p1, p2, p3]);//只要p1、p2、p3之中有一个实例率先改变状态,p的状态就跟着改变。那个率先改变的 Promise 实例的返回值,就传递给p的回调函数//Promise.race方法的参数与Promise.all方法一样,如果不是 Promise 实例,就会先调用Promise.resolve方法,将参数转为 Promise 实例,再进一步处理。const p = Promise.race([    fetch('/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方法指定的回调函数。//需要注意的是,立即resolve的Promise对象,是在本轮“事件循环”(event loop)的结束时,而不是在下一轮“事件循环”的开始时。var winnerPromise = new Promise(function (resolve, reject) {    setTimeout(function () {        console.log('this is winner log');        //reject(new Error('this is winner error'));        resolve('this is winner');    }, 4);});var loserPromise = new Promise(function (resolve, reject) {    setTimeout(function () {        console.log('this is loser log');        reject(new Error('this is loser error'));       // resolve('this is loser');    }, 1000);});// 第一个promise变为resolve后程序停止Promise.race([winnerPromise, loserPromise]).then(function (value) {    console.log(value);    // => 'this is winner'}).catch(function(error){        console.log('error:'+error)    });// Promise.race 在第一个promise对象变为Fulfilled或Rejected之后,并不会取消其他promise对象的执行,但是其他promise对象执行后不会触发then或catch。// then or catch?// .catch 也可以理解为 promise.then(undefined, onRejected)//Promise.resolve(42).then(throwError, onRejected);  有异常发生onRejected不会被调用//Promise.resolve(42).then(throwError).catch(onRejected); 有异常发生时onRejected会被调用//.then 方法中的onRejected参数所指定的回调函数,实际上针对的是其promise对象或者之前的promise对象,而不是针对 .then 方法里面指定的第一个参数,即onFulfilled所指向的对象,这也是 then 和 catch 表现不同的原因。//Deferred 拥有 Promise//Deferred 具备对 Promise的状态进行操作的特权方法function Deferred() {    this.promise = new Promise(function (resolve, reject) {        this._resolve = resolve;        this._reject = reject;    }.bind(this));}Deferred.prototype.resolve = function (value) {    this._resolve.call(this.promise, value);};Deferred.prototype.reject = function (reason) {    this._reject.call(this.promise, reason);};//Promise一般都会在构造函数中编写主要处理逻辑,对 resolve、reject 方法的调用时机也基本是很确定的。new Promise(function (resolve, reject){    // 在这里进行promise对象的状态确定});//Deferred的话,并不需要将处理逻辑写成一大块代码,只需要先创建deferred对象,可以在任何时机对 resolve、reject 方法进行调用。var deferred = new Deferred();// 可以在随意的时机对 `resolve`、`reject` 方法进行调用//Promise对象的回调链,不管以then方法或catch方法结尾,要是最后一个方法抛出错误,都有可能无法捕捉到(因为Promise内部的错误不会冒泡到全局)。因此,我们可以提供一个done方法,总是处于回调链的尾端,保证抛出任何可能出现的错误。Promise.prototype.done = function (onFulfilled, onRejected) {    this.then(onFulfilled, onRejected)        .catch(function (reason) {            // 抛出一个全局错误            setTimeout(() => { throw reason }, 0);        });};//不管怎样,done都会捕捉到任何可能出现的错误,并向全局抛出。//finally方法用于指定不管Promise对象最后状态如何,都会执行的操作。它与done方法的最大区别,它接受一个普通的回调函数作为参数,该函数不管怎样都必须执行。Promise.prototype.finally = function (callback) {    let P = this.constructor;    return this.then(        value  => P.resolve(callback()).then(() => value),    reason => P.resolve(callback()).then(() => { throw reason })    );};//不管前面的Promise是fulfilled还是rejected,都会执行回调函数callback//经常遇到一种情况:不知道或者不想区分,函数f是同步函数还是异步操作,但是想用 Promise 来处理它。因为这样就可以不管f是否包含异步操作,都用then方法指定下一步流程,用catch方法处理f抛出的错误Promise.try(database.users.get({id: userId}))     .then(...).catch(...)
//目前只是提案

参考文档:

http://liubin.org/promises-book/

https://github.com/ruanyf/es6tutorial/blob/gh-pages/docs/promise.md

 

转载于:https://www.cnblogs.com/lmh2072005/p/7259940.html

你可能感兴趣的文章
麻省理工MaKey MaKey的电路板,触控无处不在,很强大。
查看>>
关于leap motion的原理和疑点
查看>>
Web前端,高性能优化
查看>>
【转载】Recommendations with Thompson Sampling (Part II)
查看>>
UML
查看>>
Javascript中decodeURI()与decodeURIComponent()区别
查看>>
redis设置开机启动
查看>>
Web GIS
查看>>
SpringBoot搭建简单的web项目及Echarts地图demo
查看>>
Spark随笔(三):straggler的产生原因
查看>>
android中TextView中文字体粗体的方法
查看>>
sealed(C# 参考)
查看>>
Golang Import使用入门
查看>>
postgresql 获取主键字段
查看>>
GNU libmicrohttpd 0.9.24 发布
查看>>
响应式网站
查看>>
Less环境搭建
查看>>
openstack trove mongodb配置项
查看>>
poj 3481 Double Queue 数据结构 STL
查看>>
线段树模板
查看>>