Javascript 中的神器——Promise

88481456

2017-06-27

关注关注

摘要：回调函数真正的问题在于他剥夺了我们使用 return 和 throw 这些关键字的能力。而 Promise 很好地解决了这一切

回调函数真正的问题在于他剥夺了我们使用 return 和 throw 这些关键字的能力。而 Promise 很好地解决了这一切

Promise概念

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

直接打印 console.dir(Promise) 来看看

这么一看就明白了，Promise是一个构造函数，自己身上有all、reject、resolve这几个眼熟的方法，原型上有then、catch等同样很眼熟的方法。这么说用Promise new出来的对象肯定就有then、catch方法

Promise特点

Promise 对象有以下两个特点

1.对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：Pending（进行中）、Resolved（已完成，又称 Fulfilled）和 Rejected（已失败）。只有异步操作的结果可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是「承诺」，表示其他手段无法改变。

2.一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从Pending变为Resolved和从Pending变为Rejected。只要这两种情况发生，状态就凝固不会再变了，会一直保持这个结果。就算改变已经发生，你再对Promise对象添加回调函数也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

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

Promise 也有一些缺点。首先，无法取消Promise，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。第三，当处于Pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）

new一个Promise来看看：

var p = new Promise(function(resolve, reject){    
    setTimeout(function(){   //做一些异步操作
        console.log('执行完成');
        resolve('随便什么数据');
    }, 500);
});

Promise的构造函数接收一个参数，是函数，并且传入两个参数：resolve，reject，分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。其实这里用“成功”和“失败”来描述并不准确，按照标准来讲，resolve是将Promise的状态置为fullfiled，reject是将Promise的状态置为rejected。不过在我们开始阶段可以先这么理解，后面再细究概念。

在上面的代码中，我们执行了一个异步操作，也就是setTimeout，2秒后，输出“执行完成”，并且调用resolve方法。

运行代码，会在2秒后输出“执行完成”。注意！我只是new了一个对象，并没有调用它，我们传进去的函数就已经执行了，这是需要注意的一个细节。所以我们用Promise的时候一般是包在一个函数中，在需要的时候去运行这个函数，如：

function runAsync(){
    var p = new Promise(function(resolve, reject){       
        setTimeout(function(){    //做一些异步操作
            console.log('执行完成');
            resolve('随便什么数据');
        }, 2000);
    });
    return p;            
}
runAsync()

在我们包装好的函数最后，会return出Promise对象，也就是说，执行这个函数我们得到了一个Promise对象。还记得Promise对象上有then、catch方法吧？这就是强大之处了，看下面的代码：

runAsync().then(function(data){
    console.log(data);
    //后面可以用传过来的数据做些其他操作
});

在runAsync()的返回上直接调用then方法，then接收一个参数，是函数，并且会拿到我们在runAsync中调用resolve时传的的参数。运行这段代码，会在2秒后输出“执行完成”，紧接着输出“随便什么数据”

这时候应该有所领悟，原来then里面的函数就跟我们平时的回调函数一个意思，能够在runAsync这个异步任务执行完成之后被执行。这就是Promise的作用；简单来讲，就是能把原来的回调写法分离出来，在异步操作执行完后，用链式调用的方式执行回调函数。

当然，我把回调函数封装一下，给runAsync传进去也是一样吗，就像这样：

Javascript 中的神器——Promise

原文链接

promise 回调函数

88481456

0 关注 0 粉丝 0 动态

关注关注

处理异步事件的三种方式

在网站开发中，异步事件是项目必然需要处理的一个环节，也因为前端框架的兴起，通过框架实现的 SPA 已经是快速建构网站的标配了，一部获取数据也就成了不可或缺的一环;本文来就讲一讲 JavaScript 中异步的处理方式。首先当然要先理解一下同步及异步分别是

88254251 2020-11-01

前端客栈 - Promise书生（一）

“前端客栈？想必前方就是宁安城了，此地为宁安城的郊区，”书生忖道，“时间不早了，今日不如在此停顿休整一日。”进得店里，书生吩咐店小二将马匹安排妥当。店小二靠墙边站着，大概其他客人下来得早。书生找了靠角落的位置坐下，店小二随即跟来，递上食单。不到一刻钟，店小

bowean 2020-07-08

回调与Promise

Promise 对象就是用于表示一个异步操作的最终状态。它的流程就是在什么状态下需要执行什么样的操作。then是Promise对象上的一个方法，它最多需要有两个参数：表示异步操作执行后的回调函数。// // cb && cb()这

88520191 2020-07-05

js中的promise详解

Promise是异步编程的一种解决方案，可以替代传统的解决方案--回调函数和事件。ES6统一了用法，并原生提供了Promise对象。作为对象，Promise有一下两个特点： * 对象的状态不受外界影响。* 一旦状态改变了就不会在变，也就是说任何时候Prom

Magicsoftware 2020-06-11

初探Promise 中断与异常传送

从功能上来说，Promise用来封装一个异步操作，无论异步操作是成功或失败，Promise都将承诺给你返回一个确切的答案，一个异步任务最终执行的结果。异步主要是解决了同步阻塞的情况。但是在异步处理中也出现了很多问题，于是ES6对这一问题提出了解决方案---

whynotgonow 2020-06-06

ES6中Promise的简单理解

每个Promise构造函数可接受一个参数，该参数为一个函数，该函数又有两个参数resolve和reject，分别表示为成功之后的回调函数和失败之后的回调函数。第一个回调函数是Promise对象的状态由pending 变为 resolved 时执行；第二个回

