JavaScript之浅析Promise

最新推荐文章于 2024-08-11 08:59:08 发布
最新推荐文章于 2024-08-11 08:59:08 发布
阅读量111 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://juejin.im/post/5c336a2e51882525955d9d6a
版权

1 背景

由于JavaScript是单线程语言，所以所有的网络请求、浏览器事件、自定义延时事件为了不阻塞主线程，都必须是异步执行的，异步执行可以用回调函数来实现。

setTimeout(function () {
    console.log('success');        //1秒钟后打印success
}, 1000);
复制代码

对于简单的情况，回调函数有着不错的表现。

但是，如果情况变得复杂了呢？比如说一个延时事件必须等到另一个延时事件结束后才能执行。

setTimeout(function () {
    console.log('success');          //1秒钟后打印success
    setTimeout(function () {
        console.log('again success');      //2秒钟后打印again success
    }, 1000);
}, 1000);
复制代码

此时代码结构开始变得复杂起来。随着复杂程度进一步的增加，回调函数的嵌套层数会越来越多，最终形成回调金字塔，使的代码变得难以阅读。

Promise则正是为了解决这一问题而出现的。

2 创建一个Promise对象

Promise被用来处理异步事件，当异步事件执行完成后，会根据成功或失败的结果，进行后续的逻辑操作。

首先，根据语法：

new Promise( function(resolve, reject) {...} /* executor */ );

我们来创建一个Promise对象

function executor(resolve,reject){
    //todo async event
}
var promise = new Promise(executor);
复制代码

executor函数是我们用来处理异步事件的，它接收两个参数resolve和reject。

当我们创建一个Promise对象（new Promise）的时候，Promise会立刻执行executor函数，并且把resolve和reject两个函数作为参数传递给executor函数。

在此之后，Promise会返回一个对象，我们用变量promise来接收这个对象。

3 使用Promise对象

3.1 resolve和reject


function executor(resolve,reject){
    setTimeout(function () {  
        if( isSuccess() ){           //isSuccess()是一个能够随机返回true或false的函数，目的是为了模拟异步事件是否执行成功
            resolve('success')
        }else{
            reject('run reject')
        }
    },1000)
}
var promise = new Promise(executor);
复制代码

我们知道，executor是我们用来处理异步事件的，那么无论这个异步事件是否执行成功，总要发出一个信号，告诉我们的promise对象异步事件已经结束，可以进行下一步的操作了。

resolve和reject就是这个信号的发起者了。

  • 如果异步事件执行成功，那么就调用resolve函数，并把成功的结果（例如字符串success）作为参数传递进去。
  • 如果异步事件执行失败，那么就调用reject函数，并把失败的结果（例如字符串fail）作为参数传递进去。

3.2 .then和.catch

function executor(resolve,reject){
    setTimeout(function () {
        if( isSuccess() ){           //isSuccess()是一个能够随机返回true或false的函数，目的是为了模拟异步事件是否执行成功
            resolve('success')
        }else{
            reject('fail')
        }
    },1000)
}

var promise = new Promise(executor);

promise.then(function(res){
    console.log('执行成功:',res)       //1秒钟后，如果异步事件执行成功，调用了resolve函数，则会打印执行成功:success
});
promise.catch(function(err){
    console.log('执行失败:',err)      //1秒钟后，如果异步事件执行失败，调用了reject函数，则会打印执行失败:fail
});
复制代码

与resolve和reject对应的。.then和.catch就是信号的接收者了。

  • 当executor函数调用resolve方法时，就会执行.then里面的回调函数，成功的结果（字符串success）会作为参数传递给该回调函数。
  • 当executor函数调用reject方法时，就会执行.catch里面的回调函数，失败的结果（字符串fail）会作为参数传递给该回调函数。

.then和.catch里面的回调函数可以根据不同的异步事件执行结果进行不同的后续操作。

3.3 .then和.catch回调函数的特性

