浅谈ES6 Promise对象

最新推荐文章于 2024-01-13 15:06:54 发布
最新推荐文章于 2024-01-13 15:06:54 发布
阅读量699 收藏
点赞数 1
分类专栏： ES6 文章标签： ES6 Promise对象
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhouziyu2011/article/details/70187026
版权

Promise是一个对象，用来传递异步操作的消息。它代表了某个未来才会知道结果的事件（通常是一个异步操作），并且这个事件提供统一的 API，可供进一步处理。

有了 Promise 对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise 对象提供统一的接口，使得控制异步操作更加容易。

Promise是一个构造函数，Promise new出来的对象有reject、resolve、all、race等方法，原型Promise.prototype上有then、catch等方法。

 

1、Promise构造函数

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

如果异步操作成功，则用 resolve 方法将 Promise 对象的状态，从「未完成」变为「成功」（即从 pending 变为 resolved）；

如果异步操作失败，则用 reject 方法将 Promise 对象的状态，从「未完成」变为「失败」（即从 pending 变为 rejected）。

var promise = new Promise(function(resolve, reject) {
 	if (/* 异步操作成功 */)
 		resolve(value);
	else
 		reject(error);
});

 

2、Promise链式操作

从表面上看，Promise能够简化层层回调的写法，而实质上，Promise的精髓是“状态”，用维护状态、传递状态的方式来使得回调函数能够及时调用，它比传递callback函数要简单、灵活的多。

function async1(){
    var promise = new Promise(function(resolve, reject){
        //异步操作
        setTimeout(function(){
            console.log('First Finished!');
            resolve('First data!');
        }, 1000);
    });
    return promise;
}
function async2(){
    var promise = new Promise(function(resolve, reject){
       	//异步操作
        setTimeout(function(){
            console.log('Second Finished!');
            resolve('Second data!');
        }, 2000);
    });
    return promise;            
}
function async3(){
    var promise = new Promise(function(resolve, reject){
       	//异步操作
       	setTimeout(function(){
            console.log('Third Finished!');
            resolve('Third data!');
        }, 2000);
    });
    return promise;            
}
async1()
.then(function(data){
    console.log(data);
    return async2();
})
.then(function(data){
    console.log(data);
    return async3();
})
.then(function(data){
    console.log(data);
});

运行结果：

First Finished!

First data!

Second Finished!

Second data!

Third Finished!

Third data!

 

在then方法中，也可以直接return数据而不是Promise对象，在后面的then中就可以接收到数据了。

function async1(){
    var promise = new Promise(function(resolve, reject){
       	//异步操作
       	setTimeout(function(){
            console.log('First Finished!');
            resolve('First data!');
        }, 1000);
    });
    return promise;            
}
function async2(){
    var promise = new Promise(function(resolve, reject){
        //异步操作
        setTimeout(function(){
            console.log('Second Finished!');
            resolve('Second data!');
        }, 2000);
    });
    return promise;            
}
function async3(){
    var promise = new Promise(function(resolve, reject){
       	//异步操作
       	setTimeout(function(){
            console.log('Third Finished!');
            resolve('Third data!');
        }, 2000);
    });
    return promise;            
}
async1()
.then(function(data){
    console.log(data);
    return async2();
})
.then(function(data){
    console.log(data);
    return 'Direct data!';  //直接返回数据
})
.then(function(data){
    console.log(data);
});

运行结果：

First Finished!

First data!

Second Finished!

Second data!

Direct data!

 

3、resolve与reject方法

function createNumber(){
    var promise = new Promise(function(resolve, reject){
       	//异步操作
       	setTimeout(function(){
            var num = Math.ceil(Math.random()*10);
            if (num <= 5)
                resolve(num);
            else
                reject('Too big!');
        }, 2000);
    });
    return promise;            
}
createNumber()
.then(
    function(data){
       	console.log('resolve');
       	console.log(data);
    },
    function(reason, data){
        console.log('reject');
       	console.log(reason);
    }
);

运行结果1：

resolve

1

运行结果2：

reject

Too big!

 

4、catch()方法

Promise对象除了then方法，还有一个catch方法，其实它和then的第二个参数一样，用来指定reject的回调，即then(function(data), function(err))等价于then(function(data)).catch(function(err))。

