JavaScript的Promise

阿龍HL

于 2024-03-08 09:15:00 发布

阅读量836

点赞数 13

分类专栏： JavaScript基础整理文章标签： javascript 开发语言 ecmascript 前端

本文链接：https://blog.csdn.net/m0_61841474/article/details/136544618

版权

JavaScript基础整理专栏收录该内容

27 篇文章 0 订阅

订阅专栏

本文详细介绍了JavaScript中的Promise对象，包括其作用、状态转换、基本语法，以及如何使用then()和catch()方法处理异步结果。此外，展示了如何封装接口请求、图片加载和视频加载，以及Promise在其他异步场景的应用，如定时器、文件读取、动画控制和数据库操作等。

摘要由CSDN通过智能技术生成

在JavaScript中，Promise是一种用于处理异步操作的对象，它代表了一个异步操作的最终完成或失败，以及其结果值。使用Promise可以更优雅地处理异步操作，避免回调地狱（Callback Hell），提高代码的可读性和可维护性。

Promise具有三种状态：

Pending（进行中）：初始状态，表示异步操作正在进行中。
Fulfilled（已成功）：表示异步操作已成功完成，并且有一个返回值。
Rejected（已失败）：表示异步操作出现错误或失败。

创建一个Promise对象的基本语法是：

const myPromise = new Promise((resolve, reject) => {
    // 执行异步操作，如网络请求，定时器等

    // 异步操作成功，则调用resolve并传递结果值
    resolve("操作成功");

    // 异步操作失败，则调用reject并传递错误信息
    reject("操作失败");
});

使用Promise的then()方法来处理Promise的状态变化，当Promise状态为Fulfilled时，可以通过then()方法的第一个参数处理成功的情况，当Promise状态为Rejected时，可以通过then()方法的第二个参数处理失败的情况。示例如下：

myPromise.then((result) => {
    console.log("成功：" + result);
}).catch((error) => {
    console.log("失败：" + error);
});

除了then()和catch()方法外，Promise还提供了其他方法，如：

Promise.all()：接收一个Promise数组，并在所有Promise都解决后返回一个新的Promise。
Promise.race()：接收一个Promise数组，并在第一个解决或拒绝的Promise之后立即返回一个新的Promise。

使用Promise可以简化异步操作的处理流程，避免回调嵌套，提高代码的可读性。在现代Web开发中，Promise已经成为处理异步操作的标准之一，被广泛应用于各种场景中。

使用Promise对JavaScript的接口请求进行方法封装

使用Promise对JavaScript的接口请求进行方法封装是一种常见且优雅的做法。通过封装，可以让代码更加模块化和易于维护，同时提高代码的复用性。

以下是一个简单的示例，展示如何使用Promise对JavaScript的接口请求进行方法封装：

function fetchData(url) {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.onreadystatechange = function() {
            if (xhr.readyState === XMLHttpRequest.DONE) {
                if (xhr.status === 200) {
                    resolve(JSON.parse(xhr.responseText));
                } else {
                    reject("接口请求失败");
                }
            }
        };
        xhr.send();
    });
}

// 使用封装的方法发起接口请求
fetchData('https://api.example.com/data')
    .then((data) => {
        console.log("接口请求成功，获取的数据为：", data);
    })
    .catch((error) => {
        console.error("接口请求失败：", error);
    });

在上面的示例中，fetchData函数用来封装接口请求逻辑，返回一个Promise对象。当接口请求成功时，调用resolve方法并传递接口返回的数据；当接口请求失败时，调用reject方法并传递错误信息。接着使用.then()方法处理成功的情况，使用.catch()方法处理失败的情况。

通过这种方法封装，可以更好地进行错误处理、状态管理，并且使代码具有更好的可读性。在实际项目中，可以将接口请求的相关逻辑集中到一个函数或模块中，以提高代码的可维护性和重用性。

使用Promise来对视频加载和图片加载进行判断

可以使用Promise来对视频加载和图片加载进行判断。通过封装视频加载和图片加载的过程为Promise对象，可以方便地处理加载成功和加载失败的情况。

以下是一个示例代码，演示如何使用Promise来对视频加载和图片加载进行判断：

// 封装视频加载为Promise对象
function loadVideo(videoUrl) {
    return new Promise((resolve, reject) => {
        const video = document.createElement('video');
        video.src = videoUrl;

        video.onloadeddata = function() {
            resolve('视频加载成功');
        };

        video.onerror = function() {
            reject('视频加载失败');
        };

        video.load();
    });
}

// 封装图片加载为Promise对象
function loadImage(imageUrl) {
    return new Promise((resolve, reject) => {
        const image = new Image();
        image.src = imageUrl;

        image.onload = function() {
            resolve('图片加载成功');
        };

        image.onerror = function() {
            reject('图片加载失败');
        };
    });
}

// 使用封装的方法加载视频和图片
loadVideo('video.mp4')
    .then((message) => {
        console.log(message);
    })
    .catch((error) => {
        console.error(error);
    });

loadImage('image.jpg')
    .then((message) => {
        console.log(message);
    })
    .catch((error) => {
        console.error(error);
    });

在上面的示例中，loadVideo函数和loadImage函数分别封装了视频加载和图片加载的过程为Promise对象。当视频或图片加载成功时，调用resolve方法并传递成功的消息；当加载失败时，调用reject方法并传递错误信息。然后通过.then()方法处理成功的情况，通过.catch()方法处理失败的情况。

