new Promise()以及其参数

一时失言乱红尘 2024-03-17 21:57 52阅读 0赞

### 前言 ###

阅读vue-element-admin-4.2.1的代码时，记录一下js的方法。

### 1、new Promise() ###

`new Promise(回调函数)` 是JavaScript中创建一个Promise对象的方式。Promise是用于处理异步操作的一种机制，它代表了一个尚未完成但最终会完成或失败的操作。

具体使用方式可以是：

// new Promise(回调函数)，这里的(resolve, reject)就是Promise的回调函数
    const promise = new Promise((resolve, reject) => {
        
      // 在这里执行异步操作
      ...
      if (异步操作出现错误) {
        
        // 如果出现错误，调用 reject 函数，并传递错误原因作为参数
        reject(new Error('错误原因'));
      } else {
        
        // 如果操作成功，调用 resolve 函数，并传递操作结果作为参数
        resolve({
        
       		操作结果
       	});
      }
    });
    
    // 对Promise对象进行后续处理
    promise.then(result => {
        
      // 处理操作成功的情况，result为操作成功的结果
    }).catch(error => {
        
      // 处理操作失败的情况，error为发生的错误
    });

可以使用 `then` 方法来处理 `resolve` 函数传递的结果，也可以使用 `catch` 方法处理可能出现的错误情况。

注意：resolve和reject都是一个函数

#### 1.1、resolve函数 ####

`resolve`函数是 Promise 对象的一个方法，它用于将 Promise 对象的状态从等待（pending）变为已完成（fulfilled）并传递一个值作为操作的结果。

#### 1.2、reject函数 ####

`reject`函数是 Promise 对象的一个方法，它用于将 Promise 对象的状态从等待（pending）变为已拒绝（rejected）并传递一个值作为操作的错误原因。

#### 1.3、注意 ####

在异步操作完成后调用 `resolve` 或 `reject` 函数之前，Promise 对象会一直保持为等待状态。

### 2、✨new Promise((resolve, reject) => \{\})和new Promise(resolve => \{\})区别是什么✨ ###

他们的区别主要在于回调函数的**参数个数**和**使用方式**。

#### 2.1、new Promise((resolve, reject) => \{\}) ####

这种形式的回调函数接收两个参数 `resolve` 和 `reject`。它表示 Promise 对象可能包含异步操作或可能被拒绝。在回调函数中，可以根据异步结果使用 `resolve` 函数将 Promise 对象状态设置为已解决（fulfilled），或使用 `reject` 函数将 Promise 对象状态设置为已拒绝（rejected），并传递一个错误原因。

具体用法：和上面代码一样。

#### 2.2、new Promise(resolve => \{\}) ####

这种形式的回调函数只接收一个参数 `resolve`。它表示的是一个立即完成（immediately fulfilled）的 Promise 对象，即执行该回调函数后**立即完成**（即同步操作）并设置状态为已解决（fulfilled）。这种情况下，无法处理异步操作或拒绝状态（rejected）。

*  这里进一步解释一下无法处理异步操作：  
    这种形式的 Promise 对象无法处理异步操作，因为它在创建后立即完成，并在同步上下文中执行回调函数。这意味着，如果在回调函数中使用异步操作（如使用定时器、进行网络请求等），Promise 对象已经完成了并且无法等待异步操作的结果。这可能导致在获取到异步操作结果之前，返回的 Promise 对象状态为已解决（fulfilled）且不包含实际的异步操作结果。

// Promise 对象可能包含异步操作或可能被拒绝
    const promise1 = new Promise((resolve, reject) => {
        
      // 异步操作
      if (异步操作出现错误) {
        
        reject(new Error('错误原因')); // 设置状态为已拒绝，并传递错误原因
      } else {
        
        resolve({
        操作结果}); // 设置状态为已解决
      }
    });
    
    // Promise 对象是立即解决的形式
    const promise2 = new Promise(resolve => {
        
      resolve(操作结果); // 立即完成并设置状态为已解决
    });

### 3、问题 ###

*  `new Promise(resolve => {})`无法异步，那跟普通的方法区别在那里？

与普通的方法相比，`new Promise(resolve => {})` 的主要区别在于它返回的是一个 Promise 对象，而不是一个直接返回结果的函数。

虽然 `new Promise(resolve => {})` 本身无法处理异步操作，但可以结合异步操作使用。例如，在异步操作中执行一些其他同步操作，然后在异步操作完成后，调用 `resolve` 函数将 Promise 对象的状态设置为已解决。这样，在后续调用 Promise 对象时，可以使用 `then` 方法获取到解决后的结果。

补充：在使用普通方法时，可以直接在函数中执行异步操作，并在异步操作完成后，通过回调函数将结果传递给调用方。

总的说，这样做的目的可能是为了允许使用 `.then` 方法链式调用，以便 使用`new Promise(resolve => {})`的方法完成后 可以进一步的处理，即使它不是真正的异步操作。