Javascript Promise 学习笔记_html/css_WEB-ITnose
1. 定义:Promise是抽象异步处理对象以及对其进行各种操作的组件,它把异步处理对象和异步处理规则采用统一的接口进行规范化。
2. ES6 Promises 标准中定义的API:
a) Constructor:采用new来实例化,
var promise = new Promise(function(resolve, reject) {…});
b) Instance Method:使用then方法设置成功(resolve)和失败(reject)时的回调函数,
promise.then(onFulfilled, onRejected),
promise.catch(onRejected),其中,catch只是then的别名而已;
c) Static Method:一些其他的辅助方法,比如all(),resolve()。
3. Promise 状态。三种状态:Pending(初始化)、Fulfilled和Rejected。在then后执行的函数可以肯定地说只会被调用一次。
promise对象被 resolve 时的处理 onFulfilled
promise对象被 reject 时的处理 onRejected
图1. Promise调用的执行过程
4. Resolve方法:
a) 静态方法Promise.resolve(value)可以认为是new Promise()方法的快捷方式,是一种语法糖;Promise.reject(error)与之类似;
b) Promise.resolve方法另一个作用就是将thenable对象转换为promise对象,比如jQuery.ajax()。
5. Promise在规范上规定Promise只能使用异步调用方式 。所以,promise.then实际上是属于异步调用的。
6. Promise方法链:Promise可以将任意个方法连在一起作为一个方法链(method chain)。例如:
.then(taskA).then(taskB).catch(onRejected).then(finalTask);
方法链将方法串在一起,按照顺序严格执行。
* 注意,ECMAScript 3中catch是保留字,因此在IE8一下不能使用,所以,一般使用promise["catch"]或者then来代替之。
图2. Promise链式调用的执行过程
7. 每次调用then都会返回一个新创建的promise对象,应该尽量避免一个promise执行多个then方法,而是使用链式调用法。
8. Promise和数组:Promise.all([…])在所有promise对象都变为 FulFilled 或 Rejected 状态之后被调用。Promise对象数组中所有promise方法同时调用。
Promise.race为任意一个方法变为 FulFilled 或 Rejected 状态之后被调用,在第一个promise对象变为Fulfilled之后,并不会取消其他promise对象的执行。
9. Promise中的 then 和 catch:
a) 使用promise.then(onFulfilled, onRejected) 的话,在 onFulfilled 中发生异常的话,在 onRejected 中是捕获不到这个异常的。
b) 在 promise.then(onFulfilled).catch(onRejected) 的情况下,then 中产生的异常能在 .catch 中捕获
c) .then 和 .catch 在本质上是没有区别的,需要分场合使用。
10. Deferred拥有 Promise,Deferred和Promise并不是处于竞争的关系,而是Deferred内涵了Promise。使用Deferred,只需要先创建deferred对象,可以在任何时机对 resolve、reject 方法进行调用。
var deferred = new Deferred();
本文摘自JavaScript Promise迷你书(中文版)

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

The official account web page update cache, this thing is simple and simple, and it is complicated enough to drink a pot of it. You worked hard to update the official account article, but the user still opened the old version. Who can bear the taste? In this article, let’s take a look at the twists and turns behind this and how to solve this problem gracefully. After reading it, you can easily deal with various caching problems, allowing your users to always experience the freshest content. Let’s talk about the basics first. To put it bluntly, in order to improve access speed, the browser or server stores some static resources (such as pictures, CSS, JS) or page content. Next time you access it, you can directly retrieve it from the cache without having to download it again, and it is naturally fast. But this thing is also a double-edged sword. The new version is online,

The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

This article demonstrates efficient PNG border addition to webpages using CSS. It argues that CSS offers superior performance compared to JavaScript or libraries, detailing how to adjust border width, style, and color for subtle or prominent effect

Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati

This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit

The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex
