javaScript之Promise

最新推荐文章于 2025-06-14 12:24:07 发布
最新推荐文章于 2025-06-14 12:24:07 发布
阅读量855 收藏 27
点赞数 7
CC 4.0 BY-SA版权
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_74242675/article/details/136076684

JavaScript中的Promise是一种处理异步操作的机制。它是ES6标准中新增的特性，用于更方便地处理回调函数嵌套的问题。

Promise将一个异步操作封装成一个对象，代表一个未完成的操作，它有三种状态：未完成（pending）、已成功（fulfilled）和已失败（rejected）。一旦Promise的状态改变，就无法再次改变。

使用Promise的方式是使用new关键字创建一个Promise对象，Promise对象需要传入一个执行器函数作为参数，执行器函数有两个参数：resolve和reject。在执行器函数中，可以执行异步操作，并根据操作的结果调用resolve或reject方法，来改变Promise的状态。

当Promise的状态变为已成功时，可以通过调用then方法来注册成功回调函数，当状态变为已失败时，可以通过调用catch方法来注册失败回调函数。then方法可以链式调用，可以在一个then方法中返回一个新的Promise对象，这样可以实现多个异步操作的串行。

Promise还有其他的方法，比如finally方法可以在Promise无论成功或失败都执行某个操作，还有all方法可以等待多个Promise对象都已成功才执行回调函数。

总之，Promise提供了一种简洁高效的处理异步操作的方式，避免了回调函数嵌套的问题，使代码更加可读可维护。

1-Promise基础语法

Promise是JavaScript中的一个对象，用于处理异步操作。它代表了一个现在、将来或永远可能可用的值。以下是一个基础的Promise语法示例：

// 创建一个新的Promise
let myPromise = new Promise((resolve, reject) => {
  // 异步操作模拟：尝试从服务器获取数据
  setTimeout(() => {
    if (/* 数据获取成功 */) {
      resolve("成功的数据"); // 当异步操作成功时调用resolve，并传入结果
    } else {
      reject("数据获取失败"); // 当异步操作失败时调用reject，并传入错误原因
    }
  }, 2000); // 延迟2秒模拟网络请求延迟
});

// 使用then方法处理Promise的成功情况
myPromise.then(data => {
  console.log("获取的数据:", data);
  // 在这里可以进一步处理数据
});

// 使用catch方法捕获并处理Promise的拒绝（即错误）情况
myPromise.catch(error => {
  console.error("发生错误:", error);
  // 在这里可以进行错误处理
});

在这个例子中，我们创建了一个新的Promise对象，该对象在内部封装了一个异步操作——通过setTimeout模拟网络请求。当异步操作完成且成功时，通过调用resolve函数来改变Promise的状态为fulfilled（已成功），并将结果传递给后续的.then处理程序。如果操作失败，则调用reject函数将Promise状态设置为rejected（已失败），并将错误信息传递给.catch处理程序。

2-Promise封装ajax

以下是使用Promise封装原生XMLHttpRequest发起Ajax请求的一个例子：

// Promise封装的Ajax函数
function ajaxRequest(method, url, data = null) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();

    xhr.open(method, url, true);

    // 设置HTTP请求头，例如对于POST请求设置Content-Type
    if (method === 'POST' && data) {
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    }

    xhr.onload = function () {
      if (xhr.status >= 200 && xhr.status < 300) {
        try {
          resolve(JSON.parse(xhr.responseText));
        } catch (e) {
          resolve(xhr.responseText);
        }
      } else {
        reject(xhr.statusText);
      }
    };

    xhr.onerror = function () {
      reject(xhr.statusText);
    };

    if (method === 'POST') {
      xhr.send(encodeFormData(data)); // 对POST数据进行URL编码后发送
    } else {
      xhr.send(); // GET请求直接发送
    }
  });

  // 辅助函数：对数据进行URL编码
  function encodeFormData(data) {
    return Object.keys(data).map(key => `${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`).join('&');
  }
}

// 使用封装好的Promise-based Ajax函数的例子：
ajaxRequest('GET', '/api/data')
  .then(response => {
    console.log('获取的数据:', response);
  })
  .catch(error => {
    console.error('请求失败:', error);
  });

