Promise——JS异步编程策略

最新推荐文章于 2025-12-15 15:15:21 发布

转载最新推荐文章于 2025-12-15 15:15:21 发布 · 151 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://es6.ruanyifeng.com/#docs/promise

文章标签：

#javascript

本文介绍Promise对象的概念及其在异步编程中的应用，包括基本用法、状态改变特性及错误处理方式，并通过加载图片的例子展示了如何使用Promise。

本文内容转载自阮一峰老师的《ECMAScript 6 入门》Promise 对象

定义

Promise是一种异步编程解决方案，相比于传统的事件回调方案更加合理，Promise可以将异步操作，用同步操纵的流程表达出来，避免了层层嵌套的回调函数。

Promise作为一个对象类，提供了统一的API，用来处理各种异步操作。

Promise对象具有两个特点：

对象的状态外界无法改变。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败），只有resolve和reject方法可以改变其状态。
状态一旦改变便定性，任何时候返回的结果都一致，称为resolved（已定型）。

基本用法

Promise作为一个构造函数，用来生成一个Promise实例，在创建实例时传入一个函数作为其参数，该函数有两个参数，resolve和reject，它们两个是函数，由JS引擎提供，无需自己部署。

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

实例生成后，可调用then方法分别指定resolve和reject的结果回调函数，在上述我们创建实例中调用的resolve和reject方法，将改变promise的状态，其中传入的值可在then方法指定的回调函数的参数获取。

Promise 对象的错误具有“冒泡”性质，会一直向后传递，直到被捕获为止。也就是说，错误总是会被下一个catch语句捕获。

一般来说，不要在then方法里面定义Reject状态的回调函数（即then的第二个参数），而总是使用catch法。

promise.then(value => {
    //...
}).catch(error => {
    //...
})

如果没有使用catch方法指定错误处理的回调函数，Promise 对象抛出的错误不会传递到外层代码，即不会有任何反应。这就是说，Promise 内部的错误不会影响到 Promise 外部的代码，不会阻断脚本的执行。一般总是建议，Promise 对象后面要跟catch方法，这样可以处理 Promise 内部发生的错误。

应用

加载图片

const preloadImage = function(path) {
    return new Promise((resolve, reject) => {
        const img = new Image()
        img.onload = resolve
        img.onerror = reject
        img.src = path
    })
}