ECMAScript6(15)：Promise 对象

于 2024-06-12 13:00:30 发布
阅读量767 收藏 28
点赞数 17
文章标签： es6 前端 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_85124610/article/details/139623695
版权

} else {

reject(new Error(this.statusText));

}

}

});

return promise;

}

getJSON(‘info.json’).then(

json => id.innerHTML = “

” + json + “
”,

err => id.innerHTML = err

);

如果 resolve 的参数是一个promise：

var p1 = new Promise(function(resolve, reject){

//…

});

var p2 = new Promise(function(resolve, reject){

//…

resolve(p1);

});

上面代码中 p1 的状态传给了 p2，也就是p1运行完成(状态为 resolve 或 reject)后 p2 的回调函数会立刻开始执行：

var p1 = new Promise(function(resolve, reject){

setTimeout(() => reject(new Error(‘failed’)), 3000);

});

var p2 = new Promise(function(resolve, reject){

setTimeout(() => resolve(p1), 1000);

});

p2.then(result => console.log(result));

p2.catch(error => console.log(error));

p1 建立，进入 setTimeout 异步计时器。之后 p2 建立，进入 setTimeout 异步计时器。1s 后 p2 准备执行 resolve, 但是 resolve 的参数是 p1, 此时 p1 还是 Pending 状态，所以 p2 开始等待。又过了 2s, p1 的 reject 执行，变为 rejected 状态，随即 p2 也跟着变成 rejected 状态。

Promise 对象方法

  • then() 方法

then(resolve(value){},reject(value){})方法接受2个函数参数，resolve 在 Promise 状态变为 resolved 时调用，reject 在 Promise 状态变为 rejected 时调用。其中 reject 参数是可选的。和构造函数不同的是，then 方法的 reject 和 resolve 都使用 promise 传出的值作为其唯一的参数。

then() 方法返回一个新的 Promise 实例，注意，不是之前那个。因此可以用链式调用，不断添加”回调”函数。 then 的返回值成了下一个 then 中回调函数的参数：

var p = new Promise(function(resolve, reject){

resolve(“from new Promise”);

}).then(function (value){

console.log(value); //from new Promise 其次输出这个

return “from the first ‘then’”;

}).then(function(value){

console.log(value); //from the first ‘then’ 最后输出这个

return “from the second ‘then’”;

});

console.log§; //Promise{…} 先输出这个

注意，如果 promise 的状态是 resolved 则执行 then参数中的第一个回调函数；如果 promise 的状态是 rejected 则执行 then参数中的第二个回调函数。这个状态是不断传递下来的，这一点和之前的例子类似。

  • catch() 方法:

catch(reject) 方法是 then(null, reject) 的别名，在发生错误的时候执行其参数函数:

new Promise(function(resolve, reject){

resolve(“resolved”);

}).then(function(val){

console.log(val); //resolved

throw new Error(“man-made Error”);

}).catch(function(err){

console.log(err.message); //man-made Error

});

错误会从最初的请求沿着回调函数，一直被传递下来。这一点和传统的错误冒泡类似，无论哪里有错误都可以被捕获到：

new Promise(function(resolve, reject){

reject(new Error(“original Error”));

}).then(function(val){

console.log(val); //不执行

throw new Error(“man-made Error”);

}).catch(function(err){

console.log(err.message); //original Error

});

当然也可以在半路截住错误：

new Promise(function(resolve, reject){

reject(new Error(“original Error”));

}).then(function(val){

console.log(val); //不执行

throw new Error(“man-made Error”);

}, function(err){

console.log(Uncaught Error: ${err.message}); //Uncaught Error: original Error

}).catch(function(err){

console.log(err.message); //不执行

});