// POST请求的例子
const postData = { id: 123, name: 'John Doe' };
ajaxRequest('POST', '/api/submit', postData)
  .then(response => {
    console.log('数据提交成功，服务器响应:', response);
  })
  .catch(error => {
    console.error('数据提交失败:', error);
  });

在这个示例中，ajaxRequest函数返回一个Promise对象，当Ajax请求完成时，根据HTTP状态码通过调用resolve或reject来改变Promise的状态。这样，使用者可以使用.then和.catch方法处理异步操作的结果和错误，从而避免了回调地狱的问题。

3-Promise版ajax案例

Promise版的AJAX请求通常会封装原生的XMLHttpRequest或使用Fetch API来返回一个Promise对象，这样可以更优雅地处理异步操作。以下是一个使用Promise封装AJAX GET请求的例子：

// 封装一个基于Promise的AJAX GET请求函数
function fetchWithPromise(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.onload = function() {
      if (xhr.status === 200) {
        resolve(JSON.parse(xhr.responseText));
      } else {
        reject(xhr.statusText);
      }
    };
    xhr.onerror = function() {
      reject(xhr.statusText);
    };
    xhr.send();
  });
}

// 使用该函数发起请求并处理结果
fetchWithPromise('https://api.example.com/data')
  .then(data => {
    console.log('获取数据成功:', data);
    // 在这里处理成功后返回的数据
  })
  .catch(error => {
    console.error('请求失败:', error);
    // 在这里处理错误信息
  });

现代JavaScript中，更推荐使用内置的Fetch API来发起请求，因为它原生支持返回Promise，并且API更加简洁和强大：

// 使用Fetch API发起一个Promise版的GET请求
fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json(); // 解析JSON响应体
  })
  .then(data => {
    console.log('获取数据成功:', data);
    // 在这里处理成功后返回的数据
  })
  .catch(error => {
    console.error('请求失败:', error);
    // 在这里处理错误信息
  });

4-async和await语法

async/await是JavaScript中用于处理异步操作的语法糖，它基于Promise实现，可以极大地提高异步代码的可读性和简洁性。下面是一个使用async/await处理Ajax请求的例子：

// 假设我们已经有了一个返回Promise的封装好的Ajax函数
function fetchAsyncData(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.onload = function () {
      if (xhr.status === 200) {
        resolve(xhr.responseText);
      } else {
        reject(xhr.statusText);
      }
    };
    xhr.onerror = function () {
      reject(xhr.statusText);
    };
    xhr.send();
  });
}

// 使用async/await的函数
async function fetchDataAndProcess() {
  try {
    // 等待fetchAsyncData函数返回的Promise解决
    const data = await fetchAsyncData('/api/data');
    
    // 数据获取成功，进行下一步处理
    console.log('获取的数据:', JSON.parse(data));
    
    // 可以进一步执行其他异步操作，并等待结果
    const moreData = await fetchAsyncData('/api/more-data');
    console.log('更多数据:', JSON.parse(moreData));
    
  } catch (error) {
    // 如果在await表达式中Promise被拒绝，则会捕获到错误
    console.error('请求失败:', error);
  }
}

// 调用封装好的异步函数
fetchDataAndProcess();

// 注意：尽管这个函数是异步的，但调用它并不会阻塞主线程
console.log('此行立即执行，不等待Ajax请求完成');

在这个例子中，fetchDataAndProcess是一个异步函数，通过使用async关键字声明。在该函数内部，我们可以使用await关键字来等待Promise的结果。当遇到await表达式时，程序会暂停在此处，直到Promise解析完成，然后继续执行后面的语句。这样就避免了回调函数和嵌套的Promise链，使得代码更加扁平和易读。

5-async和await案例

以下是一个使用async/await处理异步操作的JavaScript示例，特别是针对Fetch API发起HTTP请求：

// 定义一个使用async和await的函数来获取JSON数据
async function fetchJsonData() {
  try {
    // 使用await关键字等待fetch的结果（它会返回一个Promise）
    const response = await fetch('https://api.example.com/data');

    // 检查响应是否成功
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    // 使用await等待Promise解析为JSON数据
    const data = await response.json();

    // 处理数据
    console.log('获取的数据:', data);
    document.getElementById('result').innerHTML = data.title;

    return data; // 可以将数据作为函数的结果返回
  } catch (error) {
    console.error('请求失败：', error);
    throw error; // 或者再次抛出错误，以便外部调用者可以捕获
  }
}

