### GET Request with Query Parameters (TypeScript)

Source: https://context7.com/may529/apiintegration/llms.txt

Fetches a list of resources using query parameters for filtering and searching. This hook accepts a `QueryParams` object and passes it as query parameters to the GET request. It manages loading state and provides a way to trigger searches.

```typescript
import request from '@/apis/request';
import createApiHooks from 'create-api-hooks';

interface QueryParams {
  status?: string;
  category?: string;
  searchTerm?: string;
}

interface Product {
  id: string;
  name: string;
  price: number;
}

// Define the API hook
const useSearchProducts = createApiHooks((params: QueryParams)
  request.get<BaseResponse<Product[]>>('/api/products', { params })
);

// Usage in component
const ProductList = () => {
  const { data, loading, request: searchProducts } = useSearchProducts({
    initValue: { code: 0, msg: '', data: [] },
    params: { status: 'active', category: 'electronics' },
    needInit: true
  });

  const handleSearch = (term: string) => {
    searchProducts({ searchTerm: term, status: 'active' });
  };

  return (
    <div>
      {loading ? 'Loading...' : data.data.map(p => (
        <div key={p.id}>{p.name} - ${p.price}</div>
      ))}
    </div>
  );
};
```

--------------------------------

### Fetch Paginated Data with POST Request - TypeScript

Source: https://context7.com/may529/apiintegration/llms.txt

Demonstrates fetching paginated data using an HTTP POST request. The request includes parameters for page number, items per page, and optional filters like status or search terms. This example uses 'create-api-hooks' to manage the data fetching process and component state, including loading and initial values.

```typescript
import request from '@/apis/request';
import createApiHooks from 'create-api-hooks';
import { ListApiResponseData } from '@/apis/d';

interface OrderItem {
  id: string;
  orderNumber: string;
  total: number;
  status: string;
}

interface PaginationParams {
  pageNum: number;
  numPerPage?: number;
  status?: string;
  searchName?: string;
}

// Define the API hook
const useGetOrdersPage = createApiHooks((params: PaginationParams) =>
  request.post<ListApiResponseData<OrderItem>>('/api/orders/page', null, { params })
);

// Usage in component
const OrdersTable = () => {
  const { data, loading, request: loadOrders } = useGetOrdersPage({
    initValue: { data: { recordList: [], totalRecordCount: 0 } },
    params: { pageNum: 1, numPerPage: 20 },
    needInit: true
  });

  const handlePageChange = (page: number) => {
    loadOrders({ pageNum: page, numPerPage: 20, status: 'pending' });
  };

  const handleSearch = (searchTerm: string) => {
    loadOrders({ pageNum: 1, numPerPage: 20, searchName: searchTerm });
  };

  return (
    <div>
      {loading ? 'Loading...' : (
        <>
          <table>
            {data.data.recordList.map(order => (
              <tr key={order.id}>
                <td>{order.orderNumber}</td>
                <td>${order.total}</td>
                <td>{order.status}</td>
              </tr>
            ))}
          </table>
          <Pagination
            total={data.data.totalRecordCount}
            pageSize={20}
            onChange={handlePageChange}
          />
        </>
      )}
    </div>
  );
};

```

--------------------------------

### Fetch Paginated Data with Sorting via POST - TypeScript

Source: https://context7.com/may529/apiintegration/llms.txt

Implements fetching paginated data with sorting capabilities. The POST request includes parameters for page number, items per page, and specific fields for sorting (sortField, sortMode). This example utilizes 'create-api-hooks' for managing API calls and component state, allowing dynamic sorting within the UI.

