Skip to content

Commit

Permalink
Merge pull request #2 from lsky-walt/dev
Browse files Browse the repository at this point in the history
Dev
  • Loading branch information
lsky-walt authored Jul 31, 2020
2 parents d099612 + 0d29a67 commit b84f03a
Show file tree
Hide file tree
Showing 10 changed files with 212 additions and 53 deletions.
4 changes: 4 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
# Change Log

## v0.0.3 - 2020-07-31

- 🐞 : cancel request when component will unmount.

## v0.0.2 - 2020-07-30

- new feat: support loading attribute
Expand Down
8 changes: 4 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@


<p align="center">
<img href="https://github.com/lsky-walt/http-react" src="https://img.shields.io/badge/npm-0.0.2-blue?style=flat-square">
<img href="https://github.com/lsky-walt/http-react" src="https://img.shields.io/badge/npm-0.0.3-blue?style=flat-square">
<img href="https://github.com/lsky-walt/http-react" src="https://img.shields.io/badge/React-%3E=16.9.0-brightgreen?style=flat-square">
<img href="https://github.com/lsky-walt/http-react" src="https://img.shields.io/badge/axios-%3E=0.19.0-brightgreen?style=flat-square">
<img href="https://github.com/lsky-walt/http-react" src="https://img.shields.io/badge/size-21k-blue?style=flat-square">
Expand Down Expand Up @@ -111,7 +111,7 @@ class Index extends React.Component {
| --- | --- | --- | --- |
| method | string | null | http method |
| url | string | null | url |
| debounce | number | 100 | debounce |
| debounce | number | 500 | debounce |
| data | string \| plain object \| URLSearchParams | null | `data` is the data to be sent as the request body; Only applicable for request methods 'PUT', 'POST', and 'PATCH' |
| params | plain object | null | `params` are the URL parameters to be sent with the request |
| children | React.ReactChild | null | react node |
Expand All @@ -126,7 +126,7 @@ class Index extends React.Component {
| attr | type | default value | desc |
| --- | --- | --- | --- |
| url | string | null | url |
| debounce | number | 100 | debounce |
| debounce | number | 500 | debounce |
| params | plain object | null | `params` are the URL parameters to be sent with the request |
| children | React.ReactChild | null | react node |
| loading | React.ReactNode \| boolean | null | show in loading |
Expand All @@ -140,7 +140,7 @@ class Index extends React.Component {
| attr | type | default value | desc |
| --- | --- | --- | --- |
| url | string | null | url |
| debounce | number | 100 | debounce |
| debounce | number | 500 | debounce |
| data | string \| plain object \| URLSearchParams | null | `data` is the data to be sent as the request body; Only applicable for request methods 'PUT', 'POST', and 'PATCH' |
| params | plain object | null | `params` are the URL parameters to be sent with the request |
| children | React.ReactChild | null | react node |
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@lsky/http-react",
"version": "0.0.2",
"version": "0.0.3",
"main": "./lib/index.js",
"repository": "https://github.com/lsky-walt/http-react.git",
"author": "lsky_walt <[email protected]>",
Expand Down
61 changes: 61 additions & 0 deletions site/component/base.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
/* eslint-disable no-plusplus */
/* eslint-disable react/button-has-type */
import React from 'react'
// eslint-disable-next-line import/no-named-as-default
import HttpReact, { Post, Get } from '../../src'

import { http, post, get } from '../config'

interface SiteState {
count: number
}

class Index extends React.Component<{}, SiteState> {
constructor() {
// @ts-ignore
super()
this.state = {
count: 0,
}
}

render() {
const { count } = this.state
return (
<div>
<button onClick={() => {
this.setState({
count: count + 1,
})
}}
>
count++
</button>
<HttpReact
url={http.url}
data={{ ...http.data, count }}
method="post"
onResponse={(response) => { console.log('response: ', response) }}
onError={(error) => console.log('error: ', error)}
onLoading={(loading) => console.log('isLoading: ', loading)}
>
<div>
http react
{' '}
{count}
</div>
</HttpReact>
<Post
url={post.url}
data={post.data}
onResponse={(response) => { console.log('post: ', response) }}
>
post http react
</Post>
<Get url={get.url} onResponse={(response) => { console.log('get: ', response) }} loading={<div>loading...</div>} />
</div>
)
}
}

export default Index
98 changes: 98 additions & 0 deletions site/component/nested.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
/* eslint-disable no-plusplus */
/* eslint-disable react/button-has-type */
import React from 'react'
// eslint-disable-next-line import/no-named-as-default
import HttpReact, { Post, Get } from '../../src'

import { http, post, get } from '../config'

interface SiteState {
count: number,
first: boolean,
second: boolean,
third: boolean,
}

class Index extends React.Component<{}, SiteState> {
first: (flag: any) => void

third: (flag: any) => void

second: (flag: any) => void

constructor() {
// @ts-ignore
super()
this.state = {
count: 0,
first: true,
second: true,
third: true,
}

this.first = this.update.bind(this, 'first')
this.second = this.update.bind(this, 'second')
this.third = this.update.bind(this, 'third')
}

update(key: 'first' | 'second' | 'third', flag: boolean) {
// @ts-ignore
this.setState({
[key]: flag,
})
}

render() {
const {
count, first, second, third,
} = this.state
return (
<div>
<button onClick={() => {
this.setState({
count: count + 1,
})
}}
>
count++
</button>
<HttpReact
url={http.url}
data={{ ...http.data, count }}
method="post"
onResponse={(response) => { console.log('response: ', response) }}
onError={(error) => console.log('error: ', error)}
onLoading={this.first}
>
{
!first ? (
<Post
url={post.url}
data={post.data}
onResponse={(response) => { console.log('post: ', response) }}
onLoading={this.second}
>
{
!second ? (
<Get
url={get.url}
onResponse={(response) => { console.log('get: ', response) }}
loading={<div>loading...</div>}
onLoading={this.third}
>
{
!third ? `nested state count: ${count}` : undefined
}
</Get>
) : undefined
}
</Post>
) : undefined
}
</HttpReact>
</div>
)
}
}

export default Index
48 changes: 4 additions & 44 deletions site/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,58 +2,18 @@
/* eslint-disable react/button-has-type */
import React from 'react'
import { render } from 'react-dom'
// eslint-disable-next-line import/no-named-as-default
import HttpReact, { Post, Get } from '../src'

import { http, post, get } from './config'
import Base from './component/base'
import Nested from './component/nested'

interface SiteState {
count: number
}

class Index extends React.Component<{}, SiteState> {
constructor() {
// @ts-ignore
super()
this.state = {
count: 0,
}
}

class Index extends React.PureComponent {
render() {
const { count } = this.state
return (
<div>
<button onClick={() => {
this.setState({
count: count + 1,
})
}}
>
count++
</button>
<HttpReact
url={http.url}
data={{ ...http.data, count }}
method="post"
onResponse={(response) => { console.log('response: ', response) }}
onError={(error) => console.log('error: ', error)}
onLoading={(loading) => console.log('isLoading: ', loading)}
>
<div>
http react
{' '}
{count}
</div>
</HttpReact>
<Post
url={post.url}
data={post.data}
onResponse={(response) => { console.log('post: ', response) }}
>
post http react
</Post>
<Get url={get.url} onResponse={(response) => { console.log('get: ', response) }} loading={<div>loading...</div>} />
<Nested />
</div>
)
}
Expand Down
32 changes: 30 additions & 2 deletions src/components/base.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,12 @@ class Index extends React.Component<HttpReact, HttpState> {
// @ts-ignore
debounceHttp: (params: HttpProps) => void

static displayName: string

cancelToken: Axios.CancelTokenSource | null

isCancel: any

constructor(props: HttpReact) {
super(props)
this.inLoading = this.loading.bind(this, true)
Expand All @@ -55,6 +61,10 @@ class Index extends React.Component<HttpReact, HttpState> {
// init http
this.setDebounceHttp()

this.cancelToken = null

this.isCancel = null

this.state = {
show: false,
}
Expand All @@ -73,10 +83,18 @@ class Index extends React.Component<HttpReact, HttpState> {
}

if (!isequal(pick(this.props, compareKey), pick(prevProps, compareKey))) {
// if (this.cancelToken) this.cancelToken.cancel('cancel before http request')
this.debounceHttp(props)
}
}

componentWillUnmount() {
if (this.cancelToken) this.cancelToken.cancel('component will unmount')
// clearable
this.debounceHttp = () => {}
this.cancelToken = null
}

setDebounceHttp() {
const { debounce = 500 } = this.props
// @ts-ignore
Expand All @@ -89,27 +107,35 @@ class Index extends React.Component<HttpReact, HttpState> {
url, method = 'get', onResponse = () => {}, onError = () => {}, onLoading, ...options
} = props

// cancelToken
this.cancelToken = Axios.default.CancelToken.source()

// loading
this.inLoading()

axios({
method,
url,
cancelToken: this.cancelToken?.token,
...options,
}).then((response: Axios.AxiosResponse) => {
this.notLoading()
if (typeof onResponse === 'function') onResponse(response)
this.notLoading()
})
.catch((error: Axios.AxiosError) => {
this.notLoading()
this.isCancel = error
if (typeof onError === 'function') onError(error)
this.notLoading()
})
}

loading(flag: boolean) {
const { onLoading } = this.props
if (typeof onLoading === 'function') onLoading(flag)

// if this request is canceled, return
if (Axios.default.isCancel(this.isCancel)) return

this.setState({
show: !flag,
})
Expand Down Expand Up @@ -144,4 +170,6 @@ class Index extends React.Component<HttpReact, HttpState> {

Index.contextType = HttpContext

Index.displayName = 'HttpReact'

export default Index
4 changes: 2 additions & 2 deletions src/components/context/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React, { createContext } from 'react'
import axios, { AxiosRequestConfig, AxiosInstance } from 'axios'

interface ContextType {
axios: null | AxiosInstance
axios: null | AxiosInstance,
}

export const HttpContext = createContext<ContextType>({
Expand All @@ -11,7 +11,7 @@ export const HttpContext = createContext<ContextType>({

export interface RootAxios extends AxiosRequestConfig {
children?: React.ReactChild,
instance?: AxiosInstance
instance?: AxiosInstance,
}

class HttpProvider extends React.Component<RootAxios> {
Expand Down
4 changes: 4 additions & 0 deletions src/components/get.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,15 @@ export interface GetHttpReact {
}

class Index extends React.PureComponent<GetHttpReact> {
static displayName: string

render() {
return (
<Base {...this.props} method="get" />
)
}
}

Index.displayName = 'GetHttpReact'

export default Index
Loading

0 comments on commit b84f03a

Please sign in to comment.