8000 docs: improved docs readability · svnrnns/aurora-vue3@8fc85ac · GitHub
[go: up one dir, main page]

Skip to content

Commit 8fc85ac

Browse files
committed
docs: improved docs readability
1 parent c14f24d commit 8fc85ac

File tree

3 files changed

+43
-23
lines changed

3 files changed

+43
-23
lines changed

LICENSE

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
MIT License
22

3-
Copyright (c) 2021-present Svnrnns
3+
Copyright (c) 2024 Svnrnns
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal

README.md

Lines changed: 41 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,14 @@
11
# Aurora
22

3-
Aurora is a package that enhances the Axios experience in **Vue 3**, replacing the asynchrony with Vue proxys and offering advanced features like automatic loading state management, set a limit for unresolved ongoing calls, request cancellation, authentication support, reactive calls, call timeouts, call intervals, and more.
3+
Aurora is a package designed to elevate the Axios experience within Vue 3 applications. It replaces traditional asynchronous handling with Vue proxies, offering advanced features such as:
4+
5+
- Automatic loading state management.
6+
- Setting limits for unresolved ongoing calls.
7+
- Request cancellation.
8+
- Authentication support.
9+
- Reactive calls.
10+
- Call timeouts.
11+
- Call intervals.
412

513
## Table of Contents
614

@@ -25,15 +33,15 @@ Aurora is a package that enhances the Axios experience in **Vue 3**, replacing t
2533

2634
### Recall Functionality:
2735

28-
- Introducing a "recall" feature allowing users to re-trigger Axios calls and update computed data.
36+
- Introducing a "recall" feature allowing developers to re-trigger Axios calls and update computed data.
2937

3038
### Reactivity:
3139

32-
- Make a call recall itself automatically whenever the value of the endpoint, header or param changes or updates.
40+
- Automatically trigger a call to update whenever there are changes or updates to the value of the endpoint, header, or parameter.
3341

3442
### Request Cancellation:
3543

36-
- Mechanism to cancel requests, especially useful in scenarios like navigating away from a component while a request is still pending.
44+
- Mechanism to cancel unresolved requests, specially useful in scenarios like navigating away from a component while a request is still pending.
3745
- Utilizes the modern AbortController for request cancellation.
3846

3947
### Authentication Support:
@@ -58,8 +66,8 @@ Aurora is a package that enhances the Axios experience in **Vue 3**, replacing t
5866

5967
### Intervals:
6068

61-
- Implement an interval to repeat the same call after a given milliseconds.
62-
- Utility function of an instance to clear the interval if needed.
69+
- Implement an interval to repeat the same call after a specified number of milliseconds.
70+
- Utility function within the instance to clear the interval if necessary
6371

6472
### Error Handling:
6573

@@ -75,8 +83,8 @@ $ npm install aurora-vue3 --save-dev
7583

