fetch 与.then是怎么使用的

        在 JavaScript 里，fetch 用于发起网络请求，它返回一个 Promise 对象。而 .then() 方法是 Promise 对象的一个实例方法，用于处理 Promise 成功解析时的结果。下面为你详细介绍 fetch 和 .then() 的使用方式：

基本语法

  fetch 返回的 Promise 对象会在请求完成后被解析，你可以使用 .then() 方法链式调用处理请求的响应。.then() 方法接受一个回调函数作为参数，当 Promise 状态变为 fulfilled（成功）时，这个回调函数就会被调用，回调函数的参数就是 Promise 解析的值。

fetch('https://api.example.com/data')
  .then(response => {
    // 检查响应状态码是否正常（200 - 299）
    if (!response.ok) {
      throw new Error(`HTTP 错误! 状态码: ${response.status}`);
    }
    // 将响应数据解析为 JSON 格式
    return response.json();
  })
  .then(data => {
    // 处理解析后的 JSON 数据
    console.log(data);
  })
  .catch(error => {
    // 处理请求过程中出现的错误
    console.error('请求出错:', error);
  });

• 第一个 .then()：接收 fetch 返回的 response 对象，这个对象包含了请求的响应信息，如状态码、响应头和响应体等。在这个回调函数中，首先检查 response.ok，它是一个布尔值，表示响应状态码是否在 200 - 299 范围内。若不在这个范围，就抛出一个错误。若状态正常，调用 response.json() 方法将响应体解析为 JSON 格式，同时返回一个新的 Promise 对象。

• 第二个 .then()：接收前一个 .then() 中 response.json() 返回的 Promise 解析后的值，也就是解析好的 JSON 数据。在这个回调函数里，可以对 JSON 数据进行进一步的处理，例如打印到控制台。

• .catch()：用于捕获请求过程中出现的任何错误，包括网络错误和手动抛出的错误。

---

 

const data = {
  name: 'John',
  age: 30
};

fetch('https://api.example.com/submit', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
})
  .then(response => response.json())
  .then(result => {
    console.log('响应结果:', result);
  })
  .catch(error => {
    console.error('请求出错:', error);
  });

• 这个例子是一个 POST 请求，通过 fetch 的第二个参数传递一个配置对象，指定请求方法为 POST，设置请求头 Content-Type 为 application/json，并将 JavaScript 对象 data 转换为 JSON 字符串作为请求体发送。

• 第一个 .then() 中，直接调用 response.json() 方法将响应体解析为 JSON 格式并返回一个新的 Promise。

• 第二个 .then() 接收解析后的 JSON 数据并进行处理。

• .catch() 捕获请求过程中出现的错误。

链式调用的优势

        使用 .then() 进行链式调用可以避免回调地狱问题，让代码结构更清晰，易于理解和维护。每个 .then() 方法都可以在前一个 .then() 完成后按顺序执行，使得异步操作的流程更加直观。