// 调用async函数
fetchJsonData().then(data => {
  // 如果fetchJsonData函数内部没有抛出异常，则这里可以继续处理data
  console.log('在.then中处理数据:', data);
}).catch(error => {
  // 在这里捕获并处理fetchJsonData函数中的错误
  console.error('捕获到的错误：', error);
});

在这个例子中，fetchJsonData函数是异步的，并使用了async关键字。通过await关键字，我们能够同步地编写代码来等待异步操作完成，从而极大地提高了代码的可读性和简洁性。当从服务器获取数据时，如果有任何错误发生，它们会被try/catch块捕获并在catch部分处理。同时，外部调用这个函数时也可以选择使用.then和.catch来处理成功或失败的情况。

6-fetch

当然，以下是一个使用Fetch API发起GET请求并处理响应的例子：

// 使用Fetch API获取JSON数据
fetch('https://api.example.com/data')
  .then(response => {
    // 检查HTTP状态码是否为200-299之间的数字，表示请求成功
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    // 将返回的Response对象转换为JSON格式的数据
    return response.json();
  })
  .then(data => {
    console.log('获取的数据:', data);
    // 在这里可以进一步处理或操作返回的数据
    document.getElementById('result').innerHTML = data.title;
  })
  .catch(error => {
    console.error('请求失败：', error);
    // 在这里处理网络错误或其他异常
  });

在这个例子中，我们使用Fetch API向https://api.example.com/data发起一个GET请求。当请求成功（HTTP状态码在200-299之间）时，将服务器返回的Response对象通过.json()方法解析为JSON数据，并在下一个.then中进行处理。如果请求过程中发生任何错误（如网络问题、服务器返回非200状态码等），则会在.catch中捕获到错误信息并进行相应处理。

7-fetch案例

以下是一个使用Fetch API发起GET请求并处理响应数据的示例：

async function fetchUserData(userId) {
  const url = `/api/users/${userId}`;

  try {
    // 发起GET请求
    const response = await fetch(url);

    // 检查HTTP状态码是否为200（成功）
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    // 解析返回的JSON数据
    const user = await response.json();

    // 返回解析后的用户数据
    return user;

  } catch (error) {
    console.error('There was an error fetching the user:', error);
    return null;
  }
}

// 使用封装好的函数获取用户数据
fetchUserData(123)
  .then((user) => {
    if (user) {
      console.log('User data fetched successfully:', user);
      // 在这里可以使用用户数据进行进一步操作
    } else {
      console.log('Failed to fetch user data');
    }
  })
  .catch((error) => {
    console.error('An error occurred while fetching user data:', error);
  });

在这个例子中，fetchUserData函数是异步的，并使用了async/await语法来简化Promise链。它首先发起一个到指定URL的GET请求，然后检查响应的状态。如果状态码表示成功，则解析响应体中的JSON数据；如果出现错误，则抛出异常并在catch块中处理。

调用此函数时，我们可以通过.then方法来处理成功的情况，并通过.catch方法捕获和处理任何可能出现的错误。

8-大案例-接口分析

以下是一个基于真实场景的大案例，我们将分析一个电商网站的接口设计：

接口名称： 获取商品列表

接口URL： /api/products

请求方式： GET

请求参数：

  1. category_id - 可选，整数类型，用于指定获取某个分类下的商品列表。
  2. page - 可选，整数类型，默认为1，用于分页查询，表示当前要获取的是第几页的数据。
  3. limit - 可选，整数类型，默认为10，用于设置每页显示的商品数量。

请求示例：

GET /api/products?category_id=5&page=2&limit=20

响应数据格式：

{
  "status": "success",
  "message": "获取商品列表成功",
  "data": {
    "total": 56, // 总商品数量
    "currentPage": 2, // 当前页码
    "perPage": 20, // 每页显示商品数
    "products": [
      {
        "id": 1,
        "name": "商品A",
        "category_id": 5,
        "price": 99.99,
        "description": "这是商品A的描述",
        "image_url": "https://example.com/images/product_a.jpg"
      },
      {
        "id": 2,
        "name": "商品B",
        "category_id": 5,
        "price": 79.99,
        "description": "这是商品B的描述",
        "image_url": "https://example.com/images/product_b.jpg"
      },
      // 更多商品...
    ]
  }
}