7684
[Install](#Installation) the Aurora package. <br>
7785

78-
Create an instance of Aurora with an optional URL. <br>
79-
If the constructor receives and URL, it will be set as base URL so every call made with take the **endpoint** param as an API endpoint combining the URL and the endpoint. <br>
86+
Create an instance of Aurora, optionally specifying a base URL.<br>
87+
If a URL is provided during instantiation, it will serve as the base URL for all subsequent calls. Each call made will take the endpoint parameter as an API endpoint, combining it with the specified URL. <br>
8088

8189
```js
8290
import Aurora from "aurora-vue3";
@@ -85,13 +93,13 @@ const auroraInstance = new Aurora("https://api.example.com");
8593
const response = auroraInstance.get("/users");
8694
```
8795

88-
On the other hand, if the constructor does not receive an URL, then the **endpoint** param will become the complete URL of the call.
96+
On the other hand, if the constructor does not receive a URL, then the endpoint parameter will serve as the complete URL for the call. This provides flexibility in specifying either a base URL or a complete URL depending on the requirements of your application.
8997

9098
```js
9199
import Aurora from "aurora-vue3";
92100

93101
const auroraInstance = new Aurora();
94-
const response = auroraInstance.get("https://api.example.com");
102+
const response = auroraInstance.get("https://api.example.com/users");
95103
```
96104

97105
When creating an Aurora instance, this is bounded by default to an AbortController and set to a maximum number of concurrent requests of Infinite.
@@ -107,7 +115,7 @@ const auroraInstance = new Aurora(
107115

108116
### Make a Request
109117

110-
Any Aurora request returns a computed variable with the following properties:
118+
Any Aurora request returns a Vue computed variable with the following properties:
111119

112120
- 6D40 **isLoading**: Indicates whether or not the request has been resolved.
113121
- **response**: The request response.
@@ -131,9 +139,9 @@ There are 5 available methods to make a call, being **GET, POST, PUT, PATCH and
131139
132140
### Instance Configuration
133141

134-
Aurora offers several tools to customize the instance, such as base url, headers, params, custom AbortController for handling request cancellation, and setting a maximum of ongoing unresolved requests.
142+
Aurora offers several tools to customize the instance, such as base URL, headers, params, custom AbortController for handling request cancellation, and the option to set a maximum of ongoing unresolved requests.
135143

136-
- To add a **base url**, use the Aurora constructor. This url will be used when making a request using this instance.
144+
- To add a **base URL**, use the Aurora constructor. This URL will be used when making a request using this instance.
137145

138146
```js
139147
new Aurora("https://api.example.com");
@@ -197,14 +205,15 @@ auroraInstance.removeTimeout();
197205
## Advanced Usage
198206

199207
The existing functions **get( )**, **post( )**, **put( )**, **patch( )** and **delete( )** are alias of the main function **call( )**. <br>
200-
A get( ) function simply uses the method call( ) passing "get" as a param.
208+
A **get( )** function simply uses the method **call( )** passing "get" as a param.
201209

202210
```js
203211
auroraInstance.get("https://api.example.com");
204212
auroraInstance.call("get", "https://api.example.com");
213+
// both are the same thing
205214
```
206215

207-
This is the main method of Aurora and has a lot of configuration and features.
216+
Those are the main methods of Aurora and has a lot of configuration and features.
208217

209218
### Additional headers & params
210219

@@ -219,7 +228,9 @@ const headers = {
219228
}
220229
}
221230

222-
const customHeadersRequest = auroraInstance.get("/api/data", headers);
231+
const customHeadersRequest = auroraInstance.get(
232+
"/api/data",
233+
headers);
223234

224235
// Make a GET request with custom query parameters
225236
const queryParams = {
@@ -236,6 +247,8 @@ const customQueryParamsRequest = auroraInstance.get(
236247
);
237248
```
238249

250+
> We are passing `null` above as we are not adding headers to that call.
251+
239252
### Usage of the config parameter
240253

241254
An Aurora instance call can receive a config object that indicates the behavior of the call. <br>
@@ -258,7 +271,7 @@ setTimeout(() => {
258271
}, 30000);
259272
```
260273

261-
### The config param: Timeouts
274+
### The config param: Timeout
262275

263276
Set a custom timeout for the request to ensure it doesn't run indefinitely, even if it does not receive a response.
264277

@@ -272,35 +285,42 @@ const timeoutResponse = auroraInstance.get("/api/data", null, null, config);
272285

273286
### How Reactivity works
274287

275-
A call can be made reactive in Aurora, making it recall itself whenever any value of the endpoint, headers, or params changes. In a case where a param is `page: 10` in the first place but then it updates to `page: 11`, if the call is set to reactive, then it will repeat the API call but using the updated param. This applies to endpoint and headers as well as said before <br>
288+
In Aurora, you can make a call reactive, allowing it to automatically recall itself whenever there is a change in any value of the endpoint, headers, or parameters. For example, if a parameter initially has a value of `page: 10`, but later updates to `page: 11`, a reactive call will automatically repeat the API call using the updated parameter value. <br>
289+
This reactivity also applies to changes in endpoints and headers, as mentioned earlier. <br>
276290

277-
To accomplish this, set the option `reactive: true` in the config param.
291+
To enable this feature, simply set the option reactive: true in the configuration parameter.
278292

279293
```js
280294
const config = { reactive: true };
281295
```
282296

283-
Then make sure to be using reactive objects in the call method params. Use `ref/computed` for a reactive endpoint and the `reactive` Vue object for the headers and params.
297+
Ensure the usage of reactive objects in the call metod parameters. <br>
298+
Use `ref/computed` for a reactive endpoint and the `reactive` Vue object for the headers and params.
284299

285300
```js
301+
// Define reactive variables
286302
const selectedLimit = ref(10);
287303
const selectedPokemon = ref("ditto");
288304
const baseURL = "https://pokeapi.co/api/v2/pokemon/";
289305

306+
// Create a reactive reference to the base URL
290307
const refURL = ref(baseURL);
291308

309+
// Compute the URL dynamically based on selectedPokemon value
292310
const computedURL = computed(() => {
293311
return baseURL + selectedPokemon.value;
294312
});
295313

314+
// Define reactive parameters using Vue's reactive function
296315
const reactiveParams = reactive({
297316
limit: selectedLimit,
298317
});
299318

319+
// Invoke the Aurora instance's get method
300320
auroraInstance.get(computedURL, null, reactiveParams, config);
301321
```
302322

303-
> For a better understanding, in the code we see above this note, if the reactiveParam or the computedURL values changes or updates, then the computed response of the `get( )` method wiill update in real time, as the config is set to `reactive: true` and both endpoint and params are using reactive Vue objects.
323+
> To clarify, in the provided code snippet, any changes or updates to the values of `reactiveParams` or `computedURL` will dynamically reflect in the computed response of the **get()** method. This is facilitated by setting the config option to reactive: true and utilizing reactive Vue objects for both endpoint and parameters.
304324
305325
### The Recall function
306326

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "aurora-vue3",
33
"private": false,
4-
"version": "0.0.5",
4+
"version": "0.0.51",
55
"description": "Enhanced Axios package for Vue 3",
66
"license": "MIT",
77
"type": "module",

0 commit comments

Comments
 (0)
0