function createNumber(){
    var promise = new Promise(function(resolve, reject){
        //异步操作
        setTimeout(function(){
            var num = Math.ceil(Math.random()*10);
            if (num <= 5)
                resolve(num);
            else
               	reject('Too big!');
        }, 2000);
    });
    return promise;            
}
createNumber()
.then(function(data){
    console.log('resolve');
    console.log(data);
})
.catch(function(reason){
    console.log('reject');
    console.log(reason);
});

运行结果1：

resolve

1

运行结果2：

reject

Too big!

 

catch方法还有另外一个作用：在执行resolve的回调时，如果抛出异常（代码出错），并不会报错卡死js，而是会进到这个catch方法中。

function createNumber(){
    var promise = new Promise(function(resolve, reject){
        // 异步操作
       	setTimeout(function(){
            var num = Math.ceil(Math.random()*10);
            if (num <= 5)
                resolve(num);
            else
                reject('Too big!');
        }, 2000);
    });
    return promise;            
}
createNumber()
.then(function(data){
    console.log('resolve');
    console.log(data);
    console.log(variety); // variety未定义
})
.catch(function(reason){
    console.log('reject');
    console.log(reason);
});

运行结果1：

resolve

1

reject

ReferenceError: variety is not defined

运行结果2：

rejected

Too big!

 

5、all()方法

Promise的all方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调。

all方法用于将多个异步操作（或Promise对象），包装成一个新的Promise对象。所有异步操作都完成，才会调用resolve方法指定的函数，只要其中一个异步操作失败，就会回调reject方法指定的函数。

all接收一个数组参数，里面的值最终都算返回Promise对象。

all会把所有异步操作的结果放进一个数组中传给then。

日常开发中经常会遇到这样的需求：需要通过不同的接口请求数据，然后拼合成所需的数据，通常这些接口之间没有关联，如不需要前一个接口的数据作为后一个接口的参数，这个时候all方法就可以派上用场了。 

function async1(){
    var promise = new Promise(function(resolve, reject){
       	//异步操作
        setTimeout(function(){
            console.log('First Finished!');
            resolve('First data!');
       	}, 1000);
    });
    return promise;            
}
function async2(){
    var promise = new Promise(function(resolve, reject){
        //异步操作
        setTimeout(function(){
            console.log('Second Finished!');
            resolve('Second data!');
        }, 2000);
    });
    return promise;            
}
function async3(){
    var promise = new Promise(function(resolve, reject){
        //异步操作
        setTimeout(function(){
            console.log('Third Finished!');
            resolve('Third data!');
        }, 2000);
    });
    return promise;            
}
Promise
.all([async1(), async2(), async3()])
.then(function(result){
    console.log(result);
});

运行结果：

First Finished!

Second Finished!

Third Finished!

["First data!", "Second data!", "Third data!"]

 

6、race()方法

all方法的效果实际上是「谁跑的慢，以谁为准执行回调」，那么相对的就有另一个方法「谁跑的快，以谁为准执行回调」，这就是race方法。

function async1(){
    var promise = new Promise(function(resolve, reject){
        //异步操作
        setTimeout(function(){
            console.log('First Finished!');
            resolve('First data!');
        }, 1000);
    });
    return promise;            
}
function async2(){
    var promise = new Promise(function(resolve, reject){
        //异步操作
        setTimeout(function(){
            console.log('Second Finished!');
            resolve('Second data!');
        }, 2000);
    });
    return promise;            
}
function async3(){
    var promise = new Promise(function(resolve, reject){
        //异步操作
       	setTimeout(function(){
           console.log('Third Finished!');
            resolve('Third data!');
        }, 2000);
    });
    return promise;            
}
Promise
.race([async1(), async2(), async3()])
.then(function(result){
    console.log(result);
});

运行结果：

First Finished!

First data!

Second Finished!

Third Finished!

可以用race给某个异步请求设置超时时间，并且在超时后执行相应的操作。

function getImg(){
    var promise = new Promise(function(resolve, reject){
        var img = new Image();
        img.onload = function(){
            resolve(img);
        }
        img.src = 'noExistImg.png';
    });
    return promise;
}
function timeout(){
    var promise = new Promise(function(resolve, reject){
        setTimeout(function(){
            reject('Timeout');
        }, 5000);
    });
    return promise;
}
Promise
.race([getImg(), timeout()])
.then(function(result){
    console.log(result);
})
.catch(function(reason){
    console.log(reason);
});