这里需要注意以下几点：

  1. reject 和 throw 一样可以抛出错误。

  2. 在 Promise 状态变为 resolved 或 rejected 之后抛出的错误会被忽略。

  3. 建议总是使用 catch() 方法，而不要在 then() 方法中定义 reject 函数。

  4. 如果一个 promise 既没有 catch方法，也没有可以捕获到错误的 then 方法，那么这个错误就消失了。它不会到 promise 外面来。

  5. try…catch… 只能捕获同步代码的错误，不能捕获异步代码的错误(这个是 ES5 就有的)。

  6. catch() 方法可以继续抛出错误，就像 try…catch 中的 catch 一样可以抛出错误。

这里需要说明的是第4条：错误不会到 Promise 外面是 ES6 规范的说法。具体理解(浏览器环境)：控制台依旧会报错，但是不影响 promise 语句之后续代码执行。此外，promise 语句内的异步语句(如事件，定时器等等)抛出的错误，不属于 promise 内部，发生错误会传播出去：

var p = new Promise(function(resolve, reject){

resolve(“ok”);

setTimeout(function(){throw new Error(“setTimeout error”)},0);

});

p.then(function(val){console.log(val);}); //ok

//Uncaught Error: setTimeout error

其次，就以上前两个注意事项举一例说明：

new Promise(function(resolve, reject){

resolve(“resolved”);

throw “original Error”; //被忽略

}).then(function(val){

console.log(val); //resolved

throw (new Error(“man-made Error”));

}).catch(function(err){

console.log(err.message); //man-made Error

});

catch 方法的返回值还是一个新的 promise 对象，可以继续调用 then 等其他方法:

new Promise(function(resolve, reject){

reject(new Error(“reject”));

}).catch(function(err){

console.log(“1st catch”); //被跳过

return “continue”;

}).then(function(val){

console.log(val); //continue

});

如果 catch之前没有错误，该 catch 会被跳过。这意味着，catch 不能捕获在其后面的语句中出现的错误：

new Promise(function(resolve, reject){

resolve(“resolved”);

}).catch(function(err){

console.log(“1st catch”); //被跳过

}).then(function(val){

console.log(val); //resolved

throw (new Error());

}).catch(function(err){

console.log(“2nd catch”); //2nd catch

});

  • finally() 方法

finally() 接受一个回调函数(无参数)为参数，和 try…catch…finally 中的 finally 类似，不论 promise 是什么状态，该回调函数都一定会运行。可以用它关闭文件，或者关闭服务器等:

server.listen(0).then(function(){

//do sth.

}).finally(server.stop);

finally() 内部实现如下：

Promise.prototype.finally = function(callback){

return this.then(

value => {Promise.resolve(callback()).then(() => value)},

error => {Promise.resolve(callback()).then(() => {throw error})}

);

};

  • done() 方法

done() 方法用在 promise 处理语句的末端，用来处理可能未捕获的错误，并抛向全局。如果其带有参数，可以等效为 done() 之前多了一个 then():

p.done(fun1, fun2);

//相当于

p.then(fun1,fun2).done();

done() 内部实现如下：

Promise.prototype.done = function(onResolve, onRejected){

this.then(onResolve, onRejected).catch(function(err){

setTimeout(() => {throw err}, 0);

});

};

Promise 静态方法

  • Promise.all()

将多个 promise 对象合并成一个新的 promise 实例。其接受一个装仅有 promise 对象的可遍历结构为参数，如果不是 promise 对象，系统会调用 Promise.resolve() 进行类型转换。

promise.all() 方法得到的新的 promise 对象状态由构成它的所有 promise 对象决定，具体分为2种情况:

  1. 当所有构成它的 promise 对象的状态都变成 resolved，这个新的对象状态才变为 resolved。此时构成它所有的 Promise 的返回值构成一个数组作为新的 promise 对象的回调函数参数；

  2. 当所有构成它的 promise 对象的状态有一个变成 rejected，这个新的对象状态就变为 rejected。此时第一个被 reject 的 Promise 的返回值作为新的 promise 对象的回调函数参数；

//伪代码, 由于没有正确的 url

