簡介:

今天我們再用TypeScript封裝一遍Axios。希望能進(jìn)一步鞏固TypeScript的基礎(chǔ)知識。

Axios幾個(gè)常用類型:

在使用TypeScript封裝Axios之前我們先來看看Axios幾個(gè)重要的類型。

AxiosRequestConfig

AxiosRequestConfig是我們使用axios發(fā)送請求傳遞參數(shù)的類型。當(dāng)然它也是我們請求攔截器里面的參數(shù)類型。
axios(config: AxiosRequestConfig)
可以看到，這個(gè)config里面的參數(shù)還是挺多的。我們常用的有url、method、params、data、headers、baseURL、timeout。

export interface AxiosRequestConfig {
  url?: string;
  method?: Method;
  baseURL?: string;
  transformRequest?: AxiosTransformer | AxiosTransformer[];
  transformResponse?: AxiosTransformer | AxiosTransformer[];
  headers?: any;
  params?: any;
  paramsSerializer?: (params: any) => string;
  data?: any;
  timeout?: number;
  timeoutErrorMessage?: string;
  withCredentials?: boolean;
  adapter?: AxiosAdapter;
  auth?: AxiosBasicCredentials;
  responseType?: ResponseType;
  xsrfCookieName?: string;
  xsrfHeaderName?: string;
  onUploadProgress?: (progressEvent: any) => void;
  onDownloadProgress?: (progressEvent: any) => void;
  maxContentLength?: number;
  validateStatus?: ((status: number) => boolean) | null;
  maxBodyLength?: number;
  maxRedirects?: number;
  socketPath?: string | null;
  httpAgent?: any;
  httpsAgent?: any;
  proxy?: AxiosProxyConfig | false;
  cancelToken?: CancelToken;
  decompress?: boolean;
  transitional?: TransitionalOptions
}

AxiosInstance

AxiosInstance是我們使用axios實(shí)例對象類型。

我們使用axios.create(config?: AxiosRequestConfig)創(chuàng)建出來的對象都是AxiosInstance類型

export interface AxiosInstance {
  (config: AxiosRequestConfig): AxiosPromise;
  (url: string, config?: AxiosRequestConfig): AxiosPromise;
  defaults: AxiosRequestConfig;
  interceptors: {
    request: AxiosInterceptorManager;
    response: AxiosInterceptorManager;
  };
  getUri(config?: AxiosRequestConfig): string;
  request> (config: AxiosRequestConfig): Promise;
  get>(url: string, config?: AxiosRequestConfig): Promise;
  delete>(url: string, config?: AxiosRequestConfig): Promise;
  head>(url: string, config?: AxiosRequestConfig): Promise;
  options>(url: string, config?: AxiosRequestConfig): Promise;
  post>(url: string, data?: any, config?: AxiosRequestConfig): Promise;
  put>(url: string, data?: any, config?: AxiosRequestConfig): Promise;
  patch>(url: string, data?: any, config?: AxiosRequestConfig): Promise;
}

可以發(fā)現(xiàn)，我們可以使用axios.create、axios.all、axios.spread方法，但是AxiosInstance 上并沒有create、all、spread等方法，那我們的axios到底是什么類型呢？

AxiosStatic

export interface AxiosStatic extends AxiosInstance {
  create(config?: AxiosRequestConfig): AxiosInstance;
  Cancel: CancelStatic;
  CancelToken: CancelTokenStatic;
  isCancel(value: any): boolean;
  all(values: (T | Promise)[]): Promise;
  spread(callback: (...args: T[]) => R): (array: T[]) => R;
  isAxiosError(payload: any): payload is AxiosError;
}
declare const axios: AxiosStatic;

可以發(fā)現(xiàn)，axios其實(shí)是AxiosStatic類型，并且繼承了AxiosInstance類型。所以是兩者的結(jié)合。相較axios.create(config?: AxiosRequestConfig)創(chuàng)建出來的實(shí)例對象，axios功能是更強(qiáng)大的。

AxiosResponse

AxiosResponse是非常重要的，我們的axios請求返回值類型都是AxiosResponse類型。并且我們可以發(fā)現(xiàn)AxiosResponse是一個(gè)接口泛型，這個(gè)泛型會(huì)應(yīng)用到后端返回的data上。所以這塊我們可以根據(jù)后端接口返回定義不同的類型傳遞進(jìn)去。后面筆者在封裝常用方法的時(shí)候會(huì)細(xì)說。

export interface AxiosResponse  {
  data: T;
  status: number;
  statusText: string;
  headers: any;
  config: AxiosRequestConfig;
  request?: any;
}

AxiosError

AxiosError這個(gè)類型也是我們必須要知道的。在我們響應(yīng)攔截器里面的錯(cuò)誤就是AxiosError類型。