接口分析：

  • 此接口主要用于获取电商网站上的商品列表信息，支持根据商品分类进行筛选，并且提供分页功能以适应大量商品的展示需求。
  • 请求中可以携带可选参数，灵活控制返回的商品范围和数量。
  • 响应体中的"data"字段包含了商品列表的实际数据，包括总商品数量、当前页码、每页商品数以及具体的商品对象数组。每个商品对象包含商品ID、名称、分类ID、价格、描述和图片URL等关键信息。

通过这个接口，前端可以根据用户的浏览行为和筛选条件动态加载商品列表，实现良好的用户体验。同时，后端可以通过该接口有效地管理并提供大量的商品数据。

9-大案例-列表

以下是一个使用Fetch API和async/await从服务器获取用户列表并渲染到页面上的大案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>User List</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            padding: 8px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
    </style>
</head>
<body>
    <h1>User List</h1>
    <table id="userTable">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>

    <script>
        async function fetchUsers() {
            try {
                const response = await fetch('/api/users');
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }

                const users = await response.json();
                return users;

            } catch (error) {
                console.error('There was an error fetching the user list:', error);
                return [];
            }
        }

        async function renderUserList() {
            const userListElement = document.querySelector('#userTable tbody');
            const users = await fetchUsers();

            // 清空现有内容
            userListElement.innerHTML = '';

            // 将用户数据渲染到表格中
            for (const user of users) {
                const row = `
                    <tr>
                        <td>${user.id}</td>
                        <td>${user.name}</td>
                        <td>${user.email}</td>
                    </tr>
                `;
                userListElement.insertAdjacentHTML('beforeend', row);
            }
        }

        // 初始化时加载并渲染用户列表
        renderUserList();
    </script>
</body>
</html>

在这个例子中，我们首先定义了一个异步函数fetchUsers，用于从服务器获取用户列表。然后定义了另一个异步函数renderUserList，该函数负责调用fetchUsers获取用户数据，并将数据渲染到HTML表格中。

在页面加载完成后，立即调用renderUserList函数来填充用户列表。当用户数据成功返回时，会在表格中动态创建行并插入对应的数据。如果在获取或处理用户数据过程中出现错误，则会在控制台输出错误信息。

10-大案例-详情

大案例：电商网站商品详情接口分析

接口名称： 获取商品详情

接口URL： /api/products/:id

请求方式： GET

请求参数：

  • :id - 必填，路径参数，整数类型，表示要获取的商品ID。

请求示例：

GET /api/products/123

响应数据格式：

{
  "status": "success",
  "message": "获取商品详情成功",
  "data": {
    "id": 123,
    "name": "iPhone 13 Pro Max",
    "category_id": 5, // 商品分类ID
    "category_name": "手机数码", // 可选，如果后端处理了关联查询，则返回商品分类的名称
    "brand_id": 20, // 商品品牌ID
    "brand_name": "Apple", // 可选，如果后端处理了关联查询，则返回商品品牌的名称
    "price": 9999.00,
    "description": "这是iPhone 13 Pro Max的详细描述",
    "specs": [
      {"key": "屏幕尺寸", "value": "6.7 英寸"},
      {"key": "处理器", "value": "A15 仿生芯片"},
      // 更多规格信息...
    ],
    "images": [
      {"url": "https://example.com/images/product_123_1.jpg"},
      {"url": "https://example.com/images/product_123_2.jpg"},
      // 更多图片链接...
    ],
    "reviews": [ // 可选，如果后端提供了商品评价功能，则返回部分或全部评价列表
      {
        "user_id": 456,
        "username": "小明",
        "rating": 5,
        "content": "非常喜欢这款手机，性能强大！",
        "created_at": "2022-01-01"
      },
      // 更多用户评价...
    ]
  }
}