```typescript
import request from '@/apis/request';
import createApiHooks from 'create-api-hooks';
import { ListApiResponseData } from '@/apis/d';

interface ProductItem {
  id: string;
  name: string;
  price: number;
  createdAt: string;
}

interface SortedPaginationParams {
  pageNum: number;
  numPerPage?: number;
  sortField?: string;
  sortMode?: string;
}

// Define the API hook
const useGetProductsPage = createApiHooks((params: SortedPaginationParams) =>
  request.post<ListApiResponseData<ProductItem>>('/api/products/page', null, { params })
);

// Usage in component
const ProductsGrid = () => {
  const [sortConfig, setSortConfig] = useState({ field: 'price', mode: 'desc' });

  const { data, loading, request: loadProducts } = useGetProductsPage({
    initValue: { data: { recordList: [], totalRecordCount: 0 } },
    params: {
      pageNum: 1,
      numPerPage: 10,
      sortField: 'price',
      sortMode: 'desc'
    },
    needInit: true
  });

  const handleSort = (field: string) => {
    const mode = sortConfig.mode === 'asc' ? 'desc' : 'asc';
    setSortConfig({ field, mode });
    loadProducts({
      pageNum: 1,
      numPerPage: 10,
      sortField: field,
      sortMode: mode
    });
  };

  return (
    <div>
      <button onClick={() => handleSort('price')}> 
        Sort by Price {sortConfig.field === 'price' && sortConfig.mode}
      </button>
      {loading ? 'Loading...' : data.data.recordList.map(p => (
        <div key={p.id}>{p.name} - ${p.price}</div>
      ))}
    </div>
  );
};

```

--------------------------------

### GET Request with Path Parameters (TypeScript)

Source: https://context7.com/may529/apiintegration/llms.txt

Fetches a single resource by its ID using path parameters. This hook utilizes the `createApiHooks` function and expects an `id` in its parameters. It returns data, loading state, and a function to re-fetch.

```typescript
import request from '@/apis/request';
import createApiHooks from 'create-api-hooks';

interface UserDetail {
  id: string;
  name: string;
  email: string;
}

interface BaseResponse<T = any> {
  code: number;
  msg: string;
  data: T;
}

// Define the API hook
const useGetUserById = createApiHooks((params: { id: string })
  request.get<BaseResponse<UserDetail>>(`/api/users/${params.id}`)
);

// Usage in component
const UserProfile = () => {
  const { data, loading, request: fetchUser } = useGetUserById({
    initValue: { code: 0, msg: '', data: { id: '', name: '', email: '' } },
    needInit: false
  });

  useEffect(() => {
    fetchUser({ id: '123' });
  }, []);

  if (loading) return <div>Loading...</div>;
  return <div>{data.data.name} - {data.data.email}</div>;
};
```

--------------------------------

### Complete CRUD Operations for Resource Management (TypeScript)

Source: https://context7.com/may529/apiintegration/llms.txt

Implements all standard CRUD endpoints (Create, Read, Update, Delete) for managing a resource. It utilizes `request` for HTTP calls and `create-api-hooks` for abstracting API logic. The example includes data interfaces, API module export, and component usage for handling list loading, item creation, updates, deletion, and detail retrieval.

