您现在的位置是：首页 > 前端会客厅 > web前端web前端
Promise详解示例
YU到边2023-03-09【web前端】人已围观
简介Promise详解示例
以下是一个简单的 Promise 示例，它返回一个随机数，并在一段时间后将该数字加倍：
function doubleAfterDelay(number) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(number * 2); }, Math.random() * 1000); }); } doubleAfterDelay(10) .then(result => { console.log(`The result is ${result}`); }) .catch(error => { console.error(`An error occurred: ${error}`); });
在这个示例中，doubleAfterDelay 函数返回一个 Promise 对象。这个 Promise 对象表示异步操作的结果，异步操作是在一定的延迟之后完成的。Promise 构造函数接受一个函数作为参数，这个函数又接受两个参数 resolve 和 reject，它们分别表示异步操作成功和失败时的回调函数。
在 doubleAfterDelay 函数中，我们使用 setTimeout 函数来模拟异步操作，通过 Math.random() 函数生成一个随机的延迟时间。当异步操作完成后，我们调用 resolve 函数，并将处理结果传递给它。
在使用 doubleAfterDelay 函数时，我们可以使用 then 方法来处理异步操作的结果。then 方法接受一个回调函数，该函数会在异步操作成功时被调用，并接收异步操作的结果作为参数。在这个示例中，我们将结果打印到控制台上。
如果异步操作失败，我们可以使用 catch 方法来处理错误。catch 方法接受一个回调函数，该函数会在异步操作失败时被调用，并接收一个错误对象作为参数。在这个示例中，我们将错误信息打印到控制台上。
// 模拟一个用户信息数据源 const users = [ { username: 'user1', password: 'password1' }, { username: 'user2', password: 'password2' }, { username: 'user3', password: 'password3' } ]; // 模拟登陆验证函数 function authenticateUser(username, password) { return new Promise((resolve, reject) => { // 使用 setTimeout 模拟异步操作 setTimeout(() => { const user = users.find(user => user.username === username && user.password === password); if (user) { resolve(user); } else { reject(new Error('Invalid username or password')); } }, 1000); }); } // 调用 authenticateUser 函数进行登陆验证 authenticateUser('user1', 'password1') .then(user => { console.log(`Welcome, ${user.username}!`); }) .catch(error => { console.error(error.message); });
在这个示例中，我们模拟了一个简单的登陆系统，包括一个用户信息数据源和一个登陆验证函数。
authenticateUser 函数接受一个用户名和密码作为参数，并返回一个 Promise 对象。在 Promise 构造函数中，我们使用 setTimeout 函数模拟异步操作，并在一定的时间后完成验证操作。如果验证成功，我们调用 resolve 函数并将用户信息作为参数传递给它。如果验证失败，我们调用 reject 函数并传递一个错误对象作为参数。
在主程序中，我们使用 authenticateUser 函数进行登陆验证。我们可以使用 then 方法来处理异步操作的成功结果。在这个示例中，我们将欢迎信息打印到控制台上。如果验证失败，我们可以使用 catch 方法来处理错误。在这个示例中，我们将错误信息打印到控制台上。
值得注意的是，这个示例中使用了 setTimeout 函数来模拟异步操作，这使得 authenticateUser 函数变成了一个异步函数。当我们调用 authenticateUser 函数时，它会立即返回一个 Promise 对象，而不是直接返回验证结果。因此，我们需要使用 then 方法来处理验证结果，或者使用 catch 方法来处理可能的错误。
Tags：
很赞哦！ ()
微信收款码
支付宝收款码