前端

服务端

计算机基础

Promise 是一种用于延迟计算的策略，适用于多种并发风格：用于本地计算的线程和事件循环并发，以及同步和异步远程消息传递。Promise 代表一个异步操作的最终结果。使用 Promises 的主要方式是通过一个方法，该方法注册从 promise 的最终值或失败原因到新 promise 的转换。

Promise

在Promise中，`.catch()`方法和`.then()`的第二个参数都用于处理Promise中发生的错误或拒绝(rejection)情况，但它们之间存在几个关键的区别：

1. **范围的不同**：
   - `.catch()`能够捕获在Promise链中任何之前的错误，包括前面的`.then()`中发生的错误。
   - `.then()`的第二个参数仅捕获它直接之前的Promise中的错误。

2. **链式调用的影响**：
   - 使用`.catch()`处理错误时，如果`.catch()`里面没有再次抛出错误，Promise链会继续执行后续的`.then()`方法。
   - 使用`.then()`的第二个参数处理错误，处理完错误后还会继续执行该`.then()`后续的`.then()`方法，不过这种用法使得代码的错误处理部分和成功处理部分耦合度较高。

3. **代码清晰性**：
   - `.catch()`使得错误处理逻辑集中和明确，更易于管理和维护。
   - `.then()`的第二个参数虽然功能相似，但可能会使得代码阅读和维护起来较为混乱，因为成功逻辑和错误处理逻辑都包含在同一个方法内。

总的来说，推荐使用`.catch()`来进行错误处理，因为它能提供更清晰、更强大且易于管理的错误捕获机制。

在Promise中，使用catch和then的第二个参数有什么区别？

Promise、async/await 和 Callback 都是在 JavaScript 中处理异步操作的机制。每种技术都有其特点和适用场景。

### Callback

Callback 是一种较老的异步编程技术，它是将一个函数作为参数传递给另一个函数，并在那个函数执行完毕后调用。它最常见的用途是在进行文件操作或者请求网络资源时。

**优点：**

- 简单易懂，易于实现。

**缺点：**

- 容易导致 "回调地狱"（Callback Hell），即多个嵌套的回调函数使代码难以阅读和维护。
- 错误处理不方便，需要在每个回调中处理错误。

**例子：**

```javascript
fs.readFile('example.txt', 'utf8', function(err, data) {
    if (err) {
        return console.error(err);
    }
    console.log(data);
});
```

### Promise

Promise 是异步编程的一种解决方案，比传统的解决方案 —— 回调函数和事件 —— 更合理和更强大。它表示一个尚未完成但预期将来会完成的操作的结果。

**优点：**

- 提供了更好的错误处理机制，通过 `.then()` 和 `.catch()` 方法链。
- 避免了回调地狱，代码更加清晰和易于维护。
- 支持并行执行异步操作。

**缺点：**

- 代码仍然有些冗长。
- 可能不够直观，特别是对于新手。

**例子：**

```javascript
const promise = new Promise((resolve, reject) => {
    fs.readFile('example.txt', 'utf8', (err, data) => {
        if (err) {
            reject(err);
        } else {
            resolve(data);
        }
    });
});

promise.then(data => {
    console.log(data);
}).catch(err => {
    console.error(err);
});
```

### async/await

`async/await` 是建立在 Promise 上的语法糖，它允许我们以更同步的方式写异步代码。

**优点：**

- 代码更加简洁、直观。
- 更容易理解，特别是对于习惯了同步代码的开发者。
- 方便的错误处理，可以用传统的 `try/catch` 块。

**缺点：**

- 可能会导致性能问题，因为 `await` 会暂停函数的执行，直到 Promise 解决。
- 在某些情况下不够灵活，例如并行处理多个异步任务。

**例子：**

```javascript
async function readFileAsync() {
    try {
        const data = await fs.promises.readFile('example.txt', 'utf8');
        console.log(data);
    } catch (err) {
        console.error(err);
    }
}

readFileAsync();
```