通过使用Promise对视频加载和图片加载进行判断，我们可以更好地处理加载过程中可能出现的错误，并且能够以一种模块化、可复用的方式来管理加载过程。

除了在接口请求、图片加载和视频加载方面，Promise还可以在许多其他场景中发挥作用，更好地处理异步操作。以下是一些常见的使用场景：

定时器：

Promise可以用于封装定时器的异步操作，以便更灵活地处理定时任务的完成情况。

function delay(timeout) {
  return new Promise((resolve) => {
    setTimeout(resolve, timeout);
  });
}

delay(2000).then(() => {
  console.log("2秒后执行的操作");
});

文件读取：

在Web开发中，可以利用Promise对文件读取操作进行封装，处理文件读取的异步过程。

function readFile(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => {
      resolve(reader.result);
    };
    reader.onerror = reject;
    reader.readAsText(file);
  });
}

// 使用示例
const fileInput = document.getElementById("file-input");

fileInput.addEventListener("change", () => {
  const file = fileInput.files[0];

  if (file) {
    readFile(file)
      .then((content) => {
        console.log("读取到的文件内容：", content);
      })
      .catch((error) => {
        console.error("文件读取失败：", error);
      });
  } else {
    console.log("没有选择文件");
  }
});

动画控制：

通过Promise可以更好地管理动画的异步处理，例如等待动画完成后执行下一步操作。

function animate(element, animationClass) {
  return new Promise((resolve) => {
    element.classList.add(animationClass);
    element.addEventListener("animationend", resolve, {once: true});
  });
}

// 使用示例
const box = document.getElementById("box");

animate(box, "fade-in")
  .then(() => {
    console.log("淡入动画完成");
    return animate(box, "fade-out");
  })
  .then(() => {
    console.log("淡出动画完成");
  });

表单验证：

对表单提交进行验证时，可以使用Promise来处理异步验证逻辑，例如检查用户名是否已存在。

function checkUsername(username) {
  return new Promise((resolve, reject) => {
    // 模拟异步请求
    setTimeout(() => {
      if (username === "admin") {
        reject("用户名已存在");
      } else {
        resolve("用户名可用");
      }
    }, 2000);
  });
}

// 使用示例
const form = document.getElementById("form");
const usernameInput = document.getElementById("username-input");

form.addEventListener("submit", (event) => {
  event.preventDefault();
  const username = usernameInput.value;

  checkUsername(username)
    .then((message) => {
      console.log(message);
    })
    .catch((error) => {
      console.error(error);
    });
});

地理位置获取：

当需要获取用户的地理位置信息时，可以使用Promise来包装地理位置获取的异步操作。

function getCurrentLocation() {
  return new Promise((resolve, reject) => {
    if ("geolocation" in navigator) {
      navigator.geolocation.getCurrentPosition(
        (position) => {
          resolve(position.coords);
        },
        (error) => {
          reject("无法获取地理位置：" + error.message);
        }
      );
    } else {
      reject("不支持地理位置");
    }
  });
}

// 使用示例
getCurrentLocation()
  .then((coords) => {
    console.log("纬度：" + coords.latitude);
    console.log("经度：" + coords.longitude);
  })
  .catch((error) => {
    console.error(error);
  });

数据库操作：

在使用WebSQL、IndexedDB等客户端数据库进行操作时，Promise能够更好地处理异步的数据库读写过程。

function executeSQL(db, sql, params) {
  return new Promise((resolve, reject) => {
    db.transaction((tx) => {
      tx.executeSql(
        sql,
        params,
        (_, { rows }) => {
          resolve(rows);
        },
        (_, error) => {
          reject("数据库操作失败：" + error.message);
        }
      );
    });
  });
}

// 使用示例
const db = openDatabase("mydb", "1.0", "My Database", 1024 * 1024);
const sql = "SELECT * FROM users";

executeSQL(db, sql, [])
  .then((rows) => {
    console.log("获取到的数据：", rows);
  })
  .catch((error) => {
    console.error(error);
  });

动态加载资源：

在需要动态加载JavaScript、CSS等资源时，可以使用Promise来管理资源加载过程。

function loadScript(url) {
  return new Promise((resolve, reject) => {
    const script = document.createElement("script");
    script.src = url;
    script.onload = resolve;
    script.onerror = reject;
    document.head.appendChild(script);
  });
}

// 使用示例
loadScript("https://example.com/script.js")
  .then(() => {
    console.log("脚本加载成功");
  })
  .catch(() => {
    console.error("脚本加载失败");
  });

WebSocket通信：

在使用WebSocket进行实时通信时，Promise可以用于封装WebSocket的异步操作。

function connectWebSocket(url) {
  return new Promise((resolve, reject) => {
    const ws = new WebSocket(url);

    ws.onopen = () => {
      resolve(ws);
    };

    ws.onerror = (error) => {
      reject("WebSocket连接失败：" + error.message);
    };
  });
}

// 使用示例
connectWebSocket("wss://example.com/socket")
  .then((ws) => {
    console.log("WebSocket已连接");
    
    ws.onmessage = (event) => {
      console.log("收到消息：" + event.data);
    };
    
    ws.send("Hello!");
  })
  .catch((error) => {
    console.error(error);
  });