.then和.catch的回调函数并不会立即执行，而是会被注册到一个任务队列里，且同时具有以下3种特性：

  • 只有同时满足异步事件执行完成且JavaScript主线程执行完毕这两个条件，才会执行任务队列里的函数。
  • 即使异步事件已经结束了，向任务队列中注册的回调函数依然会被正确的执行。
  • 通过多次调用.then向任务队列注册多个回调函数，它们会按照注册的顺序独立的运行。（注意，.catch并不具备此特性）
console.log('main start');
let promise = new Promise(function(resolve){
    setTimeout(function () {
        resolve('success')
    },1000)
});
promise.then(function(res){
    console.log('执行成功：',res);
});
setTimeout(function () {
    promise.then(function(res){
        console.log('执行成功2：',res);
    });
},2000);
console.log('main end');

//执行顺序如下：
//main start
//main end
//（1秒钟后）执行成功：success
//（2秒钟后，此时异步事件已经结束了，但函数依然能被正确的执行）执行成功2：success
复制代码

3.4 小结

至此，一个Promise流程——从异步事件发起（new Promise(executor)），到异步事件结束（resolve或reject），再到根据不同的结果执行不同的操作（.then或.catch），就完整的结束了。

可以看出，与传统的回调函数相比，使用Promise结构会把异步事件代码和处理结果代码分离开来，不仅利于阅读，还有助于代码的复用。

在写法上，由于：

  • 只使用一次的函数可以写成匿名函数。所以可以把executor函数写成匿名函数的形式。
  • new Promise和.then以及.catch都会返回一个Promise对象。所以可以把.then和.catch写成链式调用的形式。

对Promise的应用也可以写成以下形式。

new Promise(function(resolve,reject){
    setTimeout(function () {
        if( isSuccess() ){
            resolve('success')
        }else{
            reject('fail')
        }
    },1000)
}).then(function(res){
    console.log('执行成功:',res) 
}).catch(function(err){
    console.log('执行失败:',err) 
});
复制代码

4 Promise方法

4.1 Promise.all()

有时候我们需要一次性的执行多个异步事件，并且需要在这些异步事件全部执行成功后再进行后续的操作。

这时候Promise.all()就派上了大用场。

var promise1 = new Promise(function(resolve,reject){
    setTimeout(function () {
        if( isSuccess() ){
            resolve('promise1 success')
        }else{
            reject('promise1 fail')
        }
    },1000)
})
var promise2 = new Promise(function(resolve,reject){
    setTimeout(function () {
        if( isSuccess() ){
            resolve('promise2 success')
        }else{
            reject('promise2 fail')
        }
    },2000)
})

var promiseList = [];
promiseList.push(promise1);
promiseList.push(promise2);
Promise.all(promiseList).then(resList=>{
    console.log('执行成功：',resList) //如果promise1和promise2都执行成功，那么2秒后会打印 执行成功:['promise1 success','promise2 success'] 。除此之外，都会执行.catch的回调函数。
}).catch(err=>{
    console.log('执行失败：',err)  //根据失败的来源，打印结果有两个 执行失败:promise1 fail 或者 执行失败:promise2 fail
});
复制代码

Promise.all()接收一个数组，该数组的元素是promise对象。Promise.all()会等待数组里面所有的promise都执行成功，或者第一个执行失败。

  • 当所有的promise都执行成功时，就会调用.then的回调函数，并把所有的成功结果按照顺序放到一个数组里，作为参数传递给该回调函数。也就是说，promise在数组中的顺序与成功结果在数组中的顺序是一致的。
  • 当第一个promise执行失败时，就会调用.catch的回调函数，并把该promise的失败结果作为参数传递给该回调函数。

4.2 Promise.race()

有时候我们需要一次性的执行多个异步事件，并且当第一个异步事件执行成功或失败就进行后续的操作，而不关心剩余异步事件的执行结果。

这时候就可以使用Promise.race()来解决这一类问题。

