https://github.com/terryz/http-data-request
https://github.com/terryz/http-data-request
Last synced: 5 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/terryz/http-data-request
- Owner: TerryZ
- License: mit
- Created: 2024-07-11T07:28:14.000Z (about 2 years ago)
- Default Branch: dev
- Last Pushed: 2025-03-10T05:08:22.000Z (over 1 year ago)
- Last Synced: 2025-04-07T00:34:06.521Z (over 1 year ago)
- Language: JavaScript
- Homepage: https://terryz.github.io/docs-utils/http-data-request
- Size: 247 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG-CN.md
- License: LICENSE
Awesome Lists containing this project
README
# http-data-request
Create customized data request methods for web projects
[](https://circleci.com/gh/TerryZ/http-data-request/tree/main)
[](https://codecov.io/gh/TerryZ/http-data-request)
[](https://www.npmjs.com/package/http-data-request)
[](https://mit-license.org/)
[](https://www.npmjs.com/package/http-data-request)
## Features
- Automatically save and apply authorization tokens
- Unified handling of exception information
- Customizable status code
- Customizable authorization data node
- Provides quick access functions for each request method
- Provides a function to cancel all current requests
## Examples and Documentation
Documentation and examples please visit below sites
- [Github pages](https://terryz.github.io/docs-utils/http-data-request/)
## Installation
```sh
# npm
npm i http-data-request
# yarn
yarn add http-data-request
# pnpm
pnpm add http-data-request
```
### Setup to your project
Add a file in the project, such as `/src/config/http/index.js`, to set the global configuration of `http-data-request` and export various functional functions
```js
import { useHttpDataRequest } from 'http-data-request'
const options = {
baseUrl: 'https://example.com/api',
}
export const {
http, get, post, put, patch, del, cancel
} = useHttpDataRequest(options)
```
In the Vite configuration file `vite.config.js`, set an alias for the project installation module directory for http
```js
import { fileURLToPath, URL } from 'node:url'
import { resolve } from 'path'
import { defineConfig } from 'vite'
export default defineConfig({
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
'@api': fileURLToPath(new URL('./src/api', import.meta.url)),
'@http': fileURLToPath(new URL('./src/config/http', import.meta.url))
}
},
...
})
```
## Usage
Define data request methods for business
```js
// /src/api/user.js
import { get, post } from '@http'
export function getUser (userId) {
return get(`/user/${userId}`)
}
```
Use in component
```vue
User name: {{ user.name }}
User age: {{ user.age }}
import { ref } from 'vue'
import { getUser } from '@api/user'
const user = ref({})
getUser(10).then(data => { user.value = data })
```