fetch二次封装完整详细场景使用案例

夲奋亻Jay

于 2024-07-28 12:19:03 发布

阅读量1.4k

点赞数 7

CC 4.0 BY-SA版权

分类专栏： Js（Javascript）文章标签： javascript

本文链接：https://blog.csdn.net/qq_29101285/article/details/140749026

二次封装 fetch API 是一种常见的做法，特别是在大型项目中，可以统一处理 HTTP 请求和响应。以下是一个使用 TypeScript 进行 fetch 二次封装的完整详细场景使用案例：

1. 创建基础的 fetch 封装

首先，创建一个基础的 fetch 封装，处理基本的 GET 和 POST 请求。

// src/utils/fetch.ts
import {
   
    Response, RequestInit } from 'node-fetch';

const BASE_URL = 'https://api.example.com';

async function fetchApi<T>(url: string, options?: RequestInit): Promise<T> {
   
   
  const response = await fetch(BASE_URL + url, options);

  if (!response.ok) {
   
   
    throw new Error(`HTTP error! status: ${
     
     response.status}`);
  }

  return response.json() as Promise<T>;
}

export async function get<T>(url: string): Promise<T> {
   
   
  return fetchApi<T>(url, {
   
    method: 'GET' });
}

export async function post<T