Axios 以及Axios的原理 以及如何封装一个Axios

Axios 是一个基于 Promise 的 HTTP 库，可以用于浏览器和 node.js 中。它提供了一个 API 来处理 XMLHttpRequests 和 HTTP 请求。

以下是 Axios 的一些主要特性：

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF
Axios 的工作原理是基于 HTTP 的 Promise，当我们向服务器发送请求时，Axios 会返回一个 Promise 对象，这个 Promise 对象会在 HTTP 请求成功或失败时改变状态。

以下是一个简单的 Axios 请求示例

axios.get('/user?ID=12345')
  .then(function (response) {
    // 请求成功，处理 response
    console.log(response);
  })
  .catch(function (error) {
    // 请求失败，处理 error
    console.log(error);
  });

在这个例子中，axios.get 发送一个 GET 请求，然后返回一个 Promise 对象。我们可以使用 then 方法处理请求成功的情况，使用 catch 方法处理请求失败的情况。

Axios 还提供了很多其他的 API，如 post、put、delete 等，以及一些高级功能，如拦截器、请求和响应的转换等。

封装Axios Ts 方法

在 TypeScript 中，我们可以创建一个 Axios 插件，封装一些常用的 HTTP 请求方法。以下是一个简单的示例：

// http.ts
import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';

class Http {
  private axiosInstance: AxiosInstance;

  constructor(config?: AxiosRequestConfig) {
    this.axiosInstance = axios.create(config);

    // 添加请求拦截器
    this.axiosInstance.interceptors.request.use((config: AxiosRequestConfig) => {
      // 在发送请求之前做些什么
      return config;
    }, (error) => {
      // 对请求错误做些什么
      return Promise.reject(error);
    });

    // 添加响应拦截器
    this.axiosInstance.interceptors.response.use((response: AxiosResponse) => {
      // 对响应数据做点什么
      return response;
    }, (error) => {
      // 对响应错误做点什么
      return Promise.reject(error);
    });
  }

  get<T = any>(url: string, config?: AxiosRequestConfig): Promise<T> {
    return this.axiosInstance.get<T>(url, config).then(response => response.data);
  }

  post<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> {
    return this.axiosInstance.post<T>(url, data, config).then(response => response.data);
  }

  // 其他 HTTP 方法，如 put、delete 等
}

export default Http;

在这个示例中，我们创建了一个 Http 类，它包含一个 AxiosInstance 实例。我们在构造函数中添加了请求和响应的拦截器，以及 get 和 post 方法。你可以根据需要添加其他的 HTTP 方法，如 put、delete 等。

你可以像下面这样使用这个 Http 类：

import Http from './http';

const http = new Http();

http.get('/user?ID=12345')
  .then(function (data) {
    console.log(data);
  })
  .catch(function (error) {
    console.log(error);
  });