Promise的使用场景：图片上传

前端

2023-09-17 20:53:04

Promise简介

Promise是JavaScript中用于处理异步编程的一种对象。它可以让你将异步操作的结果传递给其他函数，而无需使用回调函数。这使得你的代码更加清晰易懂，也更容易维护。

Promise有三种状态：

Pending： 这是Promise的初始状态，表示异步操作尚未完成。
Fulfilled： 异步操作已成功完成，Promise的结果可用。
Rejected： 异步操作已失败，Promise的结果不可用。

Promise在图片上传中的应用

图片上传是一个典型的异步操作，因为你需要等待服务器接收并处理图片数据。在传统的方法中，你会使用回调函数来处理图片上传的结果。但是，使用Promise可以使你的代码更加清晰易懂。

以下是如何在图片上传中使用Promise的示例：

const uploadImage = (file) => {
  return new Promise((resolve, reject) => {
    const formData = new FormData();
    formData.append("image", file);

    const xhr = new XMLHttpRequest();
    xhr.open("POST", "/upload");
    xhr.send(formData);

    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(xhr.response);
      } else {
        reject(xhr.statusText);
      }
    };

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

uploadImage(file).then((response) => {
  console.log("Image uploaded successfully");
}, (error) => {
  console.log("Image upload failed");
});