```typescript
import request from '@/apis/request';
import createApiHooks from 'create-api-hooks';
import { ListApiResponseData } from '@/apis/d';

interface ItemDetail {
  id: string;
  name: string;
  description: string;
  status: string;
}

interface CreateItemDto {
  name: string;
  description: string;
}

interface UpdateItemDto {
  name?: string;
  description?: string;
  status?: string;
}

// Complete API module export
export default {
  // List items with pagination
  获取列表: createApiHooks((params: {
    pageNum: number;
    numPerPage?: number;
    searchKey?: string;
  }) =>
    request.post<ListApiResponseData<ItemDetail>>('/api/items/page', null, { params })
  ),

  // Get single item detail
  获取详情: createApiHooks((params: { id: string }) =>
    request.get<BaseResponse<ItemDetail>>(`/api/items/${params.id}`)
  ),

  // Create new item
  创建项目: createApiHooks((data: CreateItemDto) =>
    request.post<BaseResponse<{ id: string }>>('/api/items', data)
  ),

  // Update existing item
  更新项目: createApiHooks((params: { id: string }, data: UpdateItemDto) =>
    request.put<BaseResponse>(`/api/items/${params.id}`, data)
  ),

  // Delete item
  删除项目: createApiHooks((params: { id: string }) =>
    request.delete<BaseResponse>(`/api/items/${params.id}`)
  )
};

// Usage in component
const ItemManager = () => {
  const { data: listData, loading: listLoading, request: loadList } = 
    ItemApi.获取列表({
      initValue: { data: { recordList: [], totalRecordCount: 0 } },
      params: { pageNum: 1, numPerPage: 10 },
      needInit: true
    });

  const { request: createItem } = ItemApi.创建项目({ needInit: false });
  const { request: updateItem } = ItemApi.更新项目({ needInit: false });
  const { request: deleteItem } = ItemApi.删除项目({ needInit: false });
  const { request: getDetail } = ItemApi.获取详情({ needInit: false });

  const handleCreate = async () => {
    const result = await createItem({ name: 'New Item', description: 'Description' });
    if (result.code === 0) {
      loadList({ pageNum: 1, numPerPage: 10 }); // Refresh list
    }
  };

  const handleUpdate = async (id: string) => {
    await updateItem({ id }, { status: 'active' });
    loadList({ pageNum: 1, numPerPage: 10 });
  };

  const handleDelete = async (id: string) => {
    if (confirm('Delete this item?')) {
      await deleteItem({ id });
      loadList({ pageNum: 1, numPerPage: 10 });
    }
  };

  const handleViewDetail = async (id: string) => {
    const detail = await getDetail({ id });
    console.log('Item detail:', detail.data);
  };

  return (
    <div>
      <button onClick={handleCreate}>Create New</button>
      {listLoading ? 'Loading...' : listData.data.recordList.map(item => (
        <div key={item.id}>
          <span>{item.name}</span>
          <button onClick={() => handleViewDetail(item.id)}>View</button>
          <button onClick={() => handleUpdate(item.id)}>Activate</button>
          <button onClick={() => handleDelete(item.id)}>Delete</button>
        </div>
      ))}
    </div>
  );
};

```

--------------------------------

### GET Request with Custom Headers (TypeScript)

Source: https://context7.com/may529/apiintegration/llms.txt

Fetches data with custom HTTP headers, such as disabling toast notifications. This hook demonstrates how to pass a `headers` object to the request configuration, allowing for fine-grained control over request behavior.

```typescript
import request from '@/apis/request';
import createApiHooks from 'create-api-hooks';

interface ReportData {
  id: string;
  data: any[];
}

// Define the API hook with custom headers
const useGetReport = createApiHooks((params: { id: string })
  request.get<BaseResponse<ReportData>>(`/api/reports/${params.id}`, {
    headers: { 'x-showToast': 'false' }
  })
);

// Usage in component
const ReportViewer = ({ reportId }: { reportId: string }) => {
  const { data, loading, request: fetchReport } = useGetReport({
    initValue: null,
    needInit: false
  });

  useEffect(() => {
    fetchReport({ id: reportId }).then(res => {
      console.log('Report loaded silently:', res);
    });
  }, [reportId]);

  return loading ? <Spinner /> : <ReportTable data={data?.data?.data || []} />;
};
```

--------------------------------

### POST /api/products/page

Source: https://context7.com/may529/apiintegration/llms.txt

Fetches a paginated list of products with sorting capabilities.

```APIDOC
## POST /api/products/page

### Description
Retrieves a paginated list of products. Supports specifying the page number, items per page, and sorting by a specified field in a given mode.

### Method
POST

### Endpoint
`/api/products/page`

### Parameters
#### Path Parameters
None

#### Query Parameters
- **pageNum** (number) - Required - The page number to retrieve.
- **numPerPage** (number) - Optional - The number of products to display per page.
- **sortField** (string) - Optional - The field to sort the products by (e.g., 'price').
- **sortMode** (string) - Optional - The sorting mode ('asc' for ascending, 'desc' for descending).

### Request Body
Null

### Request Example
None

### Response
#### Success Response (200)
- **data** (object) - Contains the product data.
  - **recordList** (array) - A list of product items.
    - **id** (string) - The unique identifier of the product.
    - **name** (string) - The name of the product.
    - **price** (number) - The price of the product.
    - **createdAt** (string) - The date and time the product was created.
  - **totalRecordCount** (number) - The total number of products matching the criteria.

#### Response Example
```json
{
  "code": 0,
  "message": "Success",
  "data": {
    "recordList": [
      {
        "id": "product-abc",
        "name": "Laptop",
        "price": 1200.00,
        "createdAt": "2023-10-27T10:00:00Z"
      }
    ],
    "totalRecordCount": 100
  }
}
```
```

