typescript axios请求拦截器中对get请求的参数全部进行URL utf8编码

在 TypeScript 和 axios 中，可以使用以下代码来实现在请求拦截器中对 GET 请求的参数进行 URL utf8 编码：

import axios, { AxiosRequestConfig } from 'axios';
import qs from 'qs';

axios.interceptors.request.use((config: AxiosRequestConfig) => {
  if (config.method === 'get') {
    config.params = qs.stringify(config.params, { encode: true });
  }
  return config;
});

在这个代码中，我们首先导入了 axios 和 qs 库，然后我们在请求拦截器中判断了请求的方法是否为 GET，如果是 GET 方法，我们就使用 qs 库的 stringify 方法对参数进行 URL 编码。注意，我们使用了 `{ encode: true }` 选项来强制对参数进行编码。

这样，我们就成功地实现了在 TypeScript 和 axios 中对 GET 请求参数进行 URL utf8 编码的功能。

相关问题

请用typescript封装axios的拦截器

好的，以下是使用TypeScript封装Axios拦截器的示例代码：

import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';

class AxiosInterceptor {
  private axiosInstance: AxiosInstance;

  constructor(baseURL: string, timeout = 10000) {
    this.axiosInstance = axios.create({
      baseURL,
      timeout,
    });

    this.requestInterceptor();
    this.responseInterceptor();
  }

  private requestInterceptor(): void {
    this.axiosInstance.interceptors.request.use(
      (config: AxiosRequestConfig) => {
        // 在发送请求之前做些什么
        // 比如添加token到header中
        const token = localStorage.getItem('token');
        if (token) {
          config.headers.Authorization = `Bearer ${token}`;
        }
        return config;
      },
      (error) => {
        // 对请求错误做些什么
        return Promise.reject(error);
      }
    );
  }

  private responseInterceptor(): void {
    this.axiosInstance.interceptors.response.use(
      (response: AxiosResponse) => {
        // 对响应数据做点什么
        return response;
      },
      (error) => {
        // 对响应错误做点什么
        if (error.response.status === 401) {
          // token失效，跳转到登录页
          window.location.href = '/login';
        }
        return Promise.reject(error);
      }
    );
  }

  public get<T>(url: string, config?: AxiosRequestConfig): Promise<T> {
    return this.axiosInstance.get<T>(url, config);
  }

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

  public put<T>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> {
    return this.axiosInstance.put<T>(url, data, config);
  }

  public delete<T>(url: string, config?: AxiosRequestConfig): Promise<T> {
    return this.axiosInstance.delete<T>(url, config);
  }
}

export default AxiosInterceptor;

这个类使用了Axios的拦截器功能，在请求发送前和响应返回后进行一些操作，比如添加token到请求header中，或者在token失效后跳转到登录页。类中还封装了常用的get、post、put、delete等HTTP请求方法，可以直接调用。

typescript封装axios

以下是一个基本的 TypeScript 封装 Axios 的示例：

import axios, { AxiosResponse } from 'axios';

interface RequestConfig {
  url: string;
  method: string;
  params?: any;
  data?: any;
}

export default class Http {
  private static instance = axios.create({
    baseURL: 'https://api.example.com',
    timeout: 5000,
    headers: {
      'Content-Type': 'application/json',
    },
  });

  public static async request<T>(config: RequestConfig): Promise<T> {
    const response: AxiosResponse<T> = await this.instance.request(config);
    return response.data;
  }

  public static async get<T>(url: string, params?: any): Promise<T> {
    const response: AxiosResponse<T> = await this.instance.get(url, { params });
    return response.data;
  }

  public static async post<T>(url: string, data?: any): Promise<T> {
    const response: AxiosResponse<T> = await this.instance.post(url, data);
    return response.data;
  }

  public static async put<T>(url: string, data?: any): Promise<T> {
    const response: AxiosResponse<T> = await this.instance.put(url, data);
    return response.data;
  }

  public static async delete<T>(url: string): Promise<T> {
    const response: AxiosResponse<T> = await this.instance.delete(url);
    return response.data;
  }
}

这个示例中，首先我们引入了 Axios 和 AxiosResponse。在 Http 类中，我们使用了一个私有的静态实例 instance 来创建一个 Axios 实例，并设置了一些默认配置。我们还定义了一个 RequestConfig 接口，用于传递给 Axios 实例的请求配置。接下来，我们定义了一些静态方法，如 request、get、post、put 和 delete，这些方法分别对应着 Axios 实例的请求方法。在每个方法中，我们使用 Axios 实例对应的请求方法，并返回响应数据。最后，我们将整个 Http 类导出，以便在其他地方使用。