浅谈promise属性与方法

admin 2023-10-30 573 阅读 0评论

promise属性与方法

• 实例

• 如何手动写一个promise

• 案例一
• 案例二

• promise vs fetech

• Promise主要用于解决异步回调嵌套的问题
• Fetch是一个现代的、功能强大的用于浏览器和Node.js中的原生函数
• 举例

promise属性与方法

JavaScript中的Promise是处理异步操作的一种机制。

它具有以下几个主要的属性和方法：

1. Promise.prototype.then(onFulfilled, onRejected)：该方法将在Promise对象成功（状态为fulfilled）时调用onFulfilled回调函数，在Promise对象失败（状态为rejected）时调用onRejected回调函数。它返回一个新的Promise对象，可以链式调用多个then方法。
2. Promise.prototype.catch(onRejected)：该方法用于捕获Promise对象的错误（即状态为rejected），相当于.then(null, onRejected)。它也返回一个新的Promise对象，可以继续链式调用。
3. Promise.prototype.finally(onFinally)：该方法在Promise对象无论是成功还是失败后都会执行指定的回调函数onFinally。它返回一个新的Promise对象，可以继续链式调用。
4. Promise.resolve(value)：该方法返回一个已解决（状态为fulfilled）的Promise对象，并可选地传入一个值作为解决结果。
5. Promise.reject(reason)：该方法返回一个已拒绝（状态为rejected）的Promise对象，通常用于显式地声明一个操作失败的情况，并可选地传入一个原因（错误信息）。
6. Promise.all(iterable)：该方法接收一个可迭代对象（如数组或类数组对象）作为参数，返回一个新的Promise对象。只有在所有输入的Promise对象都被解决（fulfilled）时，新的Promise才会被解决，并以一个数组作为结果值，包含了所有输入Promise的解决结果。
7. Promise.race(iterable)：该方法与Promise.all()类似，接收一个可迭代对象作为参数，但它只要有一个Promise对象被解决（fulfilled）或拒绝（rejected），新的Promise就会被解决或拒绝，并以该Promise的解决结果或拒绝原因作为自己的解决结果或拒绝原因。

这些是Promise对象的一些常用属性和方法，它们可以帮助我们更好地处理异步操作，避免回调地狱并提高代码的可读性。

实例

除了上述提到的常用属性和方法之外，Promise对象还有一些其他的属性和方法。

以下是一些示例：

1. Promise.prototype.catch(onRejected)：该方法用于捕获Promise对象的错误（即状态为rejected），相当于.then(null, onRejected)。它也返回一个新的Promise对象，可以继续链式调用。

示例：

function fetchData() {
  return new Promise((resolve, reject) => {
    // 模拟异步操作
    setTimeout(() => {
      const error = true; // 假设发生错误
      if (error) {
        reject("Error: 数据获取失败");
      } else {
        resolve("数据获取成功");
      }
    }, 1000);
  });
}

fetchData()
  .then(data => {
    console.log(data); // 数据获取成功
  })
  .catch(error => {
    console.error(error); // Error: 数据获取失败
  });

1. Promise.prototype.finally(onFinally)：该方法在Promise对象无论是成功还是失败后都会执行指定的回调函数onFinally。它返回一个新的Promise对象，可以继续链式调用。

示例：

function fetchData() {
  return new Promise((resolve, reject) => {
    // 模拟异步操作
    setTimeout(() => {
      resolve("数据获取成功");
    }, 1000);
  });
}

fetchData()
  .then(data => {
    console.log(data); // 数据获取成功
  })
  .finally(() => {
    console.log("请求结束"); // 请求结束
  });

1. Promise.resolve(value)：该方法返回一个已解决（状态为fulfilled）的Promise对象，并可选地传入一个值作为解决结果。

示例：

const promise = Promise.resolve("解决结果");
promise.then(data => {
  console.log(data); // 解决结果
});

1. Promise.reject(reason)：该方法返回一个已拒绝（状态为rejected）的Promise对象，通常用于显式地声明一个操作失败的情况，并可选地传入一个原因（错误信息）。

示例：

const promise = Promise.reject("拒绝原因");
promise.catch(error => {
  console.error(error); // 拒绝原因
});

这些是Promise对象的一些常用属性和方法的示例。它们可以用于处理异步操作的状态和结果，并提供了更好的控制流程和错误处理的方式。

如何手动写一个promise

案例一

要写一个简单的Promise函数，你需要了解Promise的基本概念和语法。

Promise是一种异步编程的方式，它返回一个表示未来会得到的值的对象。

Promise有三种状态：pending（等待中）、fulfilled（已实现）和rejected（已拒绝）。

下面是一个简单的Promise函数的示例：

function myPromise() {
  return new Promise((resolve, reject) => {
    // 异步操作
    setTimeout(() => {
      // 成功处理
      resolve("Promise Fulfilled!");
      // 失败处理
      // reject("Promise Rejected!");
    }, 1000);
  });
}

在这个示例中，我们定义了一个名为myPromise的函数，它返回一个新的Promise对象。

在Promise的构造函数中，我们传递了两个参数：resolve和reject，它们是两个函数，用于处理Promise的成功和失败结果。

在示例中，我们使用setTimeout来模拟异步操作。

在1秒后，我们调用resolve函数，传入一个表示成功结果的字符串。

如果你想模拟失败的情况，你可以调用reject函数，传入一个表示失败原因的字符串。

你可以通过调用myPromise函数来使用这个Promise：

myPromise().then(result => {
  console.log(result); // 输出 "Promise Fulfilled!"
}).catch(error => {
  console.log(error); // 如果失败，会输出 "Promise Rejected!"
});

这里我们使用了then和catch方法来处理Promise的结果。