--------------------------------

### Manual API Request Triggering

Source: https://context7.com/may529/apiintegration/llms.txt

Demonstrates how to manually trigger API requests without automatic initialization, using two distinct methods.

```APIDOC
## GET /api/data

### Description
Fetches data based on provided parameters. This endpoint is used as an example for manual request triggering.

### Method
GET

### Endpoint
/api/data

### Parameters
#### Query Parameters
- **id** (number) - Required - An identifier for the data to be fetched.

### Request Example (Method 1: Destructured request)
```typescript
// In a React component:
const { request: fetchData } = useGetData({ needInit: false });

const handleLoadData = () => {
  fetchData({ id: 123 }).then(res => {
    console.log('Request result:', res);
  }).catch(err => {
    console.error('Request failed:', err);
  });
};
```

### Request Example (Method 2: Hook's request property)
```typescript
// Directly calling the request function:
useGetData.request({ id: 456 }).then(res => {
  console.log('Request result:', res);
  alert('Data loaded successfully');
});
```

### Response
#### Success Response (200)
- Returns a success response.

#### Response Example
```json
{
  "code": 0,
  "message": "Success",
  "data": { /* ... */ }
}
```
```

--------------------------------

### POST Request with Query Parameters (TypeScript)

Source: https://context7.com/may529/apiintegration/llms.txt

Sends a POST request with query parameters and optional body data. This is useful for operations that require identifiers or configuration passed in the URL, alongside a payload.

```typescript
import request from '@/apis/request';
import createApiHooks from 'create-api-hooks';

interface ProcessParams {
  jobId: string;
  priority: string;
}

interface ProcessBody {
  options?: Record<string, any>;
}

// Define the API hook
const useProcessJob = createApiHooks((data: ProcessBody, params: ProcessParams) =>
  request.post<BaseResponse>('/api/jobs/process', data, { params })
);

// Usage in component
const JobProcessor = () => {
  const { loading, request: processJob } = useProcessJob({
    needInit: false
  });

  const handleProcess = () => {
    processJob(
      { options: { retry: true } },
      { jobId: 'job-123', priority: 'high' }
    ).then(res => {
      console.log('Job processed:', res);
    });
  };

  return (
    <button onClick={handleProcess} disabled={loading}>
      {loading ? 'Processing...' : 'Process Job'}
    </button>
  );
};

```

--------------------------------

### POST /api/jobs/process

Source: https://context7.com/may529/apiintegration/llms.txt

Processes a job by sending optional body data and required query parameters. This endpoint is used to initiate job processing.

```APIDOC
## POST /api/jobs/process

### Description
Processes a job by sending optional body data and required query parameters. This endpoint is used to initiate job processing.

### Method
POST

### Endpoint
/api/jobs/process

### Parameters
#### Path Parameters
None

#### Query Parameters
- **jobId** (string) - Required - The ID of the job to process.
- **priority** (string) - Required - The priority level for processing the job.

#### Request Body
- **options** (object) - Optional - Additional options for processing the job.

### Request Example
```json
{
  "options": {
    "retry": true
  }
}
```

### Response
#### Success Response (200)
- **message** (string) - A confirmation message indicating the job was processed.

#### Response Example
```json
{
  "message": "Job processed successfully."
}
```
```

--------------------------------

### POST Request with JSON Body (TypeScript)

Source: https://context7.com/may529/apiintegration/llms.txt

Creates a new resource by sending JSON data in the request body. It uses the `create-api-hooks` library for managing API calls and expects a `CreateUserDto` as input and returns a `CreateUserResponse`.

