@canlooks/ajax
Install
npm i @canlooks/ajax
A quick example
ajax(config)
import {ajax} from '@canlooks/ajax'
const pending = ajax({
method: 'get',
url: 'https://baidu.com'
})
// pending.abort()
pending.then(res => {
console.log(res)
}).catch(e => {
console.log(e)
})Alias
- ajax.get(url[, config])
- ajax.delete(url[, config])
- ajax.head(url[, config])
- ajax.options(url[, config])
- ajax.post(url[, data[, config]])
- ajax.put(url[, data[, config]])
- ajax.patch(url[, data[, config]])
config
type AjaxConfig<T = any> = {
url?: string
method?: Method
headers?: {[p: string]: any}
params?: {[p: string | number]: any}
data?: any
timeout?: number
abortToken?: AbortToken
auth?: {
username: string
password: string
}
responseType?: XMLHttpRequestResponseType
withCredentials?: boolean
validateStatus?: ((status: number) => boolean) | boolean
onSuccess?(data: ResponseBody<T>): void
onTimeout?(error: TimeoutError): void
onError?(error: AjaxError): void
onComplete?(data: ResponseBody<T> | null, error: AjaxError | null): void
onAbort?(error: AbortError): void
onUploadProgress?: ProgressCallback
onDownloadProgress?: ProgressCallback
}
type Method =
'get' | 'GET' |
'delete' | 'DELETE' |
'head' | 'HEAD' |
'options' | 'OPTIONS' |
'post' | 'POST' |
'put' | 'PUT' |
'patch' | 'PATCH' |
'purge' | 'PURGE' |
'link' | 'LINK' |
'unlink' | 'UNLINK'Response
type ResponseBody<T = any> = {
result: T
config: AjaxConfig<T>
instance: XMLHttpRequest
status: number
statusText: string
rawHeaders?: string
headers: {[p: string]: number | string | string[]}
}Modularization
Configure & Interceptors decorator
- @Configure(url?: string)
- @Configure(config?: AjaxConfig)
- @BeforeRequest((config: AjaxConfig) => AjaxConfig | Promise<AjaxConfig>)
- @BeforeResponse((response: any, error: any, config: AjaxConfig) => any)
example
import {AjaxAbort, AjaxConfig, AjaxError, BeforeRequest, BeforeResponse, Configure, OnFailed, OnSuccess, Service} from '@canlooks/ajax'
@Configure({
url: 'https://baidu.com',
headers: {
'User-Agent': '@canlooks/ajax'
}
})
@BeforeRequest((config: AjaxConfig) => {
// To modify config before each request
return config
})
@BeforeResponse((previousResponse: any, previousError: any, config: AjaxConfig) => {
// Judge your own logic
if (previousResponse.code === 'ERR') {
// Make this request throw error
throw Error('oh no')
}
// Change return value
return res.data
})
class IndexService extends Service {
@OnSuccess
onSuccess(data: any, config: AjaxConfig) {
// Do something when each request success.
}
@OnFailed
OnFailed(error: AjaxError<any>, config: AjaxConfig) {
// Do something when each request fail.
}
}@Configure('/search')
class ExampleService extends IndexService {
myFn() {
// Request method will hang on "this", such as "get", "post"...
// The final request url is "https://baidu.com/search/test"
return this.post('/test', {
a: 572
})
}
}Use with React
When componentWillUnmount, every connected services will abort automatically.
Connect decorator
@connect({
[injectedPropertyName]: ServiceClass
})import {Component} from 'react'
import {connect} from '@canlooks/ajax/react'
import {ExampleService} from 'somewhere'
@connect({
myInjectedService: ExampleService
})
export default class Index extends Component {
// Declaring properties if you use typescript
declare myInjectedService!: ExampleService
someMethod = async () => {
const res = await this.myInjectedService.myFn()
}
render() {
return <></>
}
}useService(ServiceClass)
import {useService} from '@canlooks/ajax/react'
import {ExampleService} from 'somewhere'
export default function Index() {
const exampleService = useService(ExampleService)
const someMethod = async () => {
const res = await exampleService.myFn()
}
return <></>
}Use with Vue
useService(ServiceClass)
<template>
</template>
<script lang="ts" setup>
import {useService} from '@canlooks/ajax/vue'
import {ExampleService} from 'somewhere'
const exampleService = useService(ExampleService)
</script>registerAdapter(adapter)
Set your own request adapter in modularization.
Type of adapter
declare function registerAdapter(adapter: (config?: AjaxConfig) => any): voidFor example, replace @canlooks/ajax with jquery
import $ from 'jquery'
registerAdapter((config: AjaxConfig = {}) => {
return new Promise((success, error) => {
const {headers, method, url, data} = config
$.ajax({
headers, method, url, data,
success,
error
})
})
})For keeping abort()
import $ from 'jquery'
registerAdapter((config: AjaxConfig = {}) => {
const instance
const promise = new Promise((success, error) => {
const {headers, method, url, data} = config
instance = $.ajax({
headers, method, url, data,
success,
error
})
})
promise.abort = () => instance.abort()
return promise
})