JavaScript Promise 教程

介绍

在JavaScript中，Promise是一种用于处理异步操作的对象。它允许你为异步代码的成功和失败指定回调函数，使代码更加清晰和易于管理。

基本用法

一个Promise对象代表一个最终可能完成（fulfilled）或失败（rejected）的异步操作及其结果值。Promise有三种状态：

• pending（进行中）
• fulfilled（已成功）
• rejected（已失败）

创建一个Promise

你可以使用`new Promise()`构造函数来创建一个新的Promise。

let promise = new Promise(function(resolve, reject) {
    // 异步操作代码
    if (/* 操作成功 */) {
        resolve(value); // 将promise的状态从"pending"变为"fulfilled"
    } else {
        reject(error); // 将promise的状态从"pending"变为"rejected"
    }
});

使用Promise处理异步操作

使用Promise，你可以通过`.then()`和`.catch()`方法来处理成功和失败的情况。

示例：使用Promise加载图片

以下是一个使用Promise来加载图片的示例：

function loadImage(url) {
    return new Promise((resolve, reject) => {
        const image = new Image();
        
        image.onload = () => {
            resolve(image);
        };

        image.onerror = (error) => {
            reject(error);
        };

        image.src = url;
    });
}

// 使用loadImage函数
loadImage('https://example.com/path/to/image.jpg')
    .then(image => {
        document.body.appendChild(image);
        console.log('图片加载成功！');
    })
    .catch(error => {
        console.error('图片加载失败：', error);
    });

在上面的示例中，`loadImage`函数返回一个Promise对象，该对象在图片成功加载时调用`resolve`方法，在图片加载失败时调用`reject`方法。然后通过`.then()`和`.catch()`方法来处理成功和失败的情况。

链式调用和Promise.all

Promise支持链式调用，允许在一个Promise完成后继续执行下一个Promise。此外，你还可以使用`Promise.all`方法来并行运行多个Promise。

示例：链式调用和Promise.all

function asyncTask1() {
    return new Promise(resolve => {
        setTimeout(() => resolve('任务1完成'), 1000);
    });
}

function asyncTask2() {
    return new Promise(resolve => {
        setTimeout(() => resolve('任务2完成'), 2000);
    });
}

asyncTask1()
    .then(result1 => {
        console.log(result1);
        return asyncTask2();
    })
    .then(result2 => {
        console.log(result2);
    })
    .catch(error => {
        console.error('任务失败：', error);
    });

Promise.all([asyncTask1(), asyncTask2()])
    .then(results => {
        console.log('所有任务完成：', results);
    })
    .catch(error => {
        console.error('任务失败：', error);
    });

在上面的示例中，`asyncTask1`和`asyncTask2`分别返回在两个不同时间完成的Promise。你可以链式调用它们，也可以并行运行它们并等待所有任务完成。