```typescript
import request from '@/apis/request';
import createApiHooks from 'create-api-hooks';

interface CreateUserDto {
  name: string;
  email: string;
  role: string;
}

interface CreateUserResponse {
  id: string;
  createdAt: string;
}

// Define the API hook
const useCreateUser = createApiHooks((data: CreateUserDto) =>
  request.post<BaseResponse<CreateUserResponse>>('/api/users', data, {
    headers: { 'Content-Type': 'application/json' }
  })
);

// Usage in component
const CreateUserForm = () => {
  const { data, loading, request: createUser } = useCreateUser({
    initValue: null,
    needInit: false
  });

  const handleSubmit = async (formData: CreateUserDto) => {
    try {
      const result = await createUser(formData);
      if (result.code === 0) {
        alert(`User created with ID: ${result.data.id}`);
      }
    } catch (error) {
      console.error('Failed to create user:', error);
    }
  };

  return (
    <form onSubmit={(e) => {
      e.preventDefault();
      handleSubmit({ name: 'John', email: 'john@example.com', role: 'user' });
    }}>
      <button type="submit" disabled={loading}>
        {loading ? 'Creating...' : 'Create User'}
      </button>
    </form>
  );
};

```

--------------------------------

### POST /api/orders/page

Source: https://context7.com/may529/apiintegration/llms.txt

Fetches a paginated list of orders. Supports filtering by status and searching by name.

```APIDOC
## POST /api/orders/page

### Description
Retrieves a paginated list of orders. Allows specifying the page number, number of items per page, order status, and a search term.

### Method
POST

### Endpoint
`/api/orders/page`

### Parameters
#### Path Parameters
None

#### Query Parameters
- **pageNum** (number) - Required - The page number to retrieve.
- **numPerPage** (number) - Optional - The number of orders to display per page.
- **status** (string) - Optional - Filters orders by their status (e.g., 'pending').
- **searchName** (string) - Optional - Filters orders by name.

### Request Body
Null

### Request Example
None

### Response
#### Success Response (200)
- **data** (object) - Contains the order data.
  - **recordList** (array) - A list of order items.
    - **id** (string) - The unique identifier of the order.
    - **orderNumber** (string) - The order's tracking number.
    - **total** (number) - The total cost of the order.
    - **status** (string) - The current status of the order.
  - **totalRecordCount** (number) - The total number of orders matching the criteria.

#### Response Example
```json
{
  "code": 0,
  "message": "Success",
  "data": {
    "recordList": [
      {
        "id": "order-123",
        "orderNumber": "#12345",
        "total": 100.50,
        "status": "Shipped"
      }
    ],
    "totalRecordCount": 50
  }
}
```
```

--------------------------------

### Complete CRUD Operations for Items

Source: https://context7.com/may529/apiintegration/llms.txt

Provides endpoints for creating, reading, updating, and deleting item resources. Supports listing items with pagination.

