正文

掌握原生JS实现Promise：从基础用法到实战案例解析

/0 浏览量
0810

在JavaScript的世界里，Promise是一种用于异步编程的重要工具。它可以让异步操作更加清晰、简洁，并避免回调地狱的出现。本篇文章将从Promise的基础概念讲起，逐步深入到实战案例的解析，帮助读者全面掌握原生JS实现Promise。

一、Promise基础

1.1 什么是Promise？

Promise是一个对象，它代表一个异步操作的结果。这个结果可以是成功（resolved）或失败（rejected）。Promise对象允许你为异步操作的成功结果和失败结果注册处理函数。

1.2 Promise状态

Promise有三种状态：

  • pending：初始状态，既不是成功，也不是失败状态。
  • resolved：成功状态，表示异步操作成功完成。
  • rejected：失败状态，表示异步操作失败。

1.3 基础用法

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

new Promise((resolve, reject) => {
  // 模拟异步操作
  setTimeout(() => {
    const success = true; // 假设异步操作成功
    if (success) {
      resolve('异步操作成功');
    } else {
      reject('异步操作失败');
    }
  }, 1000);
})
.then(result => {
  console.log(result); // 输出：异步操作成功
})
.catch(error => {
  console.log(error); // 输出：异步操作失败
});

二、Promise进阶

2.1 then和catch方法

then方法用于处理Promise成功的回调，catch方法用于处理Promise失败的回调。

new Promise((resolve, reject) => {
  // 模拟异步操作
  setTimeout(() => {
    const success = true;
    if (success) {
      resolve('异步操作成功');
    } else {
      reject('异步操作失败');
    }
  }, 1000);
})
.then(result => {
  console.log(result);
})
.catch(error => {
  console.log(error);
});

2.2 Promise链式调用

Promise允许链式调用，这使得异步操作更加简洁。

new Promise((resolve, reject) => {
  resolve('第一层Promise');
})
.then(result => {
  return new Promise((resolve, reject) => {
    resolve(result + ' -> 第二层Promise');
  });
})
.then(result => {
  console.log(result);
});

2.3 Promise.all

Promise.all方法用于处理多个异步操作，当所有异步操作成功时，它返回一个结果数组。

Promise.all([promise1, promise2, promise3])
.then(results => {
  console.log(results); // 输出：[result1, result2, result3]
})
.catch(error => {
  console.log(error);
});

2.4 Promise.race

Promise.race方法用于处理多个异步操作，当任何一个异步操作成功时，它返回一个结果。

Promise.race([promise1, promise2, promise3])
.then(result => {
  console.log(result);
})
.catch(error => {
  console.log(error);
});

三、实战案例解析

3.1 AJAX请求

使用Promise实现AJAX请求，使代码更加简洁。

function fetchJSON(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onload = () => {
      if (xhr.status >= 200 && xhr.status < 300) {
        resolve(JSON.parse(xhr.responseText));
      } else {
        reject(new Error('请求失败'));
      }
    };
    xhr.onerror = () => reject(new Error('请求出错'));
    xhr.send();
  });
}

fetchJSON('https://api.example.com/data')
.then(data => {
  console.log(data);
})
.catch(error => {
  console.log(error);
});

3.2 图片懒加载

使用Promise实现图片懒加载，优化页面性能。

function lazyLoadImages() {
  const images = document.querySelectorAll('img.lazy-load');
  const promises = [];

  images.forEach(img => {
    const promise = new Promise((resolve, reject) => {
      img.src = img.dataset.src;
      img.onload = resolve;
      img.onerror = reject;
    });
    promises.push(promise);
  });

  Promise.all(promises)
    .then(() => {
      console.log('所有图片加载完成');
    })
    .catch(error => {
      console.log(error);
    });
}

通过以上内容，相信读者已经对原生JS实现Promise有了全面的了解。在实际开发中，熟练运用Promise可以提高代码的健壮性和可维护性。希望本文能对您有所帮助！

-- 展开阅读全文 --