JavaScript Promise 教程与案例讲解

本文详细介绍了JavaScript中的Promise对象，并通过一个案例讲解其使用方法。

一、Promise 简介

Promise是JavaScript中用于处理异步操作的对象，它代表了一个最终可能完成（并返回结果）或失败（并返回原因）的异步操作及其结果值。Promise有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。

二、Promise 基本用法

Promise的构造函数接收一个执行器函数作为参数，该执行器函数包含两个参数：resolve和reject，分别用于将Promise的状态更改为fulfilled和rejected。

let promise = new Promise((resolve, reject) => {
    // 异步操作
    setTimeout(() => {
        let success = true; // 假设这是一个异步操作的结果
        if (success) {
            resolve('操作成功');
        } else {
            reject('操作失败');
        }
    }, 1000);
});

promise.then(
    result => {
        console.log(result); // 输出: 操作成功
    },
    error => {
        console.log(error); // 输出: 操作失败（如果执行reject）
    }
);
    

三、Promise 链式调用

Promise对象支持链式调用，可以通过then方法添加多个回调函数，这些回调函数会依次执行。

let promise = new Promise((resolve, reject) => {
    resolve('第一步');
});

promise
    .then(result => {
        console.log(result); // 输出: 第一步
        return '第二步';
    })
    .then(result => {
        console.log(result); // 输出: 第二步
        return '第三步';
    })
    .then(result => {
        console.log(result); // 输出: 第三步
    })
    .catch(error => {
        console.log(error); // 捕获前面步骤中的错误
    });
    

四、案例讲解：使用Promise处理异步请求

下面是一个使用Promise处理异步HTTP请求的示例，通过fetch API发送一个GET请求，并处理响应。

function fetchData(url) {
    return new Promise((resolve, reject) => {
        fetch(url)
            .then(response => {
                if (!response.ok) {
                    reject(new Error('Network response was not ok'));
                }
                return response.json();
            })
            .then(data => resolve(data))
            .catch(error => reject(error));
    });
}

let url = 'https://api.example.com/data'; // 替换为实际的API地址

fetchData(url)
    .then(data => {
        console.log('数据获取成功:', data);
    })
    .catch(error => {
        console.error('数据获取失败:', error);
    });
    

五、总结

Promise是JavaScript中处理异步操作的重要工具，它简化了异步代码的编写和维护。通过链式调用和错误处理机制，Promise可以优雅地处理复杂的异步逻辑。