9. Promise 和 Fetch API

1. 什么是 Promise

Promise 是 JavaScript 中处理异步操作的一种对象，它代表了一个异步操作的最终完成（或失败）及其结果值。Promise 主要有三种状态：

• Pending（进行中）： 初始状态。
• Fulfilled（已成功）： 操作成功完成。
• Rejected（已失败）： 操作失败。

Promise 构造函数接受一个执行器函数，该函数接收两个参数，即 resolve 和 reject，分别用于异步操作成功时调用和失败时调用。

var promise = new Promise(function(resolve, reject) {
  // 异步操作
  if (/* 操作成功 */) {
    resolve(value); // value 为异步操作成功时的值
  } else {
    reject(error); // error 为异步操作失败时的原因
  }
});

// 使用 then 方法处理成功，catch 方法处理失败
promise.then(function(value) {
  // 处理成功的值
}).catch(function(error) {
  // 处理失败的原因
});

2. 什么是 Fetch API

Fetch API 是一种现代的网络请求 API，它比老旧的 XMLHttpRequest 对象更加灵活和强大。Fetch API 返回的是 Promise 对象，允许更简单、更清晰地处理请求和响应。

3. 如何使用 Fetch API 替代 XMLHttpRequest 进行 AJAX 请求

使用 Fetch API 进行 AJAX 请求的基本语法如下：

fetch(url, options)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

• url 是请求的 URL。
• options 是一个配置对象，可以设置请求的方法、头部等。
• response.json() 方法用于解析 JSON 响应。
• data 是服务器返回的数据。

示例：使用 Fetch API 发送 GET 请求

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

示例：使用 Fetch API 发送 POST 请求

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1
  })
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Fetch API 与 XMLHttpRequest 相比，提供了更现代、更灵活、更清晰的 API，让开发者能以更简洁和优雅的方式处理网络请求。