封装Axios

封装Axios

。Axios 是一个基于 Promise 的 HTTP 客户端，它可以帮助我们在浏览器和 Node.js 中发送网络请求。它简洁而强大，但是我们可以通过封装它来增加一些额外的功能，让它变得更好用！

好了，让我们来创建一个名为 “SuperAxios” 的类！

class SuperAxios {
  constructor() {
    // 在这里初始化一些默认配置，比如请求超时时间、请求头等等
    this.timeout = 5000;
    this.headers = {};
  }

  // 增加一个风趣的打招呼方法
  sayHello() {
    console.log("Hi，我是你的超级网络请求英雄 - SuperAxios！");
  }

  // 封装一个GET请求的方法
  get(url) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        // 模拟请求成功
        resolve(`成功获取来自 ${url} 的数据！`);
      }, this.timeout);
    });
  }

  // 封装一个POST请求的方法
  post(url, data) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        // 模拟请求成功
        resolve(`成功向 ${url} 发送数据：${JSON.stringify(data)}`);
      }, this.timeout);
    });
  }
  
  // 封装一个DELETE请求的方法
  delete(url) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        // 模拟请求成功
        resolve(`成功删除来自 ${url} 的数据！`);
      }, this.timeout);
    });
  }

  // 封装一个PUT请求的方法
  put(url, data) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        // 模拟请求成功
        resolve(`成功更新 ${url} 的数据：${JSON.stringify(data)}`);
      }, this.timeout);
    });
  }
}

// 创建 SuperAxios 实例
const superAxios = new SuperAxios();

// 打个招呼
superAxios.sayHello();

// 发送GET请求
superAxios.get("https://api.example.com/data")
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.error(error);
  });

我们刚刚封装了 GET、POST、DELETE 和 PUT 请求的方法。当然，你可以根据自己的需求继续扩展这个类，增加更多功能。

现在，你可以调用 SuperAxios 的方法，它会帮你处理网络请求！不仅仅是网络请求，你可以在构造函数中添加更多的默认配置，比如请求头、请求拦截器等等。封装 Axios 不仅让你的代码更整洁，还能提高代码的可维护性和复用性。