接口分析：

  • 此接口主要用于根据商品ID获取特定商品的详细信息，包括商品的基本属性（如名称、价格、描述等）、商品规格参数、商品图片以及可选的商品评价等。
  • 请求通过路径参数直接指定商品ID，简单直观。
  • 响应体中的"data"字段包含了商品的所有详细信息。其中，商品规格以数组形式提供，每个元素为键值对；商品图片也是以数组形式提供，包含多个图片URL。
  • 若后端数据库设计支持关联查询，可以进一步提供商品所属分类和品牌的详细信息，提升用户体验。

前端应用可以通过此接口展示商品详情页面，包括商品基本信息、详细规格、图片轮播以及用户评价等内容。

11-cookie

Cookie是浏览器存储在用户计算机上的一小段文本信息，用于保存网站的一些状态信息。以下是一个关于设置和读取Cookie的JavaScript示例：

设置Cookie：

function setCookie(name, value, days) {
  var expires = "";
  
  if (days) {
    var date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    expires = "; expires=" + date.toUTCString();
  }

  document.cookie = name + "=" + (value || "") + expires + "; path=/";
}

// 使用示例：
setCookie('user_id', '123', 7); // 设置一个有效期为7天的cookie，键为'user_id'，值为'123'

读取Cookie：

function getCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');

  for (var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) === ' ') c = c.substring(1, c.length);
    if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
  }

  return null;
}

// 使用示例：
var userId = getCookie('user_id');
console.log(userId); // 输出从cookie中获取到的'user_id'对应的值

在这个例子中，setCookie函数用于设置一个名为’user_id’的Cookie，并为其设置一个有效期（以天为单位）。getCookie函数则负责从当前文档的所有Cookie中查找并返回指定名称（如’user_id’）的Cookie值。如果找不到匹配的Cookie，则返回null。

12-jsonp-1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   
    <script>
        // fetch("https://i.maoyan.com/api/mmdb/movie/v3/list/hot.json?ct=%E5%8C%97%E4%BA%AC&ci=1&channelId=4")
        // .then(res=>res.json())
        // .then(res=>{
        //     console.log(res)
        // })

        /*
          同源策略：同域名 同端口号 同协议
          不符合同源策略，浏览器为了安全，会阻止请求
        */

        /*
         解决：
          1.cors  由后端设置 ，Access-Control-Allow-Origin: *
          2. jsonp:前后端必须协作
        
        */
    </script>
</body>
</html>

13-jsonp-2

JSONP（JSON with Padding）是一种跨域数据交互协议，它利用了<script>标签的跨域能力。下面是一个简单的JSONP请求的例子：

假设有一个远程服务器端API，提供了支持JSONP格式的接口，并约定回调函数名称为handleResponse：

// 远程服务器提供的JSONP接口示例：http://example.com/api?callback=handleResponse

// 在本地网页中发起JSONP请求
function handleResponse(data) {
  // 这个函数会在远程服务器返回的数据执行时被调用
  console.log('Received data:', data);
}

// 创建一个动态脚本元素用于加载JSONP
var script = document.createElement('script');
script.src = 'http://example.com/api?callback=handleResponse';

// 添加到文档中以发起请求
document.head.appendChild(script);

// 当请求完成或者发生错误时，可以移除script元素
script.onload = function() {
  this.remove();
};
script.onerror = function() {
  console.error('JSONP request failed');
  this.remove();
};

在这个例子中：

  1. 我们定义了一个全局可访问的函数handleResponse，这个函数将在远程服务器响应时被调用并传入JSON数据作为参数。
  2. 然后创建一个新的<script>元素，并设置其src属性指向远程服务器的API地址，并带上查询字符串参数callback=handleResponse，这样服务器就会把返回的数据包裹在handleResponse函数调用中。
  3. 把这个<script>元素添加到DOM的head部分，浏览器会立即发起GET请求获取该URL的内容。
  4. 当请求成功完成后，handleResponse函数会被执行，显示接收到的数据；如果请求失败，则触发错误处理。

注意：实际使用中，由于安全性和现代浏览器对跨域策略CORS的支持增强，JSONP已经逐渐被淘汰，更多情况下推荐使用CORS进行跨域请求。

14-jsonp-案例

JSONP（JSON with Padding）是用于解决跨域数据请求的一种技术，由于浏览器的同源策略限制，普通AJAX请求无法直接向不同域名下的服务器发送请求获取数据。JSONP利用<script>标签不受同源策略限制的特点，通过动态创建脚本标签来加载跨域的数据。

