ts封装axios并处理返回值的实战案例

axios ts封装封装axios及使用 2022-11-13 13:11:38 729人浏览安东尼

摘要

目录src下新建所需文件夹及对应文件，如下图设置api.ts，假设如下设置Http.ts设置axiOS.ts最终效果结束本项目的案例是针对vue3 准备Vue3+ts+axios的项

src下新建所需文件夹及对应文件，如下图

文件信息

api 保存所有的接口列表及对应的返回数据类型
http 初始化axios，如果超时，设置拦截器等操作
axios 二次封装好的axios，供开发人员使用

设置api.ts，假设如下


const apiList = {
  'getData': '/getData',
  'othersData': '/othersData'
}

export type apiKeyType = keyof typeof apiList;

export interface apiKeyDataType {
  'getData': {
    code: number;
    data: {
      name: string;
      age: number;
      work: string[]
    }
  },
  'othersData': {
    code: number;
    data: string[]
  }
}

export default apiList;

设置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];

interface NewAxiosInstance extends AxiosInstance {
  
  <T = any>(config: AxiosRequestConfig): AxiosPromise<T>;
  interceptors: {
    request: AxiosInterceptorManager<AxiosRequestConfig>;
    response: AxiosInterceptorManager<AxiosResponse<ResultDataType>>;
  }
}

//基本的初始化设置
let http: NewAxiosInstance = axios.create({
  baseURL: import.meta.env.VITE_BASE_URL as string, //因为使用的是vite构建的项目，所以这里是这么获取代理名称的，根据自己情况修改
  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请求，根据自己情况修改
    response.data = qs.stringify(response.data);
  }else if(response.method && GET_METHOD.includes(response.method)){//设置GET的请求参数
  	response.params = qs.parse(response.data);
  	response.data = undefined;
  }
  return response;
}, error => {
  return error;
});

//响应拦截器
http.interceptors.response.use(response => {
  return Promise.resolve(response);
}, error => {
  return error;
});

export default http;

设置axios.ts

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


export default <T extends apiKeyType>(obj: AxiosRequestConfig & {url: T}) => {
  
  return new Promise<apiKeyDataType[T]>((resolve, reject) => {
    
    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);
    })
  })
}