var getJSON = function(url){

var promise = new Promise(function(resolve, reject){

var client = new XMLHttpRequest();

client.open(“GET”, url);

client.onreadystatechange = handler;

client.response = “json”;

client.setRequestHeader(“Accept”, “application/json”);

client.send();

function handler(){

if(client.readyState !== 4) return;

if(this.status === 200){

resolve(client.response);

} else {

reject(new Error(this.statusText));

}

}

});

return promise;

}

var pros = [‘url1’, ‘url2’, ‘url3’].map(url => getJSON(url));

Promise.all(pros).then(function(){

console.log(“all successful”);

}, function(){

console.log(“one rejected”); //one rejected, 由于没有正确的 url

});

  • Promise.race()

将多个 promise 对象合并成一个新的 promise 实例。其接受一个装仅有 promise 对象的可遍历结构为参数，如果不是 promise 对象，系统会调用 Promise.resolve() 进行类型转换。

和 promise.all() 不同的是 Promise.race() 方法得到的新的 promise 对象状态由构成它的 promise 对象中最先改变状态的那一个决定。

//伪代码, 由于没有正确的 url

var getJSON = function(url){

var promise = new Promise(function(resolve, reject){

var client = new XMLHttpRequest();

client.open(“GET”, url);

client.onreadystatechange = handler;

client.response = “json”;

client.setRequestHeader(“Accept”, “application/json”);

client.send();

function handler(){

if(client.readyState !== 4) return;

if(this.status === 200){

resolve(client.response);

} else {

reject(new Error(this.statusText));

}

}

});

return promise;

}

//如果5s不能获得数据就报错