var promise1 = new Promise(function(resolve,reject){
    setTimeout(function () {
        if( isSuccess() ){
            resolve('promise1 success')
        }else{
            reject('promise1 fail')
        }
    },1000)
})
var promise2 = new Promise(function(resolve,reject){
    setTimeout(function () {
        if( isSuccess() ){
            resolve('promise2 success')
        }else{
            reject('promise2 fail')
        }
    },2000)
})

var promiseList = [];
promiseList.push(promise1);
promiseList.push(promise2);
Promise.race(promiseList).then(res=>{
    console.log('执行成功：',res) //当第一个promise执行成功时，打印该promise成功结果   执行成功:promise1 success 或者 执行成功:promise2 success
}).catch(err=>{
    console.log('执行失败：',err)  //当第一个promise执行失败时，打印该promise失败结果   执行失败:promise1 fail 或者 执行失败:promise2 fail
});
复制代码

Promise.all()接收一个数组，该数组的元素是promise对象。Promise.race()会等待数组里面的第一个promise执行成功或者执行失败。

  • 当第一个promise执行成功时，就会调用.then的回调函数，并把该promise的成功结果作为参数传递给该回调函数。
  • 当第一个promise执行失败时，就会调用.catch的回调函数，并把该promise的失败结果作为参数传递给该回调函数。

4.3 Promise.resolve()

Promise.resolve()会直接返回一个执行成功的Promise对象。

Promise.resolve('success').then(function(res) {
  console.log('执行成功：',res);    //直接打印  执行成功：success
});
复制代码

我们一般很少用到这个方法，但是这个方法解释了为什么.then和.catch能够链式调用。

上文说到过：

new Promise和.then以及.catch都会返回一个Promise对象。所以可以把.then和.catch写成链式调用的形式。

new Promise(function(resolve,reject){
    setTimeout(function () {
        if( isSuccess() ){
            resolve('success')
        }else{
            reject('fail')
        }
    },1000)
}).then(function(res){
    console.log('执行成功:',res) 
}).catch(function(err){
    console.log('执行失败:',err) 
});
复制代码

首先，Promise作为一个类，new Promise的时候返回一个对象，这没问题（详情请参见ES6 class）。

但是.then和.catch为什么也会返回一个promise对象呢？

这是因为在JavaScript中，函数都是有返回值的，如果没有返回值，那么函数会隐式的（自动的）返回一个undefined。

而.then和.catch又会把函数的返回值隐式的（自动的）用Promise.resolve()包装一下。

所以，.then和.catch就成功的返回了一个promise对象，也就能实现链式调用的书写结构了。

而这个链式调用的特性同时解决了回调函数的回调金字塔问题。

new Promise(function(resolve){
    setTimeout(function () {
        resolve('success')
    },1000)
}).then(function(res){
    console.log(res);         //1秒钟后打印 success
    return new Promise(function(resolve){
        setTimeout(function(){
            resolve('again success')
        },1000)
    })
}).then(function(res){
    console.log(res);        //2秒钟后打印 again success
});
复制代码

对比多层嵌套的函数回调结构，链式调用结构清晰，更利于阅读和维护。

4.4 Promise.reject()

Promise.reject()会直接返回一个执行失败的Promise对象。

Promise.reject('fail').catch(function (err) {
    console.log('执行失败：',err) //直接打印 执行失败：fail
});
复制代码

这个方法也很少用到。但值得一提的是，.catch除了能响应reject之外，也能响应在promise流程中的异常抛出事件。

Promise.reject('fail').catch(function (err) {
    console.log('执行失败：',err); //打印结果 执行失败：fail
    throw 'throw fail'
}).catch(function (err) {
    console.log('执行失败：',err); //打印结果 执行失败：again fail
});
复制代码

5 总结

Promise作为处理异步事件的解决方案。

  • 很好的把异步事件代码和处理结果代码分离开来。
  • 提供了all和race方法来解决一次性执行多个异步事件这一类问题。
  • 其链式调用的特性很好的解决了函数回调的问题。

灵活的运用Promise将会为我们的开发工作提供很大的便利。

