Promise

在编程中，尤其是JavaScript中，Promise是一种用于处理异步操作的对象。它代表一个可能在未来某个时间点完成或失败的操作，并提供了一种方式来处理这些结果。

Promise的基本概念

1.状态：

2.Pending（待定）：初始状态，表示操作尚未完成。

3.Fulfilled（已兑现）：表示操作成功完成，伴随一个结果值。

4.Rejected（已拒绝）：表示操作失败，伴随一个错误原因。

5.构造函数：

6.Promise通过Promise构造函数创建，接受一个执行器函数（executor），该函数包含两个参数：resolve和reject，用于改变Promise的状态。

const myPromise = new Promise((resolve, reject) => {
    // 异步操作
    if (成功) {
        resolve(结果);
    } else {
        reject(错误);
    }
});

7.处理结果：

8.使用.then()方法处理成功结果，.catch()方法处理错误。

9.可以链式调用，以便在多个异步操作之间进行顺序处理。

myPromise
    .then(result => {
        console.log('成功:', result);
    })
    .catch(error => {
        console.error('失败:', error);
    });

10.静态方法：

11.Promise.all()：接受一个Promise数组，返回一个新的Promise，只有当所有的Promise都成功时才成功。

12.Promise.race()：返回一个新的Promise，它以第一个完成的Promise的结果或错误为结果。

示例

以下是一个简单的Promise示例：

const fetchData = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const success = true; // 模拟操作成功或失败
            if (success) {
                resolve('数据加载成功');
            } else {
                reject('数据加载失败');
            }
        }, 1000);
    });
};

fetchData()
    .then(data => console.log(data))
    .catch(error => console.error(error));

总结

Promise是处理异步操作的一种优雅方式，避免了回调地狱（callback hell），使代码更加清晰和易于维护。在现代JavaScript中，Promise与async/await语法结合使用，进一步简化了异步编程。

PromiseUtils

/**
 * 这里我们将重复的代码，抽出来,编写一个方法get
 *
 * @param url ajax请求的资源
 * @param data ajax请求携带的数据
 * @returns {Promise<unknown>}
 */
function get(url, data) {
    return new Promise((resolve, reject) => {
        $.ajax({
                url: url,
                data: data,
                success(resultData) {
                    resolve(resultData);
                },
                error(err) {
                    reject(err);
                }
            }
        )
    })
}

模块化编程

1.模块定义：使用export和import关键字来定义和导入模块。例如，使用export导出函数或变量，然后在其他文件中用import导入。

2.CommonJS与ES6模块：Node.js使用CommonJS模块化，通过require和module.exports实现；而ES6引入了原生模块化支持，允许浏览器和Node.js使用更现代的语法。

3.命名与默认导出：可以选择命名导出（export const myFunc = () => {}）或默认导出（export default myFunc），使用时根据需要导入。

4.模块封装：模块的作用域是私有的，这意味着模块内的变量和函数不会污染全局命名空间，减少了冲突。

5.代码组织：通过模块化，可以根据功能将代码组织在不同文件中，使项目结构更加清晰，便于团队协作和版本控制。

这种模块化方法使得JavaScript在构建大型应用时更为高效和灵活。

1. 创建一个模块文件 math.js：

// math.js

// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

2. 在另一个文件中使用该模块 app.js：

// app.js

import { add, subtract } from './math.js';

// app.js
import { add, subtract } from './math.js';

const sum = add(5, 3);
const difference = subtract(5, 3);

console.log(`Sum: ${sum}`); // 输出: Sum: 8
console.log(`Difference: ${difference}`); // 输出: Difference: 2

3. 在 HTML 文件中引入：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Module Example</title>
</head>
<body>
    <script type="module" src="app.js"></script>
</body>
</html>

这个例子展示了如何创建一个简单的数学模块并在另一个文件中导入和使用它。

Gampa'Blog

PromiseUtils

模块化编程

Promise

评论交流