学习typescript用法二-封装axios

2021-04-15

封装实例

import axios, { AxiosInstance, AxiosResponse } from 'axios';
// 传入泛型T声明data类型
interface ResponseData<T> {
  code: number;
  data: T;
  message: string;
}

class Interceptors {
  instance!: AxiosInstance;
  codeMessage: { [key: number]: string } = {
    200: '成功',
    400: '请求错误',
    401: '没有权限',
    403: '访问被禁止',
    404: '请求不存在',
    500: '服务器错误',
    502: '网关错误',
    503: '服务不可用',
    504: '网关超时'
  };

  constructor() {
    this.createInstance();
  }

  createInstance() {
    this.instance = axios.create({
      baseURL: BASEURL,
      timeout: 3000
    });
    this.instanceRequest();
    this.instanceResponse();
  }

  instanceRequest() {
    this.instance.interceptors.request.use(
      (config) => {
        config.headers.authorization = jsCookie.get(cookie.tokenName);
        return config;
      },
      (error) => {
        Promise.reject(error);
      }
    );
  }

  instanceResponse() {
    this.instance.interceptors.response.use(
      (response: AxiosResponse<ResponseData>) => {
        const { status, data } = response;
        if (status !== 200) {
          return Promise.reject(data);
        }
        return response;
      },
      (error) => {
        if (import.meta.env.MODE === 'development') {
          alert('出错了!');
          return Promise.reject();
        }
      }
    );
  }
}

export default new Interceptors();

封装请求

这个过程封装axios常用请求函数get、post等，同理也是传入一个泛型，得到response.data的类型提示。

import { AxiosInstance, AxiosRequestConfig } from 'axios';
import Interceptors from './Interceptors';

class HttpService {
  instance: AxiosInstance;

  constructor() {
    this.instance = Interceptors.instance;
  }

  request<T = any, R = ResponseData<T>>(config: AxiosRequestConfig): Promise<R> {
    return this.instance.request(config).then((res) => res?.data);
  }

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

  delete<T = any, R = ResponseData<T>>(url: string, config?: AxiosRequestConfig): Promise<R> {
    return this.instance.delete(url, config).then((res) => res?.data);
  }

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

  put<T = any, R = ResponseData<T>>(url: string, data?: any, config?: AxiosRequestConfig): Promise<R> {
    return this.instance.put(url, data, config).then((res) => res?.data);
  }

  patch<T = any, R = ResponseData<T>>(url: string, data?: any, config?: AxiosRequestConfig): Promise<R> {
    return this.instance.patch(url, data, config).then((res) => res?.data);
  }
}

export default new HttpService();

使用方式

import HttpService from '@/utils/HttpService';

interface LoginParams {
  username: string;
  password: string;
}

interface LoginData {
  a: string;
  b: string;
}

// 外部传入
const login1 = <A = any>(data: LoginParams) => {
  return HttpService.post<A>('/login', data);
};
login1<LoginData>();

// 也可以直接在这里声明
const login2 = <LoginData>(data: LoginParams) => {
  return HttpService.post<string>('/login', data);
};

那么返回的值就是最终效果AxiosResponse<<ResponseData<LoginData>>>，经过一层层嵌套，把LoginData声明给了response.data下定义的接口返回类型中的data数据。