weixin_33739523
关注
使用promise解决循环请求接口数据（for循环）&使用el-upload组件自定义上传文件
爱草莓的番茄酱的博客
07-23 2160
template部分： <el-upload multiple //可以多选文件 class="upload-demo" ref="upload" //组件名 action="fakeaction" //因为是前后端分离的上传方式，所以这里的action随便填一个 :file-list="fileList" //文件列表 :auto-.
promise三个状态俩个参数_浅析 JavaScript 中的 Promise
weixin_42499999的博客
01-24 1602
Promise 是学习 ES6 不可避开的技术点之一，本文将给大家介绍 Promise 最重要的几个常用的 API，帮助大家更好地理解它。​​创建 Promise我们先来看一下 Promise 的签名函数：new Promise( /* executor */ function(resolve, reject) { ... } );Promise 的构造器接受一个名称为 executor 的函数，...
promise解决重复调用同一接口（同步）
codezha的博客
06-01 5028
前端实现多次调用同一个接口，所有数据均成功返回后，才可继续执行下面的代码 封装请求数据方法 getData(param) { return new Promise((resolve, reject) => { this.$axios .get(`/xx/xx/xxpath/${param}`) .then(res => { let content = res.data reso
ES6--new Promise()讲解
weixin_30439131的博客
10-30 609
Promise是什么？是对象？数组？函数?我们直接打印出来，console.dir(Promise) 这样可以看出，Promise是一个构造函数，自己身上有all,reject,resolve这几个眼熟的方法，原型上then,catch等同样眼熟的方法。这么说用Promise new出来的对象肯定就有then,catch方法了。我们接下来尝试一下。 　　 var p = new P...
JavaScript Promise浅析
liuqiao0327的专栏
08-06 362
JavaScript Promise 文章目录JavaScript Promise一.概念二.Promise对象1.回调地狱2.Promise使用2.1 reslove2.2 reject2.3 then()2.4 catch()2.4.1 catch()本质2.5 then()第二个函数和catch()区别2.6 finally()2.7 Promise对象本身是同步的2.8 Promise示例2.9 Promise链式调用2.10 Promise优点缺点1.优点2.缺点三.Promise.all()1.
理解JavaScript之Promise
weixin_41293999的博客
05-05 231
在JavaScript的世界中，所有代码都是单线程执行的。由于这个“缺陷”，导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行。 Promise 是异步编程的一种解决方案： 从语法上讲，promise是一个对象，从它可以获取异步操作的消息；从本意上讲，它是承诺，承诺它过一段时间会给你一个结果。 promise有三种状态：pending(等待态)，fulfiled(成功态)，re...
理解 Javascript 中的 Promise（转载）
menghuanzhiming的博客
12-09 581
理解 Javascript 中的 Promise：https://segmentfault.com/a/1190000017312249 代码测试：https://gitee.com/menghuanzhiming/promise/tree/master/promise
【JavaScript源代码】浅析Promise的介绍及基本用法.docx
12-29
《深入理解JavaScript Promise：从基础到实践》 Promise，作为ES6引入的一种异步编程解决方案，极大地改善了JavaScript中处理回调地狱的困境。它提供了一种更为优雅的方式来组织和管理异步操作，使得代码结构清晰，...
浅析Javascript ES6中的原生Promise
10-21
在JavaScript的世界里，ES6引入了Promise对象，旨在解决异步编程中的回调地狱问题，使得代码结构更加清晰，可读性更强。Promise是处理异步操作的一种方式，它代表了一个将来可能完成或失败的值。在ES6之前，开发者...
浅析Javascript ES6中的原生Promise_.docx
10-10
Promise的出现极大地改善了JavaScript中的异步编程体验，解决了回调金字塔问题，使代码更易于理解和维护。尽管Promise本身不提供并行执行任务的能力，但配合其他工具如`Promise.all()`，可以有效地管理异步操作，...
浅析JavaScript Promise简易实现原理
资源摘要信息:"在本资源中，我们将探讨如何用JavaScript实现Promise对象的一个简化版本。Promise是ES6引入的一个对象，用于在处理异步操作时提供一个更加优雅的解决方案。它代表了一个尚未完成但预期将来会完成的...
JavaScript杂谈之promise揭秘
allenliu6的博客
02-28 551
所谓promise就是一个用来传递异步操作的消息，他代表了某个未来才能知道事件的结果，我们用这个代表了未来的结果先一步决定其下一步进行的操作，在ES6标准出之前我们是用笨拙的回调函数进行异步操作。 事实上promise出现的意义要大得多，表面看来它只是让我们逃离了可怕的回调金字塔，让我们的代码颜值更高，语义化更强，更易于测试巴拉巴拉的一堆，但一个很多语言都坚定采用的标准有这么简单嘛？
浅析 Promise
zhang6223284的博客
08-29 471
前言 刚开始的时候自己对 Promise 的了解不是太深，看到 Promise 就头疼，然后看阮一峰老师的 ES6 标准入门的时候根本看不下去，应该是自己之前的水平太差了，不过最近在看的时候发现基本都能理解了，所以尽可能以一个小白的观点整理一下，希望能帮助更多人理解，这篇文章适合对 Promise 了解的不多，但是想了解的人。如果能耐心读下去的话肯定会对你了解 Promise 有所帮助。 ...
浅析Promise的then方法
weixin_57396733的博客
05-01 6785
1.关于then then方法的作用是为Promise对象添加状态改变时的回调函数。 2.then的返回值 then()方法的返回值也是一个promise对象，所以它支持链式写法。但是要注意的是它的返回值是一个新的promise对象，与调用then方法的并不是同一个对象。 那么既然 p2也是一个promise对象，那么，p2的状态（promiseStatus）和值(promiseValue)又由什么决定呢？我们先上结论，随后分别逐一验证。 3.p2的状态和值的确定规则 （1）当p1的状态是p
JavaScript Promise 承诺执行原理浅析
weixin_45866432的博客
02-20 619
文章目录1 参考文档2 本文出发点3 简易理解Promise4 简易理解Promise与JS事件驱动机制5 Promise简易链式调用6 Promise代码解读6-1 基础知识预备6-2 从构造器到resolve/reject结果6-3 从then接口到链式调用7 微信小程序添加finally支持 1 参考文档 深入理解JavaScript事件循环机制 （转）帮你彻底搞懂JS中的prototyp...
浅析JavaScript异步代码优化
10-17
JavaScript异步代码优化是开发过程中不可或缺的一环，尤其是在前端开发中，由于JavaScript的单线程特性，异步处理显得尤为重要。本文将深入探讨JavaScript异步编程的问题及其优化策略。 首先，我们来关注最常见的一...
深入理解JavaScript中的Promise
最新发布
软考鸭
08-11 315
Promise是JavaScript中处理异步操作的一种重要机制。它通过状态管理、链式调用和错误处理等功能，简化了异步编程的复杂性，提高了代码的可读性和可维护性。掌握Promise的使用方法和技巧，对于编写高效、优雅的异步代码至关重要。在实际开发中，我们应该充分利用Promise提供的强大功能，结合async/await等现代JavaScript特性，编写更加简洁、易读的异步代码。
Promise的理解-JavaScript
rendawei636专注医疗软件
05-28 217
1 为什么要使用Promise 1.1防止调用黑洞。 // 正常的ajax调用，程序员既要定义业务逻辑函数，还要控制这些业务逻辑执行的顺序，一旦异步调用嵌套太深，整个代码可读性和可维护度都会下降
深入理解JavaScript的Promise
思诚^_^
07-03 2073
写在前面 对于没有见过的东西，人们会排斥，因为内心会恐惧。 —— 题记 对于JavaScript这门语言来说，带P开头的关键词总是给人一种莫名的恐惧感。在初学JavaScript时，对ProtoType 和 __proto__ 非常恐惧，因为初级应用里根本用不到这两位，但是面试官却总喜欢问这类的问题。后来随着
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值