promise 的理解 以及用 promise 封装一个异步请求方法

wePromise是JavaScript中处理异步操作的一种机制。它代表了一个异步操作的最终完成或失败，并可以获取其结果。使用Promise可以更方便地管理异步代码，避免了回调地狱（callback hell）的问题，使代码更易读、可维护。

在Promise中，异步操作被封装在一个Promise对象中，它有三个状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。当异步操作完成时，可以通过resolve函数将Promise状态从pending变为fulfilled，并传递异步操作的结果；而在异步操作失败时，可以通过reject函数将Promise状态从pending变为rejected，并传递失败的原因。

代码如下：

// 1. 导入需要的模块：
// 导入 Node.js 内置的 http 模块，用于发送 HTTP 请求
const http = require('http');

// 2. 定义异步请求方法：
// 创建一个函数来执行异步请求，并返回一个 Promise 对象
function makeRequest(url) {
  return new Promise((resolve, reject) => {
    // 3. 发送 HTTP 请求：
    // 使用 http.get() 发送 GET 请求
    http.get(url, (response) => {
      let data = '';

      // 4. 监听响应数据事件：
      // 注册 'data' 事件来收集响应数据
      response.on('data', (chunk) => {
        data += chunk;
      });

      // 5. 监听响应结束事件：
      // 注册 'end' 事件来处理响应数据完成的逻辑
      response.on('end', () => {
        // 6. 解析响应数据：
        // 将响应数据解析为对象，并通过 resolve() 传递给 Promise 的下一个阶段
        const parsedData = JSON.parse(data);
        resolve(parsedData);
      });
    }).on('error', (error) => {
      // 7. 错误处理：
      // 发生错误时通过 reject() 传递错误信息给 Promise 的下一个阶段
      reject(error);
    });
  });
}

// 8. 使用封装的异步请求方法：
// 调用 makeRequest() 函数，并使用 then() 处理异步请求成功的逻辑，使用 catch() 处理错误
makeRequest('http://api.example.com/user')
  .then((responseData) => {
    console.log(responseData);
  })
  .catch((error) => {
    console.error(error);
  });

通过使用 Promise 封装异步请求方法，可以以更简洁的方式处理异步操作并进行错误处理。

或者封装 axios 也可以：

 1. 第一步先安装 Axios：
    运行以下命令来在项目中安装 Axios:
    npm install axios

 2. 导入 Axios：
在你需要使用 Axios 的 JavaScript 文件中，添加以下代码来导入 Axios:
import axios from 'axios';

 3. 创建 Axios 实例： 
你可以使用 axios.create() 创建一个拥有默认配置选项的 Axios 实例。这允许你设置默认的请求头、基本 URL 和其他选项。
const api = axios.create({
  baseURL: 'https://api.example.com',
  headers: {
    'Content-Type': 'application/json'
  }
});

 4. 定义异步请求方法：
// 创建一个函数，利用 Axios 执行异步请求。
// 该函数通常返回一个 Promise，在请求成功时解析为响应数据，发生错误时拒绝并抛出错误。
function fetchUser(userId) {
  return api.get(`/users/${userId}`)
    .then(response => response.data)
    .catch(error => {
      throw new Error(error.message);
    });
}

 5. 使用请求方法：
// 在需要进行 API 请求的地方使用定义好的请求方法。
fetchUser(123)
  .then(userData => {
    console.log(userData);
  })
  .catch(error => {
    console.error(error);
  });

通过使用 Axios 封装异步请求方法并返回 Promise，你可以在项目中以清晰和结构化的方式重用和管理 API 调用