前端的一个必学知识之一,Promise对象,是一种用来解决异步编程的方案
const promise = new Promise(function(resolve, reject) { // ... some code if (/* 异步操作成功 */){ resolve(value); } else { reject(error); } }); promise.then(function(value) { // success }, function(error) { // failure });//then的第二个参数为可选
举几个例子
function timeout(ms) { return new Promise((resolve, reject) => { //setTImeout的第三个参数,作为resolve函数的参数 setTimeout(resolve, ms, 'done'); }); } //调用函数,值100为setTImeout的时间,若异步状态为fulfilled则返回传递给resolve的值 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 /*原因: *promise在创建后便会立即执行,因此首先打印Promise *then返回返回异步回调函数,所以执行放在后面,因此Hi提前到第二个执行 */
resolved
时,则会调用then的回调函数getJSON("/posts.json").then(function(json) { return json.post; }).then(function(post) { // ... }); /* *上面的代码使用then方法,依次指定了两个回调函数。 *第一个回调函数完成以后,会将返回结果作为参数,传入第二个回调函数。 */
rejected
时,则会调用catch回调函数const promise = new Promise(function(resolve, reject) { throw new Error('test');//抛出一个错误,即状态转为reject }); promise.catch(function(error) { console.log(error);// Error: test });
const promise = new Promise(function(resolve, reject) { . . . }).then(function(){. . .})
.then(function(){. . .})
.catch(function(error){//处理前面promise对象以及回调的两个then函数的错误});
几个注意的点,
a.catch函数返回为promise对象,所以后面也可以跟进then函数,但前面的catch函数不会捕获后面的then函数的错误
const promise = new Promise(function(resolve, reject) { . . . })
.catch(function(error){//处理前面promise对象的错误})
.then(function(){...});//这里的then函数的错误不会被catch捕获,
因此一般将catch函数写在所以then函数的后面,方便捕获整个promise及then函数的错误
b.catch函数也可以抛出错误,但catch函数抛出的错误只能由后一个catch函数捕获
const promise = new Promise(function(resolve, reject) { . . . }) .catch(function(error){throw new Error('test');})//catch抛出一个错误 .catch(function(){...});//这里的catch函数可以捕获前面promise的错误以及catch的错误
7.promise.all()
用来将多个promise对象包装成一个promise对象文章来源:https://www.toymoban.com/news/detail-711250.html
const p = Promise.all([p1, p2, p3]);
文章来源地址https://www.toymoban.com/news/detail-711250.html
到了这里,关于ES6---Promise对象的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!