```APIDOC
## POST /api/items/page

### Description
Retrieves a paginated list of items. Supports filtering by search key.

### Method
POST

### Endpoint
/api/items/page

### Parameters
#### Query Parameters
- **pageNum** (number) - Required - The current page number.
- **numPerPage** (number) - Optional - The number of items per page.
- **searchKey** (string) - Optional - The key to search for items.

### Request Example
```json
{
  "pageNum": 1,
  "numPerPage": 10,
  "searchKey": "example"
}
```

### Response
#### Success Response (200)
- **recordList** (array) - A list of item details.
- **totalRecordCount** (number) - The total number of records.

#### Response Example
```json
{
  "code": 0,
  "message": "Success",
  "data": {
    "recordList": [
      {
        "id": "item-1",
        "name": "Example Item 1",
        "description": "This is the first example item.",
        "status": "active"
      }
    ],
    "totalRecordCount": 1
  }
}
```

## GET /api/items/{id}

### Description
Retrieves the details of a specific item by its ID.

### Method
GET

### Endpoint
/api/items/{id}

### Parameters
#### Path Parameters
- **id** (string) - Required - The unique identifier of the item.

### Response
#### Success Response (200)
- **id** (string) - The item's ID.
- **name** (string) - The item's name.
- **description** (string) - The item's description.
- **status** (string) - The item's status.

#### Response Example
```json
{
  "code": 0,
  "message": "Success",
  "data": {
    "id": "item-1",
    "name": "Example Item 1",
    "description": "This is the first example item.",
    "status": "active"
  }
}
```

## POST /api/items

### Description
Creates a new item resource.

### Method
POST

### Endpoint
/api/items

### Parameters
#### Request Body
- **name** (string) - Required - The name of the item.
- **description** (string) - Required - The description of the item.

### Request Example
```json
{
  "name": "New Item",
  "description": "Details about the new item."
}
```

### Response
#### Success Response (200)
- **id** (string) - The ID of the newly created item.

#### Response Example
```json
{
  "code": 0,
  "message": "Success",
  "data": {
    "id": "new-item-id"
  }
}
```

## PUT /api/items/{id}

### Description
Updates an existing item resource.

### Method
PUT

### Endpoint
/api/items/{id}

### Parameters
#### Path Parameters
- **id** (string) - Required - The unique identifier of the item to update.

#### Request Body
- **name** (string) - Optional - The updated name of the item.
- **description** (string) - Optional - The updated description of the item.
- **status** (string) - Optional - The updated status of the item.

### Request Example
```json
{
  "status": "inactive"
}
```

### Response
#### Success Response (200)
- Returns a success message.

#### Response Example
```json
{
  "code": 0,
  "message": "Item updated successfully"
}
```

## DELETE /api/items/{id}

### Description
Deletes an item resource by its ID.

### Method
DELETE

### Endpoint
/api/items/{id}

### Parameters
#### Path Parameters
- **id** (string) - Required - The unique identifier of the item to delete.

### Response
#### Success Response (200)
- Returns a success message.

#### Response Example
```json
{
  "code": 0,
  "message": "Item deleted successfully"
}
```
```

--------------------------------

### POST /api/users

Source: https://context7.com/may529/apiintegration/llms.txt

Creates a new user resource by sending JSON data in the request body. This endpoint is used for user creation operations.

```APIDOC
## POST /api/users

### Description
Creates a new user resource by sending JSON data in the request body.

### Method
POST

### Endpoint
/api/users

### Parameters
#### Query Parameters
None

#### Request Body
- **name** (string) - Required - The name of the user.
- **email** (string) - Required - The email address of the user.
- **role** (string) - Required - The role assigned to the user.

### Request Example
```json
{
  "name": "John",
  "email": "john@example.com",
  "role": "user"
}
```

### Response
#### Success Response (200)
- **id** (string) - The unique identifier of the created user.
- **createdAt** (string) - The timestamp when the user was created.

#### Response Example
```json
{
  "id": "a1b2c3d4",
  "createdAt": "2023-10-27T10:00:00Z"
}
```
```

--------------------------------

### POST /api/auth/login

Source: https://context7.com/may529/apiintegration/llms.txt

Authenticates a user by sending form-encoded credentials. This endpoint is used for user login.

```APIDOC
## POST /api/auth/login

### Description
Authenticates a user by sending form-encoded credentials. This endpoint is used for user login.

### Method
POST

### Endpoint
/api/auth/login

### Parameters
#### Query Parameters
None

#### Request Body
- **username** (string) - Required - The username for authentication.
- **password** (string) - Required - The password for authentication.
- **rememberMe** (boolean) - Optional - Indicates whether to remember the user's session.

### Request Example
```
username=admin&password=password123&rememberMe=true
```

### Response
#### Success Response (200)
- **token** (string) - The authentication token issued upon successful login.
- **expiresIn** (number) - The expiration time of the token in seconds.

#### Response Example
```json
{
  "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
  "expiresIn": 3600
}
```
```

--------------------------------

### Manual API Request Triggering (TypeScript)

Source: https://context7.com/may529/apiintegration/llms.txt

