ts + axios + useRequest (ahooks)—— 实现请求封装

现在越来越多的项目开始ts化,我们今天就一块学习一下,关于ts的请求封装。

首先要安装两个依赖:

npm i axios -S

npm i ahooks -S

引入:

javascript 复制代码
import { useRequest } from 'ahooks';
import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';

定义一个泛型接口,用于指定请求参数和响应数据的类型

javascript 复制代码
interface RequestParams<T> {
  url: string;
  method: string;
  data?: T;
}

// 定义一个范型函数,用于发送 GET 请求
function get<T>(url: string, config?: AxiosRequestConfig): Promise<AxiosResponse<T>> {
  return axios.get<T>(url, config);
}

// 定义一个范型函数,用于发送 POST 请求
function post<T>(params: RequestParams<T>, config?: AxiosRequestConfig): Promise<AxiosResponse<T>> {
  return axios.post<T>(params.url, params.data, config);
}

使用ahooks的useRequest:

javascript 复制代码
 // 使用 useRequest hooks 发送 GET 请求
  const { data, loading, error } = useRequest<{ name: string }>('https://api.example.com/data', {
    requestMethod: () => get('https://api.example.com/data'),
  });

直接使用get、post:

javascript 复制代码
// 调用 GET 方法
get<{ name: string }>('https://api.example.com/data')
  .then(response => {
    console.log(response.data.name);
  })
  .catch(error => {
    console.error(error);
  });

// 调用 POST 方法
const postData = { name: 'John' };
const postParams = { url: 'https://api.example.com/data', method: 'post', data: postData };
post<{ status: string }>(postParams)
  .then(response => {
    console.log(response.data.status);
  })
  .catch(error => {
    console.error(error);
  });
相关推荐
Json_1817901448031 分钟前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
风尚云网1 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子02041 小时前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing1 小时前
React核心功能详解(一)
前端·react.js·前端框架
捂月1 小时前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆1 小时前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China1 小时前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q1 小时前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge
滴水可藏海1 小时前
Chrome离线安装包下载
前端·chrome
m51271 小时前
LinuxC语言
java·服务器·前端