var p = Promise.race([

getJSON(“url”),

最后

推荐一些系统学习的途径和方法。

路线图

每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。

HTML 和 CSS：

html5知识

css基础知识

2401_85124610
关注
  • 17
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js promise 遍历
阿豪
04-28 331
原文链接: js promise 遍历 上一篇: ...
数组的遍历你都会用了，那Promise版本的呢
前端大全
04-28 997
（点击上方公众号，可快速关注）作者：贾顺名 segmentfault.com/a/1190000014598785这里指的遍历方法包括：map、reduce、reduce...
Promise.all()统一处理未知数量的Promise实例(遍历生成)
weixin_55510188的博客
11-24 520
Promise.all()统一处理未知数量的Promise实例(遍历生成)
promise-遍历发起请求，前面的请求完成之后再去发起后续的请求
qq_37607502的博客
06-09 1448
需求场景：N组IP，遍历去调接口，一组IP调两个不同的接口，前一个接口成功之后，再去调后一个接口，否则，遍历结束。实现：首先想到的是for循环，但因为是一组请求两个异步的IP不太好处理，所以最后采用了递归+promise的方式。在发起请求的方法里面定义一个count变量 let count = 0 然后写一个递归方法 比如recursion（），形参传一个IP组，定义这个方法的时候需要用到发起请求的方法pollRequest（），pollRequest里面使用promise处理同步的请求，然后在递归的方法里
ECMAScript6：ECMAScript 6版本
02-14
7. **Promise**：Promise对象代表一个异步操作的最终完成或失败，解决了回调地狱的问题，使异步编程更加有序： ```javascript function asyncTask() { return new Promise((resolve, reject) => { // 异步操作 ...
node-promise:用于node.js的ECMAScript 6 Promise对象的Polyfill
05-30
Node v0.10 的 ES6 Promise 对象的 polyfill。 Node 0.11 及以上版本使用带有原生 Promise 对象的 V8 版本，不需要这个。 关于承诺： 用法 // In anticipation of native support in future Node versions if ...
ECMAScript-checker:检查浏览器是否支持 ECMAScript API
07-12
- **ES6（ECMAScript 2015）特性**：箭头函数、模板字符串、类与继承、解构赋值、let 和 const 关键字、Promise 对象、Map 和 Set 数据结构等。 - **ES7（ECMAScript 2016）特性**：展开运算符（...）用于数组和对象...
ECMAScript6-Sample:ECMAScript6-样本
05-25
**ECMAScript6-Sample: ECMAScript6-样本** ECMAScript6，通常被称为ES6，是JavaScript语言的一个重大更新版本，它引入了大量的新特性，显著提升了开发者的编程效率和代码质量。这个名为"ECMAScript6-Sample"的样本...
深度解析 ECMAScript 6
05-01
**ECMAScript 6（简称ES6）是JavaScript语言的一个重大升级版本，它引入了许多新的特性和语法糖，极大地提升了开发效率和代码的可读性。对于已经掌握基础JavaScript的开发者来说，理解并掌握ES6的新特性至关重要。**...
promise递归遍历文件夹
weixin_43292547的博客
02-09 223
var http = require("http") var server = http.createServer() var fs = require('fs') var _path = require('path'); function statp(path) { return new Promise(function (resolve, reject) { fs.stat(path, function (err, stats) { if (err) r
promise的使用
m0_51578916的博客
04-02 221
promise终结版，come on
Promise.all遍历接口
qq_41605119的博客
09-15 667
newsList:[188, 187, 190, 191, 192, 193, 194, 189, 195, 196, 198] mounted() { this.init(); this.action() }, //開始 action(){ let promiseArr = this.newsList.map((item) => { return this.getInfo(item) })
JavaScript -异步遍历-Promise.all()
Jim Suen
03-11 3405
记录比较低级但是却踩了的坑 原因是 forEach 是 同步遍历，最后用Promis.all()解决了异步遍历的情况。 Promise.all()介绍 Promise.all(iterable) 此方法在集合多个 promise 的返回结果时很有用 方法返回一个 Promise 实例，此实例在 iterable 参数内所有的 promise 都“完成（resolved）”或参数中不包含 prom...
js map遍历与promise一起使用会出现的问题，怎么解决？
qq_33235680的博客
02-07 1156
js map遍历与promise一起使用会出现的问题，怎么解决？
遍历数组生成promise队列并获得返回数据的方法
weixin_51972964的博客
10-13 223
记录一下最近项目写的函数，遍历请求参数的数组发起请求并获取返回数据。代码还有优化的地方，欢迎指出。
Promise的all方法
qq_37312180的博客
12-05 6024
转载自：https://www.jianshu.com/p/05795cc19fd51.应用场景  假设现在有一个需求，该需求依赖与两个网络请求，只有当两个网络请求成功后才能实现这个需求。我们可以通过all方法来实现，具体见下面的分析。2.本质  Promise中的all方法，是一个函数，并且传入的参数必须是可迭代对象，所谓的可迭代对象就是可以遍历的。3.使用方式针对上面的需求，用all方法实现的具体代码如下： 针对上述的代码，从all、then两个函数入手，解析如下：   首先，all 函数传入的参数
循环调用Promise，解决方案
qq_46544185的博客
03-13 1553
循环调用Promise，解决方案
Promise与遍历（循环，无穷多的then）遇到的问题及三个解决方案
weixin_34221773的博客
12-24 1452
今天碰到一个需要用Promise做无穷循环then的一个案例，顿时脑洞大开。事情是这样的，有这样的一群异步函数， var func1 = function(callback){ setTimeout(function(){ console.log('foo'); typeof(callback) !== '...
ECMAScript的Promise
最新发布
02-29
ECMAScript的Promise是一种用于处理异步操作的对象。它可以将异步操作封装成一个Promise对象，通过链式调用的方式来处理异步操作的结果。 Promise对象有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。当一个异步操作执行完成后，Promise对象的状态会从pending变为fulfilled或rejected。 Promise对象有两个重要的方法：then()和catch()。then()方法用于处理异步操作成功的情况，catch()方法用于处理异步操作失败的情况。通过链式调用这两个方法，可以实现对异步操作结果的处理和错误的捕获。 以下是Promise的一些特点： 1. Promise对象是不可变的，一旦创建就不能改变其状态。 2. Promise对象可以通过resolve()和reject()方法来改变其状态。 3. Promise对象可以通过then()方法注册回调函数，当Promise对象的状态改变时，会依次执行注册的回调函数。 4. Promise对象可以通过catch()方法捕获错误，并进行错误处理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值