Demonstrates two primary methods for manually triggering API requests without automatic initialization. It covers using the destructured `request` method from the hook and directly accessing the hook's `request` property. This allows for more control over when API calls are made, useful for event-driven interactions.

```typescript
import request from '@/apis/request';
import createApiHooks from 'create-api-hooks';

interface DataParams {
  id: number;
}

const useGetData = createApiHooks((params: DataParams) =>
  request.get<BaseResponse>('/api/data', { params })
);

// Method 1: Using destructured request method
const ComponentA = () => {
  const { data, loading, request: fetchData } = useGetData({
    needInit: false
  });

  const handleLoadData = () => {
    fetchData({ id: 123 }).then(res => {
      console.log('Request result:', res);
    }).catch(err => {
      console.error('Request failed:', err);
    });
  };

  return (
    <button onClick={handleLoadData} disabled={loading}>
      {loading ? 'Loading...' : 'Load Data'}
    </button>
  );
};

// Method 2: Using the hook's request property directly
const ComponentB = () => {
  const handleClick = () => {
    useGetData.request({ id: 456 }).then(res => {
      console.log('Request result:', res);
      alert('Data loaded successfully');
    });
  };

  return <button onClick={handleClick}>Quick Load</button>;
};

// Method 3: Multiple independent requests
const ComponentC = () => {
  const { request: fetchUserData } = useApi.getUserData({ needInit: false });
  const { request: fetchOrderData } = useApi.getOrderData({ needInit: false });

  const loadAllData = async () => {
    const [userData, orderData] = await Promise.all([
      fetchUserData({ userId: '123' }),
      fetchOrderData({ orderId: '456' })
    ]);
    console.log('All data loaded:', { userData, orderData });
  };

  return <button onClick={loadAllData}>Load All</button>;
};

```

--------------------------------

### POST Request with Form Data (TypeScript)

Source: https://context7.com/may529/apiintegration/llms.txt

Submits form-encoded data using `application/x-www-form-urlencoded` content type, commonly used for login or simple data submissions. It expects `LoginFormData` and returns a `LoginResponse` containing a token.

```typescript
import request from '@/apis/request';
import createApiHooks from 'create-api-hooks';

interface LoginFormData {
  username: string;
  password: string;
  rememberMe: boolean;
}

interface LoginResponse {
  token: string;
  expiresIn: number;
}

// Define the API hook
const useLogin = createApiHooks((data: LoginFormData) =>
  request.post<BaseResponse<LoginResponse>>('/api/auth/login', data, {
    headers: { 'content-type': 'application/x-www-form-urlencoded' }
  })
);

// Usage in component
const LoginForm = () => {
  const { data, loading, request: login } = useLogin({
    initValue: null,
    needInit: false
  });

  const handleLogin = async (username: string, password: string) => {
    const result = await login({ username, password, rememberMe: true });
    if (result.code === 0) {
      localStorage.setItem('token', result.data.token);
      window.location.href = '/dashboard';
    }
  };

  return (
    <form onSubmit={(e) => {
      e.preventDefault();
      handleLogin('admin', 'password123');
    }}>
      <input type="text" name="username" />
      <input type="password" name="password" />
      <button type="submit" disabled={loading}>
        {loading ? 'Logging in...' : 'Login'}
      </button>
    </form>
  );
};

```

--------------------------------

### Perform DELETE Request with Optional Parameters - TypeScript

Source: https://context7.com/may529/apiintegration/llms.txt

Implements a DELETE request to remove a resource by its ID. It supports optional query parameters for providing additional context, such as a reason for deletion. This snippet utilizes the 'create-api-hooks' library for managing the API call and its state, including loading indicators.