以下是一个简单的JSONP实现案例：

前端调用JSONP示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSONP Example</title>
</head>
<body>

<script>
function handleResponse(data) {
    // JSONP回调函数，服务器返回时会调用这个函数，并将数据作为参数传递进来
    document.getElementById('result').innerHTML = '用户ID: ' + data.userId;
}

// 动态创建script标签并设置src属性以发起JSONP请求
var script = document.createElement('script');
script.src = 'https://api.example.com/data?callback=handleResponse';
document.head.appendChild(script);
</script>

<div id="result">等待加载数据...</div>

</body>
</html>

后端返回JSONP格式数据示例：

假设你有一个API位于https://api.example.com/data，当接收到带有callback参数的请求时，它会构造一个JavaScript调用来返回数据：

// 假设这是服务端响应的内容
handleResponse({
    "userId": "12345",
    "username": "exampleUser"
});

当上述HTML页面加载时，会创建一个新的<script>元素并将其指向API地址，同时指定回调函数为handleResponse。服务端在接收到请求后，会在响应中包含调用handleResponse函数并将数据作为参数的形式返回内容。浏览器解析这个返回的脚本时，实际上就是在执行handleResponse函数，并使用从服务器接收到的数据填充页面上的结果区域。

注意：现代Web开发中，随着CORS（Cross-Origin Resource Sharing）标准的广泛支持，JSONP已经逐渐被CORS替代，因为它存在安全性和可配置性方面的局限性。

15-再谈函数

当然，以下是一个JavaScript中函数定义和调用的基本例子：

// 定义一个简单的加法函数
function addNumbers(num1, num2) {
  return num1 + num2;
}

// 调用这个函数并打印结果
var sum = addNumbers(5, 7);
console.log(sum); // 输出：12

// 另一种函数定义方式 - 箭头函数
const subtractNumbers = (num1, num2) => num1 - num2;

// 调用箭头函数并打印结果
let difference = subtractNumbers(10, 3);
console.log(difference); // 输出：7

// 函数可以返回另一个函数，即高阶函数
function createMultiplier(factor) {
  return function(number) {
    return number * factor;
  };
}

// 创建一个乘以3的函数
var triple = createMultiplier(3);

// 调用新创建的函数并打印结果
console.log(triple(4)); // 输出：12

在这个例子中：

  • addNumbers函数接收两个参数，并返回它们的和。
  • subtractNumbers使用了箭头函数语法来实现减法操作。
  • createMultiplier是一个高阶函数，它接收一个因子作为参数，并返回一个新的函数。新函数接收一个数字作为参数，并返回该数字与传入createMultiplier的因子相乘的结果。在示例中我们创建了一个将输入值乘以3的函数triple。

16-闭包

闭包是一种特殊的函数，它能够记住并访问其自身作用域内的变量，即使在其外部定义的作用域中调用时也是如此。以下是一个JavaScript闭包的简单例子：

function counter() {
  let count = 0;

  // 返回一个内部函数
  return function incrementByOne() {
    count += 1;
    console.log('Current count:', count);
  };
}

// 创建一个计数器实例
var myCounter = counter();

// 调用内部函数来增加计数
myCounter(); // 输出：Current count: 1
myCounter(); // 输出：Current count: 2
myCounter(); // 输出：Current count: 3

// 创建另一个计数器实例（与上面的计数器是独立的）
var anotherCounter = counter();
anotherCounter(); // 输出：Current count: 1

// 原来的计数器不受影响
myCounter(); // 输出：Current count: 4

在这个例子中：

  • counter函数是一个外部函数，它创建了一个局部变量count并初始化为0。
  • 然后，counter函数返回了一个内部函数incrementByOne，这个内部函数可以访问和修改外部函数作用域中的count变量。
  • 当我们通过调用counter()创建新的计数器实例时（如myCounter和anotherCounter），它们各自保存了对count变量的引用，形成了闭包。
  • 每次调用这些计数器实例时，它们都会基于自己的count值进行递增操作，体现了闭包能保留对外部变量状态的记忆这一特性。

17-闭包的应用

闭包在JavaScript中的应用广泛，它可以用来维护函数内部变量的状态，即使函数已经执行完毕。以下是一个经典的闭包应用案例——计数器：