whynotgonow 2020-06-03

可视化的JavaScript动态图演示 Promises & Async/Await 的过程

你是否运行过不按你预期运行的 js 代码？这时，你需要从 ES6 中引入的一个非常酷的新特性: Promise 来处理你的问题。为了深入理解 Promise ，我在某个不眠之夜，做了一些动画来演示 Promise 的运行，我多年来的好奇心终于得到实现。因

陈旭阳 2020-06-02

Node.js&Promise的新理解&记一次异步编程的错误尝试

在继续学习Node.js的异步编程过程中，最开始接触的是回调函数，用回调函数来处理异步请求，但这里就涉及到一个问题，如果对数据有很多层的回调函数处理的话，那么就会使得整个代码的可阅读性大大降低，就像一个>符号一样，例如。Promise对外提供了统一的

88520191 2020-05-20

Promise 用法小结

我们知道Promise是javaScript中异步编程的一种解决方法。在介绍Promise前，我们思考下Promise 的诞生解决了哪些问题呢？ES6之前，我们使用回调函数和事件处理异步操作，用来解决javaScript单线程运行时可能导致的UI渲染阻塞的

89500297 2020-05-16

js异步解决方案及promise基础

js异步解决方案：回调函数、事件监听、发布订阅、promise、generator、async/await. async/await是generator方案的语法糖async/await和generator方案，相较于Promise而言，有一个重要的优势：

前端开发Kingcean 2020-04-16

如何将Node.js中的回调转换为Promise

在几年前，回调是 JavaScript 中实现执行异步代码的唯一方法。回调本身几乎没有什么问题，最值得注意的是“回调地狱”。在 ES6 中引入了 Promise 作为这些问题的解决方案。最后通过引入 async/await 关键字来提供更好的体验并提高了可

nmgxzm00 2020-11-10

把 Node.js 中的回调转换为 Promise

xixixi 2020-11-11

手把手教你实现 Promise的使用方法

很多 JavaScript 的初学者都曾感受过被回调地狱支配的恐惧，直至掌握了 Promise 语法才算解脱。虽然很多语言都早已内置了 Promise ，但是 JavaScript 中真正将其发扬光大的还是 jQuery 1.5 对 $.ajax 的重构，

MarukoMa 2020-09-02

关于 JavaScript 错误处理的最完整指南(下半部)

因为使用了 Promise ，所以可以使用 then 来接收返回的内容，或者用 catch 来捕获出现的错误。除了 then 和 catch , Promise 中还有 finally 方法，这类似于try/catch 中的 finally。如果我们失败了

88234852 2020-09-15

V8 8.5 带来的三个实用新特性！

Promise.anyPromise 新增了一个 any 方法，它接收一个 Promise 数组，当数组中某一个 Promise 为 fulfilled 后，它返回的 Promise 就会被返回。如果所有输入的 Promise 都被拒绝，那么 Promi

陈旭阳 2020-08-31

改写promise并添加超时处理

我们都知道Promise.all()方法在有一个Promise reject以后，请求结果只返回第一个reject，我们进行了改写，在有请求reject时也可以获取所有结果，并给每个请求添加超时处理。const promiseTimeout = new P

whynotgonow 2020-08-19

ES6 中Promise 使用

ES6中一个非常重要和好用的特性就是Promise. Promise是异步变成的一种解决方案。我们什么时候回处理异步事件呢？一种很常见的应用场景就是网络请求。我们封装一个网络请求的函数，因为不能立即拿到结果，所有不能直接显示结果返回。所以往往我们会传入另外

前端开发Kingcean 2020-07-30

带你写出符合Promise/A+ 规范Promise的源码

Promise是前端面试中的高频问题，如果你能根据PromiseA+的规范，写出符合规范的源码，那么我想，对于面试中的Promise相关的问题，都能够给出比较完美的答案。我的建议是，对照规范多写几次实现，也许第一遍的时候，是改了多次，才能通过测试，那么需要

whynotgonow 2020-07-29

es6 Promise 对象、.then()

// resolve // 状态改成fulfilled. },=>{ // 第二个回调成功reject

whynotgonow 2020-07-26

ES6 promise的应用

function moveTo{ //四个参数分别为移动的元素、移动到对应的横纵坐标点，以及要移动完之后要调用的回调函数。el.style.transform = `translate`; //产生位移。.then(function(){ //then

前端开发Kingcean 2020-07-08

安科网

Javascript 中的神器——Promise

88481456

Promise概念

Promise特点

88481456

相关推荐

处理异步事件的三种方式

前端客栈 - Promise书生（一）

回调与Promise

js中的promise详解

初探Promise 中断与异常传送

ES6中Promise的简单理解

可视化的JavaScript动态图演示 Promises & Async/Await 的过程

Node.js&Promise的新理解&记一次异步编程的错误尝试

Promise 用法小结

js异步解决方案及promise基础

如何将Node.js中的回调转换为Promise

把 Node.js 中的回调转换为 Promise

手把手教你实现 Promise的使用方法

关于 JavaScript 错误处理的最完整指南(下半部)

V8 8.5 带来的三个实用新特性！

改写promise并添加超时处理

ES6 中Promise 使用

带你写出符合Promise/A+ 规范Promise的源码

es6 Promise 对象、.then()

ES6 promise的应用

88481456