---
title: Lipoic frontend HTTP client guide
image: https://raw.githubusercontent.com/Lipoic/Lipoic-Assets/main/logo/logo.png
lang: en
tags: 前端, Frontend, DevGuide, Standard
---
# Lipoic frontend HTTP client | Dev Guide
Technology Needed：Basic TypeScript、[HTTP](https://developer.mozilla.org/zh-TW/docs/Web/HTTP)
Table of contents:
[TOC]
## Getting Started
### Step 1. Browse API Documents
Everything start with `Hello, World!` !
Open the `/` route in the [document](https://api-docs.lipoic.org).
### Step 2. Import the package
Yah... Just import it.
```typescript=
import httpClient from '@/http';
```
### Step 3. Choose the HTTP method and path to use
According to following image, the method is `GET` and path is `/`.
Here is the example:
```typescript=
import httpClient from '@/http';
// Use `GET` method to request it, other methods such as POST, DELETE and PATCH are similar.
const response = await httpClient.get('/');
```
### Step 4. Request parameters
Some route has parameters. For example there is a router with params like following show, and method is `GET`.
```jsonld
{
"id": number
}
```
In this situation, the code will be like
```typescript=
import httpClient from '@/http';
const response = await httpClient.get('Route Name', { id: 12345 });
```
### Step 5. Definition of Response Type
Next, definitoin the type of response.
For example, Route `/` send a success message as follow.
```jsonld=
{
"code": 0,
"data": {
"message": "Hello, World!"
}
}
```
If the Media type is JSON, we only need to read the data's content.
Otherwise, the data type is special, read the first note of [precautions](#Precautions)
This response have a specific format `message`, and the type of the format is *String*.
The Response must have a `message` in type of *String*.
So we can define the type of response as follow:
```typescript=
export interface HelloWorldMessage {
message: string
}
```
Now we change our code as follow：
```typescript=
import httpClient from '@/http';
import { HelloWorldMessage } from 'Data type define file path';
// We use generics for response type
// Actually, the type of variable `response` is `APIResponseBody<HelloWorldMessage>` that from our Standard JSON Format
const response = await httpClient.get<HelloWorldMessage>('/');
```
### Step 6. Enjoy
```typescript
console.log(response.data.message) // Output: Hello, World!
```
## Naming Rules
:::warning
Naming Rules are still editing. Please wait for updating.
:::
## Additional Informations
- [API DOCS](https://api-docs.lipoic.org)
- [Frontend Repo](https://github.com/Lipoic/Lipoic-Frontend)
- Standard JSON Response Type
```json
{
"code": Custom Status Code defined by backend, and its type is number.
"data": <Respone Data>
}
```
## Notice
### Special Response Format
If the response data type isn't JSON then change the code as follow:
```typescript=
// The type of variable "response" will be the type of Response Type
const response = await httpClient.get<undefined, Response Data Type>();
```
### Authentication
If the route requires authentication, you need to enable the `authentication` option.
For details, see the example below:
Before:
```typescript=
await httpClient.get<Response Data Type>('Example path');
```
After:
```typescript=
await httpClient.get<Response Data Type>('Example path', { authentication: true });
```
## Guide Editors
@SiongSng,
@LAZPbanahaker,
@Sapiens-homo
---
<small>Copyright © 2022-2023 Lipoic. All rights reserved.</small>
{%hackmd @lumynou5/dark-theme %}
<!-- The theme made by Luminous-Coder -->
Sign in with Wallet
Connect another wallet