总结来说，Callback 是最基本的异步处理形式，Promise 提供了更强大的控制能力和错误处理机制，而 async/await 是在 Promise 基础上提高代码可读性和减少样板代码的语法糖。


Promise 和 async/await 和 Callback 有什么区别？

Promise 实现链式调用主要依赖于其返回一个新的 Promise 对象的特性。

在 JavaScript 中，Promise 是一个处理异步操作的对象，可以在原调用位置以同步方式处理异步操作结果。

下面是 Promise 的链式调用的基本实现：

1. Promise 构造函数接收一个执行函数，执行函数接收两个参数：resolve 和 reject，分别用于异步操作成功与失败的情况。
2. 调用 Promise 对象的 `.then` 方法提供链式调用。`.then` 方法接收两个参数（都是可选的）：`onFulfilled` 和 `onRejected`，分别在 Promise 成功或失败时调用。`.then` 方法也返回一个 Promise 对象，以便进行链式调用。
3. 如果 `onFulfilled` 或 `onRejected` 返回一个值 x，运行 Promise 解决过程：[[Promise Resolution Procedure]](https://promisesaplus.com/#the-promise-resolution-procedure)。
4. 如果 `onFulfilled` 或 `onRejected` 抛出一个异常 e，`Promise.then` 的返回的 Promise 对象会被 reject 掉。
5. 如果 `onFulfilled` 不是函数且 promise1(前一个 promise) 成功执行，promise2(下一个 promise)成功处理 promise1 的 final state。
6. 如果 `onRejected` 不是函数且 promise1 失败，promise2 会拒绝 promise1 的原因。



以下是一个示例：

```javascript
new Promise(function(resolve, reject) {
  setTimeout(() => resolve(1), 1000); // 第一步：创建一个 Promise 并执行一个异步操作
}).then(function(result) { // 第二步：注册一个 onFulfilled 回调
  console.log(result); // 打印：1
  return result + 2;
}).then(function(result) { // 第三步：链式调用
  console.log(result); // 打印：3
  return result + 2;
}).then(function(result) {
  console.log(result); // 打印：5
  return result + 2;
});
```

在这个例子中，每个 `.then` 调用后都返回一个新的 Promise 对象，这个新的 Promise 对象会立即执行，并在执行完毕后调用下一个 `.then` 注册的回调。通过这种方式，我们可以以同步的方式处理异步的结果，而这就是 Promise 链式调用的本质。


Promise 是如何实现链式调用的？

### Ajax请求的串行实现

对于串行执行多个Ajax请求，我们通常需要确保一个请求完全完成后，再执行下一个请求。这可以通过链式调用`then`方法来实现，也就是在每个Promise对象的`then`方法中启动下一个Ajax请求。

```javascript
function ajaxRequest(url) {
    return new Promise((resolve, reject) => {
        // 这里是Ajax请求的代码，成功时调用resolve，失败时调用reject
        const xhr = new XMLHttpRequest();
        xhr.open('GET', url);
        xhr.onload = () => resolve(xhr.responseText);
        xhr.onerror = () => reject(xhr.statusText);
        xhr.send();
    });
}

const urls = ['/url1', '/url2', '/url3']; // 假设我们有多个请求需要串行处理

let promiseChain = Promise.resolve(); // 初始化一个已完成的Promise

urls.forEach(url => {
    promiseChain = promiseChain.then(() => ajaxRequest(url)).then(response => {
        console.log('请求完成:', response);
        // 这里可以处理每个请求的响应
    });
});

// 最后可以在所有请求都完成后执行一些操作
promiseChain.then(() => {
    console.log('所有请求都已串行完成。');
});
```

在这个例子中，每个请求仅在前一个请求的`then`方法中被调用，这确保了请求的串行执行。

### Ajax请求的并行实现

要并行执行多个Ajax请求，可以使用`Promise.all`方法。`Promise.all`接收一个Promise对象数组，等待所有的Promise对象都成功完成后，它将返回一个新的Promise，这个新Promise将解析为一个结果数组，数组中的每个结果对应于原Promise数组中的每个请求。

```javascript
function ajaxRequest(url) {
    return new Promise((resolve, reject) => {
        // 这里是Ajax请求的代码，成功时调用resolve，失败时调用reject
        const xhr = new XMLHttpRequest();
        xhr.open('GET', url);
        xhr.onload = () => resolve(xhr.responseText);
        xhr.onerror = () => reject(xhr.statusText);
        xhr.send();
    });
}

const urls = ['/url1', '/url2', '/url3']; // 假设我们有多个请求需要并行处理

const promises = urls.map(ajaxRequest); // 创建一个包含所有请求的Promise数组

Promise.all(promises).then(responses => {
    console.log('所有请求都已并行完成。');
    responses.forEach(response => {
        console.log('请求完成:', response);
        // 这里可以处理每个请求的响应
    });
}).catch(error => {
    // 如果任何一个请求失败，这里会捕获到错误
    console.error('请求失败:', error);
});
```

在这个例子中，`Promise.all`并行地处理所有的Ajax请求，并在所有请求成功完成后，按照请求的顺序输出响应结果。如果任何一个请求失败，`Promise.all`会立即拒绝，并返回第一个遇到的错误。

这两种方法是处理多个Ajax请求时常用的串行和并行模式。根据实际需求选择合适的方式。在实际面试中，可以根据面试官的要求提供更详细的代码实例或解释。

如何基于 Promise.all 实现Ajax请求的串行和并行？

在JavaScript中，`Promise` 对象是异步编程的一种解决方案。一个 `Promise` 在创建时处于 `pending`（等待）状态，可以通过其 `resolve` 方法转变为 `fulfilled`（成功）状态，或通过其 `reject` 方法转变为 `rejected`（失败）状态。

要实现 `Promise` 的 `resolve`，通常是在异步操作成功完成时调用。下面是一个简单的例子说明如何使用 `Promise` 的 `resolve` 方法：

```javascript
function asyncOperation() {
  // 创建一个新的Promise对象
  return new Promise((resolve, reject) => {
    // 执行异步操作
    setTimeout(() => {
      const operationWasSuccessful = true; // 假设这是基于异步操作结果的条件
      if (operationWasSuccessful) {
        resolve('Operation successful'); // 如果操作成功，调用resolve并传递结果
      } else {
        reject('Operation failed'); // 如果操作失败，调用reject并传递错误信息
      }
    }, 1000); // 假设这个异步操作需要1秒钟
  });
}

asyncOperation()
  .then(result => {
    console.log(result); // 打印成功结果
  })
  .catch(error => {
    console.error(error); // 打印错误信息
  });
```

在上述代码中，`asyncOperation` 函数返回一个新的 `Promise` 对象。在这个 `Promise` 的构造函数中，有两个参数：`resolve` 和 `reject`。这两个参数也是函数，它们被用来分别处理异步操作的成功和失败情况。在异步操作（这里使用 `setTimeout` 模拟）完成后，根据操作的结果调用 `resolve` 或 `reject`。

如果异步操作成功（在这个例子中，我们假设 `operationWasSuccessful` 为 `true`），则调用 `resolve` 函数并传递结果消息 `'Operation successful'`。这将使得 `Promise` 对象的状态变为 `fulfilled`，并将结果传递给随后的 `.then` 方法的回调函数。

如果异步操作失败，就调用 `reject` 函数并传递错误消息 `'Operation failed'`。这将使得 `Promise` 对象状态变为 `rejected`，并将错误信息传递给随后的 `.catch` 方法的回调函数。

Promise面试题手册

在Promise中，使用catch和then的第二个参数有什么区别？

Promise 和 async/await 和 Callback 有什么区别？

Promise 是如何实现链式调用的？

如何基于 Promise.all 实现Ajax请求的串行和并行？

如何实现Promise的resolve？