```typescript
import request from '@/apis/request';
import createApiHooks from 'create-api-hooks';

interface DeleteParams {
  id: string;
  reason?: string;
}

// Simple delete by ID
const useDeleteUser = createApiHooks((params: { id: string }) =>
  request.delete<BaseResponse>(`/api/users/${params.id}`)
);

// Delete with query parameters
const useDeleteUserWithReason = createApiHooks((params: DeleteParams) =>
  request.delete<BaseResponse>(`/api/users/${params.id}`, { params })
);

// Usage in component
const UserManagement = () => {
  const { loading: deleting, request: deleteUser } = useDeleteUser({
    needInit: false
  });

  const { request: deleteWithReason } = useDeleteUserWithReason({
    needInit: false
  });

  const handleDelete = async (userId: string) => {
    if (confirm('Are you sure?')) {
      const result = await deleteUser({ id: userId });
      if (result.code === 0) {
        alert('User deleted');
      }
    }
  };

  const handleDeleteWithReason = async (userId: string) => {
    await deleteWithReason({ id: userId, reason: 'Inactive account' });
  };

  return (
    <button onClick={() => handleDelete('user-123')} disabled={deleting}>
      {deleting ? 'Deleting...' : 'Delete User'}
    </button>
  );
};

```

--------------------------------

### PUT /api/users/{id}

Source: https://context7.com/may529/apiintegration/llms.txt

Updates an existing user resource identified by its ID. Modified data is sent in the request body.

```APIDOC
## PUT /api/users/{id}

### Description
Updates an existing user resource identified by its ID. Modified data is sent in the request body.

### Method
PUT

### Endpoint
/api/users/{id}

### Parameters
#### Path Parameters
- **id** (string) - Required - The unique identifier of the user to update.

#### Query Parameters
None

#### Request Body
- **name** (string) - Optional - The updated name of the user.
- **email** (string) - Optional - The updated email address of the user.
- **status** (string) - Optional - The updated status of the user.

### Request Example
```json
{
  "name": "Jane Doe",
  "status": "active"
}
```

### Response
#### Success Response (200)
- **message** (string) - A confirmation message indicating the user was updated successfully.

#### Response Example
```json
{
  "message": "User updated successfully."
}
```
```

--------------------------------

### DELETE /api/users/{id}

Source: https://context7.com/may529/apiintegration/llms.txt

Deletes a user resource by providing their unique identifier. Supports optional query parameters for additional context.

```APIDOC
## DELETE /api/users/{id}

### Description
Deletes a user resource by their ID. Optionally accepts query parameters like 'reason' for the deletion.

### Method
DELETE

### Endpoint
`/api/users/{id}`

### Parameters
#### Path Parameters
- **id** (string) - Required - The unique identifier of the user to delete.

#### Query Parameters
- **reason** (string) - Optional - A reason for deleting the user.

### Request Body
None

### Request Example
None

### Response
#### Success Response (200)
- **code** (number) - Indicates success (e.g., 0).
- **message** (string) - A message confirming the deletion.

#### Response Example
```json
{
  "code": 0,
  "message": "User deleted successfully"
}
```
```

--------------------------------

### PUT Request for Resource Updates (TypeScript)

Source: https://context7.com/may529/apiintegration/llms.txt

Updates an existing resource by sending modified data to a specific endpoint using the PUT HTTP method. It requires an `id` in the parameters and accepts `UpdateUserDto` for the payload.

```typescript
import request from '@/apis/request';
import createApiHooks from 'create-api-hooks';

interface UpdateUserDto {
  name?: string;
  email?: string;
  status?: string;
}

// Define the API hook
const useUpdateUser = createApiHooks((params: { id: string }, data: UpdateUserDto) =>
  request.put<BaseResponse>(`/api/users/${params.id}`, data, {
    headers: { 'Content-Type': 'application/json' }
  })
);

// Usage in component
const UserEditor = ({ userId }: { userId: string }) => {
  const { loading, request: updateUser } = useUpdateUser({
    needInit: false
  });

  const handleSave = async (updates: UpdateUserDto) => {
    try {
      const result = await updateUser({ id: userId }, updates);
      if (result.code === 0) {
        alert('User updated successfully');
      }
    } catch (error) {
      console.error('Update failed:', error);
    }
  };

  return (
    <button
      onClick={() => handleSave({ name: 'Jane Doe', status: 'active' })}
      disabled={loading}
    >
      {loading ? 'Saving...' : 'Save Changes'}
    </button>
  );
};

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.