export interface AxiosError extends Error {
  config: AxiosRequestConfig;
  code?: string;
  request?: any;
  response?: AxiosResponse;
  isAxiosError: boolean;
  toJSON: () => object;
}

說完了Axios的幾個(gè)常用類型，接下來我們正式開始使用TS來封裝我們的Axios。

基礎(chǔ)封裝

首先我們實(shí)現(xiàn)一個(gè)最基本的版本，實(shí)例代碼如下：

// index.ts
import axios from 'axios'
import type { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'

class Request {
  // axios 實(shí)例
  instance: AxiosInstance
  // 基礎(chǔ)配置，url和超時(shí)時(shí)間
  baseConfig: AxiosRequestConfig = {baseURL: "/api", timeout: 60000}

  constructor(config: AxiosRequestConfig) {
    // 使用axios.create創(chuàng)建axios實(shí)例
    this.instance = axios.create(Object.assign(this.baseConfig, config))
  }
  // 定義請求方法
  public request(config: AxiosRequestConfig): Promise {
    return this.instance.request(config)
  }
}
export default Request

在實(shí)際項(xiàng)目中有了基本的請求方法還是遠(yuǎn)遠(yuǎn)不夠的，我們還需要封裝攔截器和一些常用方法。

攔截器封裝

攔截器封裝只需要在類中對axios.create()創(chuàng)建的實(shí)例調(diào)用interceptors下的兩個(gè)攔截器即可

實(shí)例代碼如下：

// index.ts
constructor(config: AxiosRequestConfig) {
  this.instance = axios.create(Object.assign(this.baseConfig, config))
  this.instance.interceptors.request.use(
    (config: AxiosRequestConfig) => {
      // 一般會(huì)請求攔截里面加token
      const token = localStorage.getItem("token")
      config.headers["Authorization"] = token;
      
      return config
    },
    (err: any) => {
      return Promise.reject(err)
    },
  )
  this.instance.interceptors.response.use(
    (res: AxiosResponse) => {
      // 直接返回res，當(dāng)然你也可以只返回res.data
      return res
    },
    (err: any) => {
      // 這里用來處理http常見錯(cuò)誤，進(jìn)行全局提示
      let message = "";
      switch (err.response.status) {
        case 400:
          message = "請求錯(cuò)誤(400)";
          break;
        case 401:
          message = "未授權(quán)，請重新登錄(401)";
          // 這里可以做清空storage并跳轉(zhuǎn)到登錄頁的操作
          break;
        case 403:
          message = "拒絕訪問(403)";
          break;
        case 404:
          message = "請求出錯(cuò)(404)";
          break;
        case 408:
          message = "請求超時(shí)(408)";
          break;
        case 500:
          message = "服務(wù)器錯(cuò)誤(500)";
          break;
        case 501:
          message = "服務(wù)未實(shí)現(xiàn)(501)";
          break;
        case 502:
          message = "網(wǎng)絡(luò)錯(cuò)誤(502)";
          break;
        case 503:
          message = "服務(wù)不可用(503)";
          break;
        case 504:
          message = "網(wǎng)絡(luò)超時(shí)(504)";
          break;
        case 505:
          message = "HTTP版本不受支持(505)";
          break;
        default:
          message = `連接出錯(cuò)(${err.response.status})!`;
      }
      // 這里錯(cuò)誤消息可以使用全局彈框展示出來
      // 比如element plus 可以使用 ElMessage
      ElMessage({
        showClose: true,
        message: `${message}，請檢查網(wǎng)絡(luò)或聯(lián)系管理員！`,
        type: "error",
      });
      // 這里是AxiosError類型，所以一般我們只reject我們需要的響應(yīng)即可
      return Promise.reject(err.response)
    },
  )
}

在這里我們分別對請求攔截器和響應(yīng)攔截器做了處理。在請求攔截器我們給請求頭添加了token。

在響應(yīng)攔截器，我們返回了整個(gè)response對象，當(dāng)然你也可以只返回后端返回的response.data，這里可以根據(jù)個(gè)人喜好來處理。其次對http錯(cuò)誤進(jìn)行了全局處理。

常用方法封裝

在基礎(chǔ)封裝的時(shí)候我們封裝了一個(gè)request通用方法，其實(shí)我們還可以更具體的封裝get、post、put、delete方法，讓我們使用更方便。

并且，我們前面分析到，AxiosResponse其實(shí)是一個(gè)泛型接口，他可以接受一個(gè)泛型并應(yīng)用到我們的data上。所以我們可以在這里再定義一個(gè)后端通用返回的數(shù)據(jù)類型。

比如假設(shè)我們某個(gè)項(xiàng)目后端接口不管請求成功與失敗，返回的結(jié)構(gòu)永遠(yuǎn)是code、message、results的話我們可以定義一個(gè)這樣的數(shù)據(jù)類型。

type Result = {
  code: number,
  message: string,
  result: T
}

然后傳遞個(gè)各個(gè)方法：

public get(
  url: string, 
  config?: AxiosRequestConfig
): Promise>> {
  return this.instance.get(url, config);
}
public post(
  url: string,
  data?: any,
  config?: AxiosRequestConfig
): Promise>> {
  return this.instance.post(url, data, config);
}
public put(
  url: string,
  data?: any,
  config?: AxiosRequestConfig
): Promise>> {
  return this.instance.put(url, data, config);
}
public delete(
  url: string,
  config?: AxiosRequestConfig
): Promise>> {
  return this.instance.delete(url, config);
}

上面調(diào)用接口的時(shí)候并沒有傳遞接口數(shù)據(jù)類型，所以我們的result是any類型，要想要每個(gè)接口都有類型提示，我們還需要給方法傳遞泛型。

我們再改進(jìn)下，我們再定義一個(gè)login接口返回值類型loginType

type loginType = {
  token: string;
};

當(dāng)然每個(gè)接口都定義返回值類型固然好，但是會(huì)大大加大前端的工作量。我們在寫請求方法的時(shí)候也可以不傳遞接口返回值類型，這樣result的類型就是any。這個(gè)可以根據(jù)自身項(xiàng)目需求來選擇使用。

總結(jié)

說了這么多，有些小伙伴們可能有點(diǎn)暈了，下面筆者總結(jié)下整個(gè)axios的封裝。

// index.ts
import axios from "axios";
import type { AxiosInstance, AxiosRequestConfig, AxiosResponse } from "axios";
type Result = {
  code: number;
  message: string;
  result: T;
};
class Request {
  // axios 實(shí)例
  instance: AxiosInstance;
  // 基礎(chǔ)配置，url和超時(shí)時(shí)間
  baseConfig: AxiosRequestConfig = { baseURL: "/api", timeout: 60000 };

  constructor(config: AxiosRequestConfig) {
    // 使用axios.create創(chuàng)建axios實(shí)例
    this.instance = axios.create(Object.assign(this.baseConfig, config));

    this.instance.interceptors.request.use(
      (config: AxiosRequestConfig) => {
        // 一般會(huì)請求攔截里面加token
        const token = localStorage.getItem("token");
        config.headers["Authorization"] = token;

        return config;
      },
      (err: any) => {
        return Promise.reject(err);
      }
    );

    this.instance.interceptors.response.use(
      (res: AxiosResponse) => {
        // 直接返回res，當(dāng)然你也可以只返回res.data
        return res;
      },
      (err: any) => {
        // 這里用來處理http常見錯(cuò)誤，進(jìn)行全局提示
        let message = "";
        switch (err.response.status) {
          case 400:
            message = "請求錯(cuò)誤(400)";
            break;
          case 401:
            message = "未授權(quán)，請重新登錄(401)";
            // 這里可以做清空storage并跳轉(zhuǎn)到登錄頁的操作
            break;
          case 403:
            message = "拒絕訪問(403)";
            break;
          case 404:
            message = "請求出錯(cuò)(404)";
            break;
          case 408:
            message = "請求超時(shí)(408)";
            break;
          case 500:
            message = "服務(wù)器錯(cuò)誤(500)";
            break;
          case 501:
            message = "服務(wù)未實(shí)現(xiàn)(501)";
            break;
          case 502:
            message = "網(wǎng)絡(luò)錯(cuò)誤(502)";
            break;
          case 503:
            message = "服務(wù)不可用(503)";
            break;
          case 504:
            message = "網(wǎng)絡(luò)超時(shí)(504)";
            break;
          case 505:
            message = "HTTP版本不受支持(505)";
            break;
          default:
            message = `連接出錯(cuò)(${err.response.status})!`;
        }
        // 這里錯(cuò)誤消息可以使用全局彈框展示出來
        // 比如element plus 可以使用 ElMessage
        ElMessage({
          showClose: true,
          message: `${message}，請檢查網(wǎng)絡(luò)或聯(lián)系管理員！`,
          type: "error",
        });
        // 這里是AxiosError類型，所以一般我們只reject我們需要的響應(yīng)即可
        return Promise.reject(err.response);
      }
    );
  }

  // 定義請求方法
  public request(config: AxiosRequestConfig): Promise {
    return this.instance.request(config);
  }

  public get(
    url: string,
    config?: AxiosRequestConfig
  ): Promise>> {
    return this.instance.get(url, config);
  }
  public post(
    url: string,
    data?: any,
    config?: AxiosRequestConfig
  ): Promise>> {
    return this.instance.post(url, data, config);
  }
  public put(
    url: string,
    data?: any,
    config?: AxiosRequestConfig
  ): Promise>> {
    return this.instance.put(url, data, config);
  }

  public delete(
    url: string,
    config?: AxiosRequestConfig
  ): Promise>> {
    return this.instance.delete(url, config);
  }
}
export default Request;