ts封裝axios并處理返回值的實戰(zhàn)案例

更新時間：2022年08月02日 08:52:11 作者：Agwenbi

在vue項目中,和后臺交互獲取數(shù)據(jù)這塊,我們通常使用的是axios庫,下面這篇文章主要給大家介紹了關(guān)于ts封裝axios并處理返回值的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下

src下新建所需文件夾及對應(yīng)文件，如下圖

文件信息

api 保存所有的接口列表及對應(yīng)的返回數(shù)據(jù)類型
http 初始化axios，如果超時，設(shè)置攔截器等操作
axios 二次封裝好的axios，供開發(fā)人員使用

設(shè)置api.ts，假設(shè)如下

/**
 * @description: 所有的接口列表
 * @param {*} 無參數(shù)
 * @return {*} 無返回值
 * ```js
 * key表示url路徑縮寫
 * value表示真實請求的路徑
 * ```
 */
const apiList = {
  'getData': '/getData',
  'othersData': '/othersData'
}
/**
 * @description: 所有的接口列表類型
 * @param {*} 無參數(shù)
 * @return {*} 無返回值
 */
export type apiKeyType = keyof typeof apiList;
/**
 * @description: 接口對應(yīng)的數(shù)據(jù)返回值類型
 * @param {*} 無參數(shù)
 * @return {*} 無返回值
 */
export interface apiKeyDataType {
  'getData': {
    code: number;
    data: {
      name: string;
      age: number;
      work: string[]
    }
  },
  'othersData': {
    code: number;
    data: string[]
  }
}

export default apiList;

設(shè)置http.ts

import axios, {Method, AxiosInstance, AxiosRequestConfig, AxiosPromise, AxiosInterceptorManager, AxiosResponse} from 'axios';
import qs from 'qs';
import {apiKeyType, apiKeyDataType} from './api';

type ResultDataType = apiKeyDataType[apiKeyType];
/* 
NewAxiosInstance接口得根據(jù)自己情況來定
  interceptors屬性是必須要有，因為后續(xù)要用到攔截器
  至于<T = any>(config: AxiosRequestConfig): AxiosPromise<T>這一段代碼，因為我后續(xù)二次封裝axios時采用的是此類型，所以我這里
  聲明的是這種數(shù)據(jù)類型
*/
interface NewAxiosInstance extends AxiosInstance {
  /* 
  設(shè)置泛型T，默認(rèn)為any，將請求后的結(jié)果返回變成AxiosPromise<T>
  */
  <T = any>(config: AxiosRequestConfig): AxiosPromise<T>;
  interceptors: {
    request: AxiosInterceptorManager<AxiosRequestConfig>;
    response: AxiosInterceptorManager<AxiosResponse<ResultDataType>>;
  }
}

//基本的初始化設(shè)置
let http: NewAxiosInstance = axios.create({
  baseURL: import.meta.env.VITE_BASE_URL as string, //因為使用的是vite構(gòu)建的項目，所以這里是這么獲取代理名稱的，根據(jù)自己情況修改
  timeout: 3 * 1000// 超時時間
});

// 請求攔截器
const QS_METHOD: Method[] = ['POST', 'post', 'PUT', 'put'];
const GET_METHOD: Method[] = ['GET', 'get', 'DELETE', 'delete'];
http.interceptors.request.use(response => {
  if(response.method && QS_METHOD.includes(response.method)){// 這里只處理post請求，根據(jù)自己情況修改
    response.data = qs.stringify(response.data);
  }else if(response.method && GET_METHOD.includes(response.method)){//設(shè)置GET的請求參數(shù)
  	response.params = qs.parse(response.data);
  	response.data = undefined;
  }
  return response;
}, error => {
  return error;
});

//響應(yīng)攔截器
http.interceptors.response.use(response => {
  return Promise.resolve(response);
}, error => {
  return error;
});

export default http;

設(shè)置axios.ts

import axios from '@/server/http';
import apiList, {apiKeyType, apiKeyDataType} from './api';
import {AxiosRequestConfig} from 'axios';

/* 
限制泛型T必須是接口列表（apiKeyType）中的key
限制obj中的url必須是接口列表中key的某一格
*/
export default <T extends apiKeyType>(obj: AxiosRequestConfig & {url: T}) => {
  /* 
  限制最終的返回數(shù)據(jù)類型
  */
  return new Promise<apiKeyDataType[T]>((resolve, reject) => {
    /* 
    傳遞泛型給http中的攔截器
    */
    axios<apiKeyDataType[T]>({
      url: apiList[obj.url],
      data: obj.data || {},
      method: obj.method || 'GET',
      responseType: obj.responseType || 'json'
    }).then(res => {
      resolve(res.data);
    }).catch(error => {
      reject(error);
    })
  })
}