then方法用于处理Promise的成功结果，它接受一个回调函数作为参数，并在Promise成功时调用该函数，并将成功结果作为参数传递给回调函数。

catch方法用于处理Promise的失败结果，它接受一个回调函数作为参数，并在Promise失败时调用该函数，并将失败原因作为参数传递给回调函数。

你可以根据需要进行修改和扩展。

案例二

要手动写一个Promise，需要遵循Promise的规范和API，包括then、catch和finally方法，以及Promise的状态（pending、fulfilled和rejected）。

以下是一个基本的Promise实现：

function MyPromise(executor) {
  let self = this;
  self.status = 'pending';
  self.value = undefined;
  self.reason = undefined;
  self.onFulfilledCallbacks = [];
  self.onRejectedCallbacks = [];

  function resolve(value) {
    if (self.status === 'pending') {
      self.status = 'fulfilled';
      self.value = value;
      self.onFulfilledCallbacks.forEach(callback => callback(value));
    }
  }

  function reject(reason) {
    if (self.status === 'pending') {
      self.status = 'rejected';
      self.reason = reason;
      self.onRejectedCallbacks.forEach(callback => callback(reason));
    }
  }

  try {
    executor(resolve, reject);
  } catch (error) {
    reject(error);
  }
}

MyPromise.prototype.then = function (onFulfilled, onRejected) {
  if (this.status === 'fulfilled') {
    onFulfilled(this.value);
  } else if (this.status === 'rejected') {
    onRejected(this.reason);
  } else {
    this.onFulfilledCallbacks.push(onFulfilled);
    this.onRejectedCallbacks.push(onRejected);
  }
};

MyPromise.prototype.catch = function (onRejected) {
  this.then(undefined, onRejected);
};

MyPromise.prototype.finally = function (callback) {
  this.then(value => callback().then(() => value), reason => callback().then(() => { throw reason }));
};

这个简单的实现包括了一个构造函数MyPromise和一个原型对象MyPromise.prototype。

构造函数接受一个执行器函数作为参数，并在内部创建一个Promise对象，设置初始状态和回调数组。

然后，它调用执行器函数，将resolve和reject函数作为参数传递。如果执行器函数抛出错误，则调用reject函数。

原型对象上定义了三个方法：then、catch和finally。

then方法接受两个参数：onFulfilled和onRejected回调函数。

如果Promise已经处于fulfilled状态，则调用onFulfilled回调函数并传递值。

如果Promise已经处于rejected状态，则调用onRejected回调函数并传递原因。否则，将回调函数添加到相应的回调数组中。

catch方法是then方法的特例，它只接受一个onRejected回调函数作为参数。

finally方法接受一个回调函数作为参数，并在Promise处于fulfilled或rejected状态时调用该回调函数。

在回调函数中，我们可以执行一些清理操作或处理错误。

promise vs fetch

Promise和fetch都是用于处理异步请求的JavaScript技术，但它们的使用方式和目的略有不同。

Promise主要用于解决异步回调嵌套的问题

当多个异步请求之间存在依赖关系，即一个请求必须使用另一个请求返回的结果时，可以将这个请求嵌套在另一个请求的回调函数上，以使用另一个请求的结果来发送这个请求。

Promise的思路是将异步请求作为一个对象，将执行成功和失败作为这个对象的方法，执行成功的时候将结果放到这个对象的then方法中处理后续的逻辑，失败调用catch方法。

这样调用它就避免了回调函数的嵌套。

使用场景: 主要用于保证多个异步请求都完成以后，再进行后续的业务。

Fetch是一个现代的、功能强大的用于浏览器和Node.js中的原生函数

Fetch不仅可以用于发起HTTP请求，还可以处理响应。

Fetch 返回的是一个Promise对象，可以使用then和catch方法来处理请求的结果。

Fetch使用起来更方便、更简洁、更易于理解，并且支持取消请求、获取请求的进度信息等。

Fetch相对于传统的XMLHttpRequest和Ajax，有以下优点：

1. 强大的功能：Fetch可以发起任何类型的HTTP请求（GET、POST、PUT、DELETE等），并且可以处理各种类型的响应（包括JSON、text、blob等）。
2. Promise化：Fetch返回的是一个Promise对象，可以使用then和catch方法来处理请求的结果，使得异步处理更加简单和统一。
3. 简化了解：Fetch的API比XMLHttpRequest和Ajax更简洁、更易于理解。
4. 支持取消请求：Fetch支持取消请求，可以通过调用Fetch的AbortController接口来实现。
5. 进度信息：Fetch支持获取请求的进度信息，可以通过调用Response对象的body.getReader()方法来实现。

Promise和fetch都是用于处理异步请求的技术，但它们的使用方式和目的略有不同。

Promise主要用于解决异步回调嵌套的问题，而fetch则是一个功能强大的原生函数，可以发起任何类型的HTTP请求并处理响应。

举例

这里举一个简单的例子来比较Promise和fetch的使用。

假设我们需要向一个API发送一个GET请求，获取一个用户的个人信息，包括姓名和年龄。

以下是使用Promise和fetch的两种实现方式：

使用Promise：

function getUserInfo() {
  return new Promise((resolve, reject) => {
    axios.get('https://api.example.com/user')
      .then(response => {
        resolve(response.data);
      })
      .catch(error => {
        reject(error);
      });
  });
}

getUserInfo().then(userInfo => {
  console.log(userInfo);
}).catch(error => {
  console.error(error);
});

使用fetch：

fetch('https://api.example.com/user')
  .then(response => response.json())
  .then(userInfo => {
    console.log(userInfo);
  })
  .catch(error => {
    console.error(error);
  });