运行结果：

GET http://localhost/noExistImg.png 404 (Not Found)

Timeout

requestImg函数会异步请求一张图片，我把地址写为"xxxxxx"，所以肯定是无法成功请求到的。timeout函数是一个延时5秒的异步操作。我们把这两个返回Promise对象的函数放进race，于是他俩就会赛跑，如果5秒之内图片请求成功了，那么遍进入then方法，执行正常的流程。如果5秒钟图片还未成功返回，那么timeout就跑赢了，则进入catch，报出“图片请求超时”的信息。

筱葭
关注
专栏目录
浅谈ES6中的generator生成器（异步回调可变为同步代码）
weixin_42479305的博客
03-09 582
首先是官网的介绍： generator（生成器）是ES6标准引入的新的数据类型。一个generator看上去像一个函数，但可以返回多次。 generator和函数不同的是，generator由function*定 义（注意多出的*号），并且，除了return语句，还可以用yield返回多次。 官网地址.基础用法讲解 异步的产生： ，因为项目中用的vue的，写法： * B() { yield getSupplierList().then(() => { console
【ES6】promise 模式
前端进阶之路 | 中大厂、外企、国企内推 | 面试培训 | 简历修改
01-06 2491
一个Promise对象代表着一个还未完成，但预期将来会完成的操作；Promise 对象是一个返回值的代理；它允许你为异步操作的成功或失败指定处理方法；异步方法会返回一个包含了原返回值的 promise 对象来替代原返回值。Promise对象的三种状态：Pending—转化—>fulfilled或者rejected；当状态发生转换时，promise.then绑定的方法（函数句柄）就会被调用。(当绑定方法时，如果 promise对象已经处于 fulfilled 或 rejected 状态，那么相应的方法将会被立
Promise的resolve和reject使用
weixin_46022934的博客
08-28 1万+
前言（可以跳转解决地狱回调的问题👇🔗） 一、Promise是什么？ 二、Promise的用法如下（resolve） 1.promise的操作演示如下 2.reject的用法如下 总结
对promise、resolve和reject的简单理解
tdhszsh的博客
03-11 1万+
对于promise中resolve和reject方法的简单理解。
Promise初步详解（resolve,reject,catch）
weixin_30408309的博客
01-07 481
一:何为Promise？ 为了直观一点，首先我们采用console.dir(Promise)看一下它的结构组成。 从上面的图片中我们可以到，Promise其实是一个构造函数，它有resolve，reject，race等静态方法;它的原型（prototype）上有then，catch方法，因此只要作为Promise的实例，都可以共享并调用Promise.prototype上面的方法(then...
Promise基础详细介绍(一)，resolve，reject
最新发布
tangxiaobao2016的博客
01-13 1476
注意：**这样写能捕捉到错误，**但是不是改变Promise的状态，此时Promise的函数体已经运行结束，所以这个错误实在Promise函数体体外抛出的。有3种状态，Pending（进行中）,Resolved（已完成，又称Fulfilled）,Rejected（已失败）如果Promise状态已经变成Resolved，再抛出错误是无效的。说明：下一篇介绍then，catch, Promise.all。就是一个对象，用来传递异步操作的消息。以上代码，用es6的箭头函数再写一次。Promise的含义。
浅谈JavaScript中的对象及Promise对象的实现
10-23
JavaScript是一种动态类型...总结来说，JavaScript中的对象涵盖了从全局对象到DOM操作的各种概念，而Promise对象则是处理异步操作的关键工具。理解并熟练掌握这些知识点，对于任何JavaScript开发者来说都是非常重要的。
浅谈js promise看这篇足够了
10-18
JavaScript中的Promise对象是ES6引入的一种处理异步操作的新机制，它解决了传统的异步回调地狱问题，让异步代码更加可读和易于管理。本文将深入探讨Promise的基本概念、使用方式以及常见API。 首先，Promise的出现...
浅谈JavaScript中promise的使用
01-19
阅读目录 什么是Prmoise Promise的使用 最近在看《你不知道的javascript中卷》，发觉作者花了基本一半的篇幅去讲异步和promise，觉得有必要总结一下。 其实本文的目的是想手写一个...Promise对象可以理解为一次执行
Promise的九大方法(resolve、reject、then、catch、finally、all、allSettled、race、any)你都用过那些？
code
01-03 2390
Promise.rece()的使用方法和 Promise.all一样，接收一个promise 对象的数组为参数，Promise.race是要有一个promise对象进入Fulfilled或者 Rejected状态的话，就会继续进行后面的处理。如果这个promise对象的数组中没有一个promise 可以成功执行（即所有的 promise都失败 ），就返回一个失败的promise 和AggregateError类型的实例，它是Error的一个子类，用于把单一的错误集合 在一起。
17 # 静态方法 resolve 和 reject 的区别
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
05-17 375
下面实现静态方法 resolve 和 reject：需要进行递归解析 resolve 中的参数，直到这个值是普通值。区别：resolve 会等待里面的 promise 执行完毕，reject 不会有等待效果。快速创建一个成功的promise。快速创建一个失败的promise。
Promise初步详解（resolve，reject，catch）
热门推荐
_夜渐凉
09-28 8万+
一，何为Promise？ 为了直观一点，首先我们采用console.dir(Promise)看一下它的结构组成。 从上面的图片中我们可以到，Promise其实是一个构造函数，它有resolve，reject，race等静态方法;它的原型（prototype）上有then，catch方法，因此只要作为Promise的实例，都可以共享并调用Promise.prototype上面的方法(then...
【uniapp】promise中resolve()与reject()的用法
ONLYSRY的博客
09-22 5467
resolve(data)将这个promise标记为resolved，然后进行下一步then((data)=>{//do something})，resolve里的参数就是传入then的数据。当执行到 reject() 这个方法的时候，就改变 promise的状态为 reject，当promise为reject就可以.catch()这个promise了。执行到 resolve()这个方法的时候，就改变promise的状态为resolved，当状态为 resolved的时候就可以执行.then()
大白话讲解Promise（一）
aigenglong0649的博客
03-11 1万+
去年6月份， ES2015正式发布（也就是ES6，ES6是它的乳名），其中Promise被列为正式规范。作为ES6中最重要的特性之一，我们有必要掌握并理解透彻。本文将由浅到深，讲解Promise的基本概念与使用方法。 ES6 Promise 先拉出来遛遛 复杂的概念先不讲，我们先简单粗暴地把Promise用一下，有个直观感受。那么第一个问题来了，Promise是什么玩意呢？...
前端异步方案async/await和Promise(resolve与reject)含义、区别、案例、总结（带源码）
m0_49714202的博客
06-13 3180
前端异步方案async/await和Promise(resolve与reject)含义、区别、案例、总结（带源码）
Promise的resolve方法和reject方法
LQ55
07-29 5万+
Promise的resolve方法和reject方法 Promise.resolve方法返回一个promise的实例 Promise.resolve('foo');//等价于如下 new Promise((resolve)=&gt;{ resolve('foo'); }) 根据参数不同，分为一下几种情况 （1）参数是一个Promise的实例 如果参数是一个Promise的实例...
Async/Await中的resolve和reject怎么用？
小郭的博客
03-18 3694
Async/Await中的resolve和reject怎么用？ 我们在返回新的Promise的时候可以在param里面声明resolve和reject，resolve代表成功的情况，reject代表失败的情况 resolve的情况 如果我们用try catch去抓的时候，resolve会顺利通过，并执行await getData()后面的代码 function getData(){ console.log("fetch...") return new Promise((resolv.
ES6 --- Promise基础用法（resolve、reject、then、catch）详解一
xiaokanfuchen86的博客
01-22 5769
ES6— Promise基础用法详解 Promise是一个构造函数，它自身拥有all、reject、resolve这几个眼熟的方法， 原型上有then、catch等同样熟悉的方法。 所以，在开始一个Promise的时候，先new一个吧： let p = new Promise((resolve, reject)=> { setTimeout(()=> { resolve('执行完成') }, 1000) }) Prom..
ES6 Promise对象深度解析与异步处理实践
"ES6 Promise对象的应用实例分析" ES6中的Promise对象是解决异步编程回调地狱问题的关键工具，它提供了一种更优雅的方式来管理和链式调用异步操作。Promise对象有三种状态：pending（等待中）、fulfilled（已完成）...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值