Request
Multiple Request Environments
Development projects often use multiple request environment addresses: such as the backend address for the user development environment, the backend address for the test environment, the backend address for the pre-production environment, and the address for the production environment, etc.
Configure multiple request addresses in the environment file, and then determine which request address to use in the request function based on the environment variable.
The current project's environment files are
.env.prod
, .env.test
Introduction to Request Related Configuration
Configuration items in the .env
file
VITE_SERVICE_SUCCESS_CODE
: The code for successful backend requestsVITE_SERVICE_LOGOUT_CODES
: The code for backend request failures that require the user to log out, multiple codes are separated by,
VITE_SERVICE_MODAL_LOGOUT_CODES
: The code for backend request failures that require the user to log out (reminded by popup), multiple codes are separated by,
VITE_SERVICE_EXPIRED_TOKEN_CODES
: The code for backend request failures and refresh token, multiple codes are separated by,
Configuration items in the .env.test
or .env.prod
file
VITE_SERVICE_BASE_URL
: The base address for requestsVITE_OTHER_SERVICE_BASE_URL
: The base address for other requests
Introduction to Request Functions
- Request functions: createRequest and createFlatRequest
createRequest
: The returned request instance directly returns Axios response data (convertible)
createFlatRequest
: The returned request instance will wrap the response data and error information in a flat object, and return the result in a unified format.
- Parameters for createRequest/createFlatRequest
axiosConfig
: axios configuration, input baseUrl, define some other configurations: such as: request timeout, request header, etc.
options
: Configure input validation and other logic (see RequestOption
below)
interface RequestOption<ResponseData = any> {
/**
* Execute before sending the request to modify the request configuration, for example: add request header token
*/
onRequest: (config: InternalAxiosRequestConfig) => InternalAxiosRequestConfig | Promise<InternalAxiosRequestConfig>;
/**
* Determine whether the backend response is successful by comparing the code returned by the backend
*/
isBackendSuccess: (response: AxiosResponse<ResponseData>) => boolean;
/**
* The asynchronous function called when the backend request indicates failure in business, for example: handle token expiration
*/
onBackendFail: (
response: AxiosResponse<ResponseData>,
instance: AxiosInstance
) => Promise<AxiosResponse> | Promise<void>;
/**
* When responseType is json, convert the backend response data
*/
transformBackendResponse(response: AxiosResponse<ResponseData>): any | Promise<any>;
/**
* The function called when the request fails (including request failure and backend business failure request), for example: handle error information
*/
onError: (error: AxiosError<ResponseData>) => void | Promise<void>;
}