// 创建一个计数器生成器函数
function createCounter() {
  let count = 0; // 这个变量将被闭包所捕获

  // 返回一个匿名函数，它能够访问并修改count变量
  return function() {
    count += 1;
    return count;
  };
}

// 调用createCounter函数以创建两个独立的计数器实例
var counter1 = createCounter();
var counter2 = createCounter();

// 使用这两个计数器
console.log(counter1()); // 输出：1
console.log(counter1()); // 输出：2
console.log(counter2()); // 输出：1 （因为它有自己的count变量）
console.log(counter1()); // 输出：3
console.log(counter2()); // 输出：2

// 每次调用counter1或counter2时，它们都能记住自己的计数状态，这就是闭包的作用

在这个例子中，createCounter函数返回了一个内嵌函数（闭包），这个内嵌函数可以访问和修改外部作用域（即createCounter函数作用域）中的count变量。每次调用返回的闭包函数时，都会更新并返回这个共享的count变量，因此每个通过createCounter创建的计数器都有自己的独立计数状态。

最后求点赞，求分享，求抱抱…

JavaScript之Promise详解
mx_is_bang的博客
08-26 701
感觉之前对Promise的了解很浅，实际开发中也没有应用很多，最近在面试的过程中几乎是必问的问题，算是前端开发中的重点与难点，在b站学习了向军老师的关于Promise的讲解，也自己学习了一下资料，现在来做个总结。 Promise解决的痛点 ES6新增了promise作为异步编程的解决方案，在promise之前，我们使用回调函数来发送异步请求，回调函数的问题是当我们有很多请求，并且下一个请求要依赖上一个请求的结果，这样会导致我们的请求层层嵌套，使得代码非常臃肿，可读性差，容易产生bug导致所谓的回调地狱。 P
JavaScript之Promise对象
weixin_40589919的博客
02-16 916
Promise 对象是一个代理对象(代理一个值)，被代理的值在 Promise 对象创建时可能是未知的。它允许你为异步操作的成功和失败分别绑定相应的处理方法(handlers)。 这让异步方法可以像同步方法那样返回值，但并不是立即返回最终执行结果，而是一个能代表未来出现的结果的 Promise 对象。 Promise 对象有以下两个特点： 对象的状态不受外界影响。Promise 对...
Javascript基础之-Promise
qq_15697653的博客
12-25 467
Promise是什么呢？根据ecma-262的定义： Promise是一个被用于延时计算的最终结果的占位符 （A Promise is an object that is used as a placeholder for the eventual results of a deferred (and possibly asynchronous) computation.） 这个怎么理解呢 比如说...
深度分析Javascript中的Promise
最新发布
kennyharris
06-14 1152
项目内容说明Promise异步操作的封装对象，有状态转换控制状态变为成功或失败构造器立即执行传入的函数箭头函数语法，是一个函数表达式如果你想深入学习.then()链式调用、错误处理.catch()、并发控制（如）等内容，我也可以帮你继续拓展。是否需要？方法等待全部？返回什么？失败会怎样？是所有结果任一失败就失败否最快那个的结果最快失败就失败是所有状态和结果不会失败否第一个成功的值全失败时才报错如果你需要我帮你出一些练习题、面试题，或者你想手写模拟一个的实现，我也可以继续带你深入。
JavaScript Promise
weixin_34267123的博客
08-17 199
前言 假如需要向后端发送一个请求，并对返回的数据进行操作，可能我们第一时间想到的是回调函数。但如果接着又需要执行第二个、第三个...第n个异步操作，那么回调函数就会一层层的嵌套，严重影响了代码可读性和可维护性。 Promise就是解决这个问题的方案，Promise主要做的事情是把回调函数的嵌套逻辑替换成了符合正常人思维习惯的线性逻辑，本文...
JavaScript中的Promise
qq_45684708的博客
11-24 540
Promise创建: new Promise( function( resolve, reject ) {…} ); Promise通常用于处理异步操作或阻塞代码，例如API调用。 Var keepWord; keepWord = true; promise = new Promise( function( resolve, reject ) { if(keepWord) { resolve( “我做到了”); }else { Reject(“我没做到”) } } ); Console.lo
深入探索 JavaScript 中的 Promise：异步编程的未来
前端开发工程师
11-11 5713
在JavaScript的世界里，异步编程一直是核心主题之一。随着ES6（ECMAScript 2015）的引入，Promise 成为了处理异步操作的首选方案，逐渐取代了传统的回调函数和事件监听器。Promise 提供了一种更加优雅和简洁的方式来处理异步任务，使得代码更加易于理解和维护。
深入理解 JavaScript 的 Promise 与 async/await
bjzhang75的博客
08-27 1028
在 JavaScript 中，异步操作允许程序在等待某个任务完成时，继续执行其他代码，而不会阻塞主线程。这对于处理如网络请求、文件读写、定时器等耗时任务尤为重要。Promise 是一种用于处理异步操作的对象，它代表一个尚未完成但预计会在未来某个时间点完成的操作。Pending（待定） ：初始状态，操作尚未完成。Fulfilled（已完成） ：操作成功完成。Rejected（已拒绝） ：操作失败。在现代 JavaScript 开发中，异步编程至关重要。
JavaScript中Promise详解
分享前端工程化、动效魔法与性能之舞！
03-13 816
Promise 是 JavaScript 中处理异步操作的重要工具。它通过 .then() 和 .catch() 方法提供了更清晰的代码结构，避免了回调地狱。async/await 进一步简化了 Promise 的使用，使得异步代码看起来更像同步代码。掌握 Promise 的使用对于编写现代 JavaScript 应用程序至关重要。
javascript之promise
千霜的博客
05-13 671
promise相当于一个代理，表示一个异步操作成功或失败的结果，即使不能立马获得promise表示的值，但可以为promise附上成功或失败的回调函数。 例子 function myAsyncFunction(url) { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); ...
JavaScript——Promise
Corn___的博客
09-29 1886
JavaScript——Promise
简单理解JavaScript中的Promise
2403_87076697的博客
10-08 882
一篇文章轻松理解js中的Promise
JS中的Promise
gghhb12的博客
08-12 9858
Promise是异步编程的一种解决方案，他是一个对象，可以获取异步操作的消息，避免了回调地狱所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。Pending（进行中）Resolved（已完成）Rejected（已拒绝）
Javascript基础之Promise
weixin_53278262的博客
02-03 1094
各位小伙伴,又见面啦 ! 今天给大家讲讲promise吧 众所周知,回调函数噩梦(恐怖回调)，也被称为恶魔金字塔，指如ajax依赖调用时，回调函数会层层嵌套，而这种层层嵌套的写法，往往会让人难以理解，所以称之为噩梦。 例如：服务器中有3个txt文件，我们需要在html上，通过js中的异步的ajax，分别获取这3个文件的内容，假设这3个文件分别存储的数据为1、2、3，那么我希望在js中，能够求出1+2+3，把6输出。 var str = ""; $.ajax({ type: "get",
javascript中的Promise
lzq603的博客
12-06 271
Promise是ES6中新增的一个类，它可以使异步操作以更优雅的方式呈现。 Promise对象 以下代码新建了一个Promise对象，Promise对象一旦建立，其中的函数便立即执行。 new Promise(function(resolve, reject){ console.log("Hello"); }); 代码执行结果为： Hello resolve, reject resolve与reject都是函数参数，resolve是代码正常进行后执行的，会把参数传给then()中的函数并执行，rej
JavaScript之Promise
maxiaotengzhang的博客
06-02 842
什么是Promise? 一个 Promise 对象代表一个目前还不可用，但是在未来的某个时间点可以被解析的值。Promise表示一个异步操作的最终结果。 原生js promise 有兼容性问题。 jQuery1.5.0之后 封装的 deferred对象 （defer的意思是"延迟"）。简单说，deferred对象就是jQuery的回调函数解决方案。兼容所有主流浏览器。推荐大家了解一下JQquery的deffered对象详解。 ES6 Promise 对象，通过babel转码，也是可以兼容主流浏览器。
理解JavaScript中的Promise
"这篇资源主要介绍了JavaScript中的Promise概念及其应用，旨在帮助读者理解并掌握Promise在处理异步操作中的重要性。" 在JavaScript中，由于其单线程的执行机制，所有的任务都会按照顺序依次执行，这就导致了当涉及...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值