当前位置：首页 > article >正文

vue Promise使用

article 2024/12/29 10:36:34

new Promise((resolve, reject) => { ... }) 是 JavaScript 中创建 Promise 实例的语法。Promise 是一种用于处理异步操作的对象，它代表了一个异步操作的最终完成（或失败）及其结果值。

Promise 的基本结构

const myPromise = new Promise((resolve, reject) => {
  // 异步操作的代码放在这里
  // 如果操作成功，调用 resolve(value)
  // 如果操作失败，调用 reject(error)
});

resolve(value)：当异步操作成功时调用，传递给它的参数将成为 then 方法中成功的回调函数的参数。
reject(error)：当异步操作失败时调用，传递给它的参数将成为 catch 方法中错误处理函数的参数。

示例：模拟一个简单的异步操作

假设我们有一个需要等待 2 秒后返回结果的操作：

const delayedResult = new Promise((resolve, reject) => {
  setTimeout(() => {
    const success = true; // 假设这个条件决定操作是否成功

    if (success) {
      resolve('Operation succeeded!');
    } else {
      reject('Operation failed.');
    }
  }, 2000); // 模拟2秒延迟
});

// 使用 then 和 catch 来处理 Promise 的结果
delayedResult
  .then(result => console.log(result)) // 处理成功的回调
  .catch(error => console.error(error)); // 处理失败的回调

在这个例子中，delayedResult 是一个 Promise，它会在 2 秒后要么被 resolve 要么被 reject。根据 success 变量的值，它会调用相应的函数并传递相应的消息作为参数。

Promise 链式调用

你可以将多个 .then() 方法链接起来，以顺序执行一系列异步操作。每个 .then() 方法都可以返回一个新的 Promise，从而形成一个链。

const promiseChain = () => new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('First step');
  }, 1000);
})
.then(result => {
  console.log(result);
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Second step');
    }, 1000);
  });
})
.then(result => {
  console.log(result);
  return 'Third step';
})
.then(result => console.log(result))
.catch(error => console.error(error));

使用 `async/await` 简化 Promise 处理

ES2017 引入了 async 和 await 关键字，使处理 Promise 更加直观和简洁。使用 async/await，你可以像同步代码一样编写异步代码。

async function asyncExample() {
  try {
    console.log('Starting...');
    
    const result = await delayedResult;
    console.log(result); // 输出: Operation succeeded!

    console.log('Finished.');
  } catch (error) {
    console.error(error);
  }
}

asyncExample();

在这个例子中，await 关键字暂停了函数的执行，直到 delayedResult Promise 被解决。如果 Promise 被拒绝，则会